1. 程式人生 > >【整理】html5知識點5

【整理】html5知識點5

============================================HTML5 WebSocket


什麼是websocket


 WebSocket 協議是html5引入的一種新的協議,其目的在於實現了瀏覽器與伺服器全雙工通訊。看了上面連結的同學肯定對過去怎麼低效率高消耗(輪詢或comet)的做此事已經有所瞭解了,而在websocket API,瀏覽器和伺服器只需要要做一個握手的動作,然後,瀏覽器和伺服器之間就形成了一條快速通道。兩者之間就直接可以資料互相傳送。同時這麼做有兩個好處


1.通訊傳輸位元組減少:比起以前使用http傳輸資料,websocket傳輸的額外資訊很少,據百度說只有2k


2.伺服器可以主動向客戶端推送訊息,而不用客戶端去查詢


握手


 除了TCP連線的三次握手,websocket協議中客戶端與伺服器想建立連線需要一次額外的握手動作,在最新版的協議中是這個樣子的


客戶端向伺服器傳送請求


GET / HTTP/1.1
Upgrade: websocket
Connection: Upgrade
Host: 127.0.0.1:8080
Origin: http://test.com
Pragma: no-cache
Cache-Control: no-cache
Sec-WebSocket-Key: OtZtd55qBhJF2XLNDRgUMg==
Sec-WebSocket-Version: 13
Sec-WebSocket-Extensions: x-webkit-deflate-frame
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/31.0.1650.57 Safari/537.36
伺服器給出響應


HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: xsOSgr30aKL2GNZKNHKmeT1qYjA=


 在請求中的“Sec-WebSocket-Key”是隨機的,伺服器端會用這些資料來構造出一個SHA-1的資訊摘要。把“Sec-WebSocket-Key”加上一個魔幻字串“258EAFA5-E914-47DA-95CA-C5AB0DC85B11”。使用 SHA-1 加密,之後進行 BASE-64編碼,將結果做為 “Sec-WebSocket-Accept” 頭的值,返回給客戶端


websocket API


經過握手之後瀏覽器與伺服器建立連線,兩者就可以互相通訊了。websocket的API真心很簡單,看看 W3C 的定義


tring url, optional (DOMString or DOMString[]) protocols)]
interface WebSocket : EventTarget {
  readonly attribute DOMString url;


  // ready state
  const unsigned short CONNECTING = 0;
  const unsigned short OPEN = 1;
  const unsigned short CLOSING = 2;
  const unsigned short CLOSED = 3;
  readonly attribute unsigned short readyState;
  readonly attribute unsigned long bufferedAmount;


  // networking
           attribute EventHandler onopen;
           attribute EventHandler onerror;
           attribute EventHandler onclose;
  readonly attribute DOMString extensions;
  readonly attribute DOMString protocol;
  void close([Clamp] optional unsigned short code, optional DOMString reason);


  // messaging
           attribute EventHandler onmessage;
           attribute BinaryType binaryType;
  void send(DOMString data);
  void send(Blob data);
  void send(ArrayBuffer data);
  void send(ArrayBufferView data);
};


==================================================
建立websocket


ws=new WebSocket(address); //ws://127.0.0.1:8080
呼叫其建構函式,傳入地址,就可以建立一個websocket了,值得注意的是地址協議得是ws/wss


關閉socket


ws.close();
呼叫webservice例項的close()方法就可以關閉webservice,當然也可以傳入一個code和string說明為什麼關了


幾個回撥函式控制代碼


由於其非同步執行,回撥函式自然少不了,有四個重要的


onopen:連線建立後呼叫
onmessage:接收到伺服器訊息後呼叫
onerror:出錯時呼叫
onclose:關閉連線的時候呼叫
看名字就知道是幹什麼的了,每個回撥函式都會傳入一個Event物件,可以通過event.data訪問訊息


使用API


我們可以在建立socket成功後為其回撥函式賦值


ws=new WebSocket(address);
            ws.onopen=function(e){
                var msg=document.createElement('div');
                msg.style.color='#0f0';
                msg.innerHTML="Server > connection open.";
                msgContainer.appendChild(msg);
                ws.send('{<'+document.getElementById('name').value+'>}');
            };
 也可以通過事件繫結的方式


ws=new WebSocket(address);
            ws.addEventListener('open',function(e){
                var msg=document.createElement('div');
                msg.style.color='#0f0';
                msg.innerHTML="Server > connection open.";
                msgContainer.appendChild(msg);
                ws.send('{<'+document.getElementById('name').value+'>}');
            });
