[英]SignalR Doesn't work Properly in JQuery 3.x
I created a project for the real-time dashboard. 我为实时仪表板创建了一个项目。 Its working fine with jQuery version 1.x, All clients get notified as expected, but it's not working in Jquery version 3.x, only 1 or 2 clients updated, but others are not getting any server notification for the update, I didn't find any error in any browser (client).
它可以与jQuery 1.x版一起正常工作,所有客户端均按预期方式收到通知,但在Jquery 3.x版中不起作用,仅更新了1或2个客户端,但其他客户端未获得任何服务器通知以进行更新,我没有在任何浏览器(客户端)中找不到任何错误。 I am using JQuery 3.x in my Application.
我在我的应用程序中使用JQuery3.x。
Js Part Js部分
<script src="~/Scripts/jquery-3.3.1.js"></script>
<script src="~/Scripts/jquery.signalR-2.4.1.js"></script>
<script src="/signalr/hubs"></script>
<script src="~/Scripts/NewFolder1/Test.js"></script>
in Test.js 在Test.js中
$(document).ready(function() {
$(function () {
// Reference the hub.
var hubNotif = $.connection.testHub;
// Start the connection.
$.connection.hub.start().done(function () {
getCount();
});
// Notify while anyChanges.
hubNotif.client.updatedData = function () {
getCount();
};
});
});
function getCount() {
var url = "../Home/GetCount";
$.post(url, function(rData) {
$("#MyCount").html(rData);
});
}
I have used signalR with jquery 3.X 我在Jquery 3.X中使用了signalR
Here I give u my code. 在这里,我给你我的代码。 hope it will help you to solve your problem.
希望它将帮助您解决问题。
in my aspx page: 在我的aspx页面中:
<script src="<%=ResolveUrl("Scripts/jquery-3.3.1.min.js") %>"></script>
<script src="<%=ResolveUrl("Scripts/jquery.signalR-2.4.0.js") %>"></script>
<!--Reference the autogenerated SignalR hub script. -->
<script src="/signalr/hubs"></script>
<script type="text/javascript">
$(function () {
var chat = $.connection.chatHub;
// Get the user name.
$('#displayname').val('Chairman');
chat.client.differentName = function (name) {
// Prompts for different user name
// $('#displayname').val(prompt('Please enter different username:', ''));
chat.server.notify($('#displayname').val(), $.connection.hub.id);
};
chat.client.online = function (name) {
// Update list of users
if (name == $('#displayname').val())
$('#onlineList').append('<div class="border" style="color:red;"><img height="8px"src="assets/img/online.png" /> <strong>' + name + ' starts the meeting</strong></div>');
else {
$('#onlineList').append('<div class="border">' + name + '</div>');
$("#users").append('<img height="8px"src="assets/img/online.png" /> <option value="' + name + '">' + name + '</option>');
}
};
chat.client.enters = function (name) {
$('#chats').append('<div class="border"><i>' + name + ' Joined the Meeting</i></div>');
$("#users").append('<option value="' + name + '">' + name + '</option>');
$('#onlineList').append('<div class="border">' + name + '</div>');
};
// Create a function that the hub can call to broadcast chat messages.
chat.client.broadcastMessage = function (name, message) {
//Interpret smileys
message = message.replace(":)", "<img src=\"/emoticons/smile.png\" class=\"smileys\" />");
message = message.replace(";)", "<img src=\"/emoticons/wink.png\" class=\"smileys\" />");
message = message.replace(":D", "<img src=\"/emoticons/laugh.png\" class=\"smileys\" />");
//display the message
$('#chats').append('<div class="border" style="border-top:groove"><span style="color:blue">' + name + '</span>: ' + message + '</div>');
};
chat.client.disconnected = function (name) {
//Calls when someone leaves the page
$('#chats').append('<div class="border"><i>' + name + ' leaves the Meeting</i></div>');
$('#onlineList div').remove(":contains('" + name + "')");
$("#users option").remove(":contains('" + name + "')");
}
// Start the connection.
$.connection.hub.start().done(function () {
//Calls the notify method of the server
chat.server.notify($('#displayname').val(), $.connection.hub.id);
$('#sendmessage').click(function () {
if ($("#users").val() == "All") {
// Call the Send method on the hub.
chat.server.send($('#displayname').val(), $('#message').val());
}
else {
chat.server.sendToSpecific($('#displayname').val(), $('#message').val(), $("#users").val());
}
// Clear text box and reset focus for next comment.
$('#message').val('').focus();
});
});
});
</script>
<div style="margin-top: 10px">
<input type="hidden" id="displayname" />
<div style="height: 80%;">
<div id="chats" style="width: 80%; float: left;"></div>
<div id="onlineList" style="width: 19%; float: right; border-left: solid red 2px; height: 100%;">
<div style="font-size: 20px;background-color: cadetblue; border:double; color:white">Online Users</div>
</div>
</div>
<div style="float: left; height: 90%; top: 10%; position: relative;">
<textarea spellcheck="true" id="message" style="width: 625px; height: 80%"></textarea>
</div>
<div style="position: relative; top: 30%; float: left;">
<input type="button" id="sendmessage" value="Send" />
</div>
<div style="position: relative; top: 30%; float: left;">
<select id="users">
<option value="All">All</option>
</select>
</div>
</div>
chatHub class... my code is: chatHub类...我的代码是:
public class ChatHub : Hub
{
static ConcurrentDictionary<string, string> dic = new ConcurrentDictionary<string, string>();
public void Send(string name, string message)
{
// Call the broadcastMessage method to update clients.
Clients.All.broadcastMessage(name, message);
}
public void sendToSpecific(string name, string message, string to)
{
// Call the broadcastMessage method to update clients.
Clients.Caller.broadcastMessage(name, message);
Clients.Client(dic[to]).broadcastMessage(name, message);
}
public void Notify(string name, string id)
{
if (dic.ContainsKey(name))
{
Clients.Caller.differentName();
}
else
{
dic.TryAdd(name, id);
foreach (KeyValuePair<String, String> entry in dic)
{
Clients.Caller.online(entry.Key);
}
Clients.Others.enters(name);
}
}
public override Task OnDisconnected(bool stopCalled)
{
var name = dic.FirstOrDefault(x => x.Value == Context.ConnectionId.ToString());
string s;
dic.TryRemove(name.Key, out s);
return Clients.All.disconnected(name.Key);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.