利用WebSocket传输数组或者Blob的方案

最近在利用Html5的WebSocket进行即时通讯，一点小心得，大家一起讨论吧

首先把WebSocket的协议网址和WebSocket API网址给大家：

协议：http://tools.ietf.org/html/draft-ietf-hybi-thewebsocketprotocol-17#page-30

API：http://www.w3.org/TR/2012/CR-websockets-20120920/#dom-websocket-send

首先要了解一下WebSocket的原理：

上图表示的是已经建立WS连接的WebSocket通信。如图可见单纯从服务器端来讲，WS的服务器端实际上就一个传统Socket通信，假如你要模拟即时通讯，那就把文本转换为二进制流；假如传输图像，就把Blob转换为二进制流；假如传输数值型数组就把数组转换为字节数组。本研究中是实现大规模地形数据的传输，地形网格其本质就一个n*n的矩形数组，根据博文http://www.cnblogs.com/fengyunlishi/archive/2013/05/09/3070142.html，可以晓得。显然把地形数据转换成文本字符串是极为不合理的(因为这不仅仅涉及到文本压缩，还要考虑客户端还要把文本数据再处理成数值数组哦)。

对于大规模数据的传输，有两种方案：

（1）将整型数组根据某个分隔符连接成字符串，之后将字符串转换为字节数组，但是要记住哦：分隔符的数量几乎与整型数组长度相等哦，最终数据量变成了原来的2倍大小。

（2）将整型数组直接转换为字节数组，一个Int16型的整数无论大小，转换为字节数组后，长度为一常量：2，易于编程实现。

意义太明显，哈哈，所以本文采用将数值型数组转换为字节数组。

代码如下：

UInt16[] int16Array = new UInt16[3] { 0, 258, 1 };

 MemoryStream int16mem = new MemoryStream();

 BinaryWriter int16byteWR = new BinaryWriter(int16mem);

 foreach (Int16 hehe in int16Array)

 {

     int16byteWR.Write(hehe);

 }

Byte[]   _content = int16mem.ToArray();………… 略

关键点一：你如何决定WS服务器端传输什么类型的数据呢？

通过WebSocket的数据帧结构图（网上有很多介绍WebSocket数据帧结构的博客），可以了解WebSocket的数据传输格式是在Opcode位中设计的：

Opcode：4bit，定义有效负载数据，如果收到了一个未知的操作码，连接也必须断掉，以下是定义的操作码：

x0表示连续消息片断

x1表示文本消息片断//表示传输文本型数据

x2表未二进制消息片断//表示传输Blob以及二进制数据

x3-7为将来非控制消息片断保留地操作码

x8表示连接关闭

x9表示心跳检查的ping

xA表示心跳检查的pong

xB-F为将来控制消息片断的保留地操作码

本文把Opcode设置为x2.

关键点二：

第二个关键在于WebSocket的js客户端接收，代码如下：

var ws;  ws = new WebSocket("ws://localhost:8989/test");

ws.onopen = WSonOpen; ws.onmessage = WSonMessage;

ws.onclose = WSonClose; ws.onerror = WSonError;……

function WSonOpen() {          

  ws.binaryType = 'arraybuffer';//可将 WebSocket 对象的 binaryType 属性设为“blob”或“arraybuffer”。默认格式为“blob”（您不必在发送时校正 binaryType 参数）。

     };

function WSonMessage(event) {

  var result = new Int16Array(event.data);

    for (var i = 0; i < result.length; i++) {

         alert(result [i]);

      }

};

 

OK了，大功告成，程序中result就是传过来的数值型数组。