============================================================================
客戶端實現


其實客戶端的實現比較簡單,除了websocket相關的幾句就是一些自動focus、回車鍵事件處理、訊息框自動定位到底部等簡單功能,不一一說明了


【demo】已驗證
頁面
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript">
        var ws;
        function ToggleConnectionClicked() {
            try {
                var SOCKECT_ADDR = "ws://localhost:1818/chat";
                ws = new WebSocket(SOCKECT_ADDR);


                ws.onopen = function (event) { alert("已經與伺服器建立了連線\r\n當前連線狀態:" + this.readyState); };
                ws.onmessage = function (event) { alert("接收到伺服器傳送的資料:\r\n" + event.data); };
                ws.onclose = function (event) { alert("已經與伺服器斷開連線\r\n當前連線狀態:" + this.readyState); };
                ws.onerror = function (event) {alert("WebSocket異常!" + event.toString());};
            } catch (ex) {
                alert(ex.message);
            }
        };


        function SendData() {
            try {
                ws.send("success");
            } catch (ex) {
                alert(ex.message);
            }
        };


        function seestate() {
            alert(ws.readyState);
        }
       
    </script>
</head>
<body>
    <button id='ToggleConnection' type="button" onclick='ToggleConnectionClicked();'>
        連線伺服器</button><br />
    <br />
    <button id='ToggleConnection' type="button" onclick='SendData();'>
        傳送我的名字:beston</button><br />
    <br />
    <button id='ToggleConnection' type="button" onclick='seestate();'>
        檢視狀態</button><br />
    <br />
</body>
</html>


伺服器端控制檯程式
using System;
using System.Text;
using System.Net;
using System.Net.Sockets;
using System.Text.RegularExpressions;
using System.Security.Cryptography;


namespace WebSocketServer
{
    class Program
    {
        static void Main(string[] args)
        {
            int port = 1818;
            byte[] buffer = new byte[1024];


            IPEndPoint localEP = new IPEndPoint(IPAddress.Any, port);
            Socket listener = new Socket(localEP.Address.AddressFamily, SocketType.Stream, ProtocolType.Tcp);


            try
            {
                listener.Bind(localEP);
                listener.Listen(10);


                Console.WriteLine("等待客戶端連線....");
                Socket sc = listener.Accept();//接受一個連線
                Console.WriteLine("接受到了客戶端:" + sc.RemoteEndPoint.ToString() + "連線....");


                //握手
                int length = sc.Receive(buffer);//接受客戶端握手資訊
                sc.Send(PackHandShakeData(GetSecKeyAccetp(buffer, length)));
                Console.WriteLine("已經發送握手協議了....");


                //接受客戶端資料
                Console.WriteLine("等待客戶端資料....");
                length = sc.Receive(buffer);//接受客戶端資訊
                string clientMsg = AnalyticData(buffer, length);
                Console.WriteLine("接受到客戶端資料:" + clientMsg);


                //傳送資料
                string sendMsg = "您好," + clientMsg;
                Console.WriteLine("傳送資料:“" + sendMsg + "” 至客戶端....");
                sc.Send(PackData(sendMsg));


                Console.WriteLine("演示Over!");
                Console.Read();
            }
            catch (Exception e)
            {
                Console.WriteLine(e.ToString());
            }


        }


        /// <summary>
        /// 打包握手資訊
        /// </summary>
        /// <param name="secKeyAccept">Sec-WebSocket-Accept</param>
        /// <returns>資料包</returns>
        private static byte[] PackHandShakeData(string secKeyAccept)
        {
            var responseBuilder = new StringBuilder();
            responseBuilder.Append("HTTP/1.1 101 Switching Protocols" + Environment.NewLine);
            responseBuilder.Append("Upgrade: websocket" + Environment.NewLine);
            responseBuilder.Append("Connection: Upgrade" + Environment.NewLine);
            responseBuilder.Append("Sec-WebSocket-Accept: " + secKeyAccept + Environment.NewLine + Environment.NewLine);
            //如果把上一行換成下面兩行,才是thewebsocketprotocol-17協議,但居然握手不成功,目前仍沒弄明白!
            //responseBuilder.Append("Sec-WebSocket-Accept: " + secKeyAccept + Environment.NewLine);
            //responseBuilder.Append("Sec-WebSocket-Protocol: chat" + Environment.NewLine);


            return Encoding.UTF8.GetBytes(responseBuilder.ToString());
        }


