webSocket實現web及時聊天的例子

概述

websocket目前雖然沒法普及應用，將來是什麼樣子，咱們不得而知，但如今開始學習應用它，只有好處沒有壞處，本隨筆的WebSocket是版本13（RFC6455)協議的實現，也是目前websocket的最新協議，協議的英文文檔能夠查看http://tools.ietf.org/html/rfc6455，中文翻譯的文檔能夠查看http://blog.csdn.net/stoneson/article/details/8063802，下面是聊天的截圖例子（很粗糙，但應該不影響）。

客戶端的實現

在支持webSocket的瀏覽器下，調用 new window.WebSocket(url)就返回了websocket對象，此對象有onopen、onmessage、onclose三個經常使用事件，分別表示鏈接成功、收到消息、鏈接斷開，發送消息（文件或二進制數據）的方法是send。

           var inc = document.getElementById('incomming');
            var form = document.getElementById('sendForm');
            var input = document.getElementById('sendText');

            inc.innerHTML += "正在鏈接到服務器 ..<br/>";
            var wsImpl = window.WebSocket || window.MozWebSocket;
            var ws = new wsImpl('ws://localhost:8181/');

            ws.onopen = function () {
                inc.innerHTML += '鏈接成功<br/>';
            };

            ws.onmessage = function (evt) {
                inc.innerHTML += evt.data + '<br/>';
            };

            ws.onclose = function () {
                inc.innerHTML += '鏈接已斷開<br/>';
            }

            form.addEventListener('submit', function (e) {
                e.preventDefault();
                var val = input.value;
                ws.send(val);
                input.value = "";
            });

 

服務器的實現

服務器使用NetworkSocket組件的WebSocketServerBase來實現，過程當中只要關心業務的實現就能夠了，底層的代碼，若是你感興趣，點擊連接進去就能夠下載和查看。}

    public class Server : WebSocketServerBase
    {
        /// <summary>
        /// 收到文本請求時出發
        /// </summary>
        /// <param name="client">客戶端</param>
        /// <param name="text">內容</param>
        protected override void OnText(SocketAsync<Hybi13Packet> client, string text)
        {
            // 回覆內容
            this.SendText(client, "->" + text);

            // 轉發給其它客戶端
            var others = this.AliveClients.Except(new[] { client });
            foreach (var item in others)
            {
                this.SendText(item, client.ToString() + "->" + text);
            }

            // ping此客戶端，記錄ping的時間
            client.TagBag.PingTime = DateTime.Now;
            this.SendPing(client, null);
        }

        protected override void OnBinary(SocketAsync<Hybi13Packet> client, byte[] bytes)
        {
            this.SendBinary(client, bytes);
        }

        // ping回覆
        protected override void OnPong(SocketAsync<Hybi13Packet> client, byte[] bytes)
        {
            var timeSpan = DateTime.Now.Subtract((DateTime)client.TagBag.PingTime);
            Console.WriteLine("ping {0} 用時:{1}ms", client, timeSpan.TotalMilliseconds);
        }

        protected override bool CheckHandshake(SocketAsync<Hybi13Packet> client, HandshakeRequest request)
        {
            Console.WriteLine("{0}進行握手完成", client);
            return base.CheckHandshake(client, request);
        }

        protected override void OnConnect(SocketAsync<Hybi13Packet> client)
        {
            Console.WriteLine("客戶鏈接進來，當前鏈接數：{0}", this.AliveClients.Count);
        }

        protected override void OnDisconnect(SocketAsync<Hybi13Packet> client)
        {
            Console.WriteLine("{0}斷開鏈接，當前鏈接數：{1}", client, this.AliveClients.Count);
        }
    }

 

下載源碼

全部相關代碼