文章出處

回到目錄

上一回寫消息組件已經是很久之前的事了,這一次準備把消息組件后續的東西說一下,事實上,第一篇文章主要講的是發消息,而這一講最要講的是收消息,簡單的說,就是消息到了服務器之后,如何從服務器實時的發到指定客戶端,當然,你可以使用JS的輪詢,但由于種種原因,它并不被我推薦,呵呵.

準備知識:

SignalR實現服務器與客戶端的實時通信

WebSocket的介紹

NodeJS系列~第一個小例子,實現了request.querystring功能

干實事

當客戶端與服務器建立一個connection后,通過websocket技術,可以告訴服務器你的連接ID,這時,當然服務器檢查到有你的消息時,直接為你的connectionID去發請求,調你的客戶端方法,實現消息的顯示就可以了,呵呵.這一切來的是那么容易,事實上,它內容的技術遠不指這些,如果我們自己開發websocket,那除非你是個協議高手+JS高手,否則沒戲!所有,我們就只好用人家寫好的東西了,而微軟的SignalR就是這樣一個東西,當你的瀏覽器支持html5時,它會與websocket方式進行與服務器端的通訊,不支持HTML5,它與會使用其它手段來實現這個通訊的目的.

下面我復制之前寫過的signalR文章中的部分代碼:

第一 首先是服務器需要發布一個URI,來讓客戶端去訪問

  [HubName("MessagePush ")]
    public class MessagePush : Hub
    {
    //實現消息推送的邏輯
  }

第二 一個集合,用來存儲正處于登陸的用戶,對于持久化的方式你可以使用內存,nosql等技術,這里沒有所謂,呵呵,它是一個服務器端的方法,可以被客戶端JS去調用

 static List<CurrentUser> ConnectedUsers = new List<CurrentUser>();
        public void Connect(string url)
        {
            var id = Context.ConnectionId;
            var userID = (HttpContext.Current.Session == null ? "" : HttpContext.Current.Session["UserID"] ?? "").ToString();
            if (ConnectedUsers.Count(x => x.ConnectionId == id) == 0)
            {
                ConnectedUsers.Add(new CurrentUser
                {
                    ConnectionId = id,
                    UserID = userID,
                });
                Clients.Caller.onConnected(id, userID, url);
               Clients.Client(id).onNewUserConnected(id, userID);
            }          
        }

第三 服務器調用客戶端的方法

  Clients.AllExcept(id).onNewUserConnected(id, userID); //向所有客戶端推送,除了自己之外
  Clients.Client(id).onNewUserConnected(id, userID);//向自己去推送
  Clients.All.onNewUserConnected(id, userID);//向所有客戶端推送

第四 客戶端代碼,JS方法

   <!--Reference the SignalR library. -->
    <script src="/Scripts/jquery.signalR-1.0.0.js"></script>
    <!--Reference the autogenerated SignalR hub script. -->
    <script src="/signalr/hubs"></script>

    <script type="text/javascript">
        $(function () {
            // Declare a proxy to reference the hub
            var chatHub = $.connection.MessagePush;
            registerClientMethods(chatHub);
            // Start Hub
            $.connection.hub.start().done(function () {
                registerEvents(chatHub);
            });

        });

        //注冊客戶端事件
        function registerEvents(chatHub) {
            $("#btn").click(function () {
               chatHub.server.connect(url);
            });
  
        }

        //注冊客戶端方法
        function registerClientMethods(chatHub) {

              
            chatHub.client.onNewUserConnected = function (id, userID) {
                alert("新用戶完成為合法");
            }

        
        }

    </script>

第五 測試http://localhost:8080/MessagePush

第六 總結:事實上,實現的過程很簡單,首先客戶端通過登陸告訴服務器我來了,然后用戶向服務端發消息,告訴服務器我要給某某某發消息了,其次,服務器收到消息之后,進行分發消息,由于用戶登陸后已經在服務器上登記了,所以,很容易的找到了"消息的接受者",最后,服務端調用指定客戶端的JS方法,去顯示和提醒用戶:您老人家有新消息了,呵呵!

回到目錄

 


文章列表




Avast logo

Avast 防毒軟體已檢查此封電子郵件的病毒。
www.avast.com


全站熱搜
創作者介紹
創作者 大師兄 的頭像
大師兄

IT工程師數位筆記本

大師兄 發表在 痞客邦 留言(0) 人氣()