c# - SignalR 在 JQuery 3.x 中无法正常工作

Question

我为实时仪表板创建了一个项目。它在 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);

  });

}

Answer 1

我在 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);
    }
}