消息推送SignalR簡單實例

時間 2019-11-20

標籤消息推送 signalr 簡單實例简体版

原文原文鏈接

消息推送SignalR：一個ASP .NET 下的類庫，能夠在ASP .NET 的Web項目中實現實時通訊。 javascript

功能：當所鏈接的客戶端變得可用時服務器代碼能夠當即向其推送內容，而不是讓服務器等待客戶端請求新的數據。 html

可參考：http://www.cnblogs.com/ssk-bak/p/5799976.html java

前臺關鍵之處： jquery

1首先獲取客戶端頁面的名字； web

2而後經過 $.connection.chat 創建對應服務器端 Hub 類的代理對象 chat；服務器

3服務器經過 dynamic 方式調用客戶端的該方法以實現推送功能。在這裏每當收到服務器推送來的消息，就在客戶端頁面的 discussion 列表追加該消息。併發

4當點擊發送全部用戶按鈕時，客戶端經過代理對象調用服務器端的 send 方法以實現向服務器發送消息。當點擊發送給指定用戶按鈕，並填寫在線的用戶時，客戶端經過代理對象調用服務器端的 send 方法以實現向服務器發送消息給指定用戶，可同時開啓兩個窗口測試。 app

5經過 $.connection.hub.start(); 語句打開連接。函數

實現代碼：測試

後臺：

1.先登陸，登陸後用戶名會記錄在一個Dictionary容器中：

        /// <summary>
        /// 用戶的connectionID與用戶名對照表
        /// </summary>
        private readonly static Dictionary<string, string> UserDictionary = new Dictionary<string, string>();
        /// <summary>
        /// 用戶上線函數
        /// </summary>
        /// <param name="name"></param>
        public void sendLogin(string name)
        {
            if (!UserDictionary.Keys.Contains(name))
            {
                //這裏即是將用戶名和鏈接ID存入
                UserDictionary.Add(name, Context.ConnectionId);
            }
            else
            {
                //每次登錄id會發生變化
                UserDictionary[name] = Context.ConnectionId;
            }
        }

2.將信息發送給全部用戶或指定用戶：

        //發送信息到指定用戶
        public void Send(string fromName, string toName, string message)
        {
            if (UserDictionary[toName] != null)
            {
                Clients.Client(UserDictionary[toName]).broadcastMessage(fromName, message);
            }
        }
        //廣播全部信息
        public void Send(string name, string message)
        {
            Clients.All.broadcastMessage(name, message);
        }

前臺：

<body>
    <div class="container">
        當前用戶：<input type="text" id="displayname" hidden="hidden" /><label id="uName"></label>
        <br /><br />
        發送消息：<input type="text" id="message" />
        <input type="button" id="sendmessage" value="發送給全部用戶" />  
        <input type="text" id="toUser" name="toUser" />
        <input type="button" id="sendTouser" value="發送給指定用戶" />
        <br />
        <div>
            接收信息：
        </div>
        <ul id="discussion"></ul>
    </div>
    
    <script src="Scripts/jquery-1.6.4.min.js"></script>
    <script src="Scripts/jquery.signalR-2.2.1.min.js"></script>
    <script src="signalr/hubs"></script>
    
    <script type="text/javascript">
        $(function () {
            //啓用日誌記錄
            $.connection.hub.logging = true;
            // Declare a proxy to reference the hub.
            var chat = $.connection.chatHub;
            // 建立回調函數
            chat.client.broadcastMessage = function (name, message) {
                // 顯示namemessage.
                var encodedName = $('<div />').text(name).html();
                var encodedMsg = $('<div />').text(message).html();
                //在頁面中顯示
                $('#discussion').append('<li><strong>' + encodedName + '</strong>:  ' + encodedMsg + '</li>');
            };

            // 頁面開始時輸入用戶名，保存來顯示該用戶相關信息(實際用戶登入系統是自動設置)
            $('#displayname').val(prompt('輸入用戶名:', ''));
            document.getElementById("uName").innerHTML = $('#displayname').val();
            // 將初始焦點設置爲消息輸入框。
            $('#message').focus();

            //開啓客戶端（web）與服務器端鏈接
            $.connection.hub.start().done(function () {
                var username = $('#displayname').val();
                chat.server.sendLogin(username);
                $('#sendmessage').click(function () {
                    // 調用發送方法,發送給全部用戶
                    chat.server.send($('#displayname').val(), $('#message').val());
                    $('#message').val('').focus();
                });
                $('#sendTouser').click(function () {
                    // 調用發送方法,發送給指定用戶
                    var touser = $('#toUser').val();
                    chat.server.send(username, touser, $('#message').val());
                });
            });
        });
    </script>
</body>

效果圖:

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。