WebSocket (二）



在上一篇中简单介绍了WebSocket 的协议我，而这篇文章主要是介绍一下浏览器提供了API，以及如何在客户端通过 javascript 来调用 webSocket API ，而服务器端是要自己实现

WebSocket JavaScript 接口定义:

[Constructor(in DOMString url, optional in DOMString protocol)]interface WebSocket {  readonly attribute DOMString URL;   // ready state   const unsigned short CONNECTING = 0;   const unsigned short OPEN = 1;   const unsigned short CLOSED = 2;  readonly attribute unsigned short readyState;  readonly attribute unsigned long bufferedAmount;   // networking   attribute Function onopen;   attribute Function onmessage;   attribute Function onclose;   boolean send(in DOMString data);   void close();}; WebSocket implements EventTarget;

简单了解下接口方法和属性：

readyState表示连接有四种状态：CONNECTING (0)：表示还没建立连接；OPEN (1)： 已经建立连接，可以进行通讯；CLOSING (2)：通过关闭握手，正在关闭连接；CLOSED (3)：连接已经关闭或无法打开； url是代表 WebSocket 服务器的网络地址，协议通常是”ws”或“wss(加密通信)”,send 方法就是发送数据到服务器端；close 方法就是关闭连接； onopen连接建立，即握手成功触发的事件； onmessage收到服务器消息时触发的事件； onerror异常触发的事件； onclose关闭连接触发的事件；

JavaScript调用浏览器接口实例如下：

var wsServer = 'ws://192.168.1.107:8181/Demo'; //服务器地址var websocket = new WebSocket(wsServer); //创建WebSocket对象websocket.send("hello");//向服务器发送消息alert(websocket.readyState);//查看websocket当前状态websocket.onopen = function (evt) {//已经建立连接};websocket.onclose = function (evt) {//已经关闭连接};websocket.onmessage = function (evt){//收到服务器消息，使用evt.data提取};websocket.onerror = function (evt) {//产生异常};

握手协议的客户端数据已经由浏览器代劳了，服务器端需要我们自己来实现，目前市场上开源的实现也比较多如
 Kaazing WebSocket Gateway(一个 Java 实现的 WebSocket Server)；
 mod_pywebsocket(一个 Python 实现的 WebSocket Server)；
 Netty(一个 Java 实现的网络框架其中包括了对 WebSocket 的支持)；
 node.js(一个 Server 端的 JavaScript 框架提供了对 WebSocket 的支持)；
 WebSocket4Net(一个.net的服务器端实现)；

其实在目前的.net4.5框架中已经实现了WebSocket，不用官方实现，我们自己来写个简单的。服务器端需要根据协议来握手、接收和发送。
客户端发到服务器的内容:

GET /chat HTTP/1.1Host: server.example.comUpgrade: websocketConnection: UpgradeSec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==Origin: http://example.comSec-WebSocket-Protocol: chat, superchatSec-WebSocket-Version: 13

从服务器到客户端的内容:

HTTP/1.1 101 Switching ProtocolsUpgrade: websocketConnection: UpgradeSec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo=Sec-WebSocket-Protocol: chat

/// <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);}

如果握手成功，将会触发客户端的onopen事件。

解析接收的客户端信息

接收到客户端数据解析规则如下：
 1byte
 1bit: frame-fin，x0表示该message后续还有frame；x1表示是message的最后一个frame

 3bit: 分别是frame-rsv1、frame-rsv2和frame-rsv3，通常都是x0

 4bit: frame-opcode，x0表示是延续frame；x1表示文本frame；x2表示二进制frame；x3-7保留
 给非控制frame；x8表示关 闭连接；x9表示ping；xA表示pong；xB-F保留给控制frame

 2byte
 1bit: Mask，1表示该frame包含掩码；0，表示无掩码

 7bit、7bit+2byte、7bit+8byte: 7bit取整数值，若在0-125之间，则是负载数据长度；若是126表示，后两个byte取无符号16位整数值，是负载长度；127表示后8个 byte，取64位无符号整数值，是负载长度

 3-6byte: 这里假定负载长度在0-125之间，并且Mask为1，则这4个byte是掩码

 7-end byte: 长度是上面取出的负载长度，包括扩展数据和应用数据两部分，通常没有扩展数据；若Mask为1，则此数据需要解码，解码规则为1-4byte掩码循环和数据byte做异或操作。

解析代码如下，但没有处理多帧和不包含掩码的包：

/// <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);}

发送数据至客户端

服务器发送的数据以0x81开头，紧接发送内容的长度（若长度在0-125，则1个byte表示长度；若长度不超过0xFFFF，则后2个byte 作为无符号16位整数表示长度；若超过0xFFFF，则后8个byte作为无符号64位整数表示长度），最后是内容的byte数组。

/// <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;}