我为实时仪表板创建了一个项目。它可以与jQuery 1.x版一起正常工作,所有客户端均按预期方式收到通知,但在Jquery 3.x版中不起作用,仅更新了1或2个客户端,但其他客户端未获得任何服务器通知以进行更新,我没有在任何浏览器(客户端)中找不到任何错误。我在我的应用程序中使用JQuery 3.x。
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>
在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);
});
}
答案 0 :(得分:0)
我在jquery 3.X中使用了signalR
在这里,我给我我的代码。希望它能帮助您解决问题。
在我的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类...我的代码是:
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);
}
}