        /// <summary>
        /// 生成Sec-WebSocket-Accept
        /// </summary>
        /// <param name="handShakeText">客戶端握手資訊</param>
        /// <returns>Sec-WebSocket-Accept</returns>
        private static string GetSecKeyAccetp(byte[] handShakeBytes, int bytesLength)
        {
            string handShakeText = Encoding.UTF8.GetString(handShakeBytes, 0, bytesLength);
            string key = string.Empty;
            Regex r = new Regex(@"Sec\-WebSocket\-Key:(.*?)\r\n");
            Match m = r.Match(handShakeText);
            if (m.Groups.Count != 0)
            {
                key = Regex.Replace(m.Value, @"Sec\-WebSocket\-Key:(.*?)\r\n", "$1").Trim();
            }
            byte[] encryptionString = SHA1.Create().ComputeHash(Encoding.ASCII.GetBytes(key + "258EAFA5-E914-47DA-95CA-C5AB0DC85B11"));
            return Convert.ToBase64String(encryptionString);
        }


        /// <summary>
        /// 解析客戶端資料包
        /// </summary>
        /// <param name="recBytes">伺服器接收的資料包</param>
        /// <param name="recByteLength">有效資料長度</param>
        /// <returns></returns>
        private static string AnalyticData(byte[] recBytes, int recByteLength)
        {
            if (recByteLength < 2) { return string.Empty; }


            bool fin = (recBytes[0] & 0x80) == 0x80; // 1bit,1表示最後一幀  
            if (!fin)
            {
                return string.Empty;// 超過一幀暫不處理 
            }


            bool mask_flag = (recBytes[1] & 0x80) == 0x80; // 是否包含掩碼  
            if (!mask_flag)
            {
                return string.Empty;// 不包含掩碼的暫不處理
            }


            int payload_len = recBytes[1] & 0x7F; // 資料長度  


            byte[] masks = new byte[4];
            byte[] payload_data;


            if (payload_len == 126)
            {
                Array.Copy(recBytes, 4, masks, 0, 4);
                payload_len = (UInt16)(recBytes[2] << 8 | recBytes[3]);
                payload_data = new byte[payload_len];
                Array.Copy(recBytes, 8, payload_data, 0, payload_len);


            }
            else if (payload_len == 127)
            {
                Array.Copy(recBytes, 10, masks, 0, 4);
                byte[] uInt64Bytes = new byte[8];
                for (int i = 0; i < 8; i++)
                {
                    uInt64Bytes[i] = recBytes[9 - i];
                }
                UInt64 len = BitConverter.ToUInt64(uInt64Bytes, 0);


                payload_data = new byte[len];
                for (UInt64 i = 0; i < len; i++)
                {
                    payload_data[i] = recBytes[i + 14];
                }
            }
            else
            {
                Array.Copy(recBytes, 2, masks, 0, 4);
                payload_data = new byte[payload_len];
                Array.Copy(recBytes, 6, payload_data, 0, payload_len);


            }


            for (var i = 0; i < payload_len; i++)
            {
                payload_data[i] = (byte)(payload_data[i] ^ masks[i % 4]);
            }


            return Encoding.UTF8.GetString(payload_data);
        }




        /// <summary>
        /// 打包伺服器資料
        /// </summary>
        /// <param name="message">資料</param>
        /// <returns>資料包</returns>
        private static byte[] PackData(string message)
        {
            byte[] contentBytes = null;
            byte[] temp = Encoding.UTF8.GetBytes(message);


            if (temp.Length < 126)
            {
                contentBytes = new byte[temp.Length + 2];
                contentBytes[0] = 0x81;
                contentBytes[1] = (byte)temp.Length;
                Array.Copy(temp, 0, contentBytes, 2, temp.Length);
            }
            else if (temp.Length < 0xFFFF)
            {
                contentBytes = new byte[temp.Length + 4];
                contentBytes[0] = 0x81;
                contentBytes[1] = 126;
                contentBytes[2] = (byte)(temp.Length & 0xFF);
                contentBytes[3] = (byte)(temp.Length >> 8 & 0xFF);
                Array.Copy(temp, 0, contentBytes, 4, temp.Length);
            }
            else
            {
                // 暫不處理超長內容  
            }


            return contentBytes;
        }
    }
}