WebSocket(叁) 生成数据帧

原文地址：https://www.web-tinker.com/article/20307.html

昨天的文章中介绍了WebSocket数据帧的结构和解析。其实对从服务器发送往客户端的数据也是同样的数据帧。但因此觉得这看似和解析数据帧一样简单那就错了。我们需要自己去生成数据帧。而且会遇上和解析时候不同的问题，比如数据帧分片传输的情况。
　　从服务器发送到客户端的数组帧不需要掩码，这是非常值得庆幸的地方。于是要写出一个生成数据帧的函数并不难

[javascript] view plain copy

 

1. //NodeJS  
2. function encodeDataFrame(e){  
3.   var s=[],o=new Buffer(e.PayloadData),l=o.length;  
4.   //输入第一个字节  
5.   s.push((e.FIN<<7)+e.Opcode);  
6.   //输入第二个字节，判断它的长度并放入相应的后续长度消息  
7.   //永远不使用掩码  
8.   if(l<126)s.push(l);  
9.   else if(l<0x10000)s.push(126,(l&0xFF00)>>8,l&0xFF);  
10.   else s.push(  
11.     127, 0,0,0,0, //8字节数据，前4字节一般没用留空  
12.     (l&0xFF000000)>>24,(l&0xFF0000)>>16,(l&0xFF00)>>8,l&0xFF  
13.   );  
14.   //返回头部分和数据部分的合并缓冲区  
15.   return Buffer.concat([new Buffer(s),o]);  
16. };  

可以把它用于一个实例中

[javascript] view plain copy

 

1. //客户端程序  
2. var ws=new WebSocket("ws://127.0.0.1:8000/");  
3. ws.onmessage=function(e){  
4.   console.log(e);  
5. };  

[javascript] view plain copy

 

1. //服务器程序  
2. var crypto=require('crypto');  
3. var WS='258EAFA5-E914-47DA-95CA-C5AB0DC85B11';  
4.   
5. require('net').createServer(function(o){  
6.   var key;  
7.   o.on('data',function(e){  
8.     if(!key){  
9.       //握手  
10.       key=e.toString().match(/Sec-WebSocket-Key: (.+)/)[1];  
11.       key=crypto.createHash('sha1').update(key+WS).digest('base64');  
12.       o.write('HTTP/1.1 101 Switching Protocols\r\n');  
13.       o.write('Upgrade: websocket\r\n');  
14.       o.write('Connection: Upgrade\r\n');  
15.       o.write('Sec-WebSocket-Accept: '+key+'\r\n');  
16.       o.write('\r\n');  
17.       //握手成功后给客户端发送个数据  
18.       o.write(encodeDataFrame({  
19.         FIN:1,Opcode:1,PayloadData:"次碳酸钴"  
20.       }));  
21.     };  
22.   });  
23. }).listen(8000);  

上面是最基本的用法。但是有时候数据需要分成多个数据包来发送，这就需要用到分片，也就是使用多个数据帧来传输一个数据。分片传输分为三个部分：
　　　　开始帧：FIN=0,Opcode>0;一个
　　　　传输帧：FIN=0,Opcode=0;零个或多个
　　　　终止帧：FIN=1,Opcode=0;一个
　　FIN是FINAL的缩写，它为1时表示一个数据传输结束，而开始和传输帧的时候数据都没结束，所以是0，之后最后的结束帧FIN是1。同一个数据即使分片传输，它的每个数据帧的Opcode也应该相同，为了避免冲突，只对分片传输的开始帧设置Opcode，传输帧和结束帧的Opcode留0。因此把上面实例的部分代码改成

[javascript] view plain copy

 

1. //握手成功后给客户端发送个数据  
2.       o.write(encodeDataFrame({  
3.         FIN:0,Opcode:1,PayloadData:"ABC"  
4.       }));  
5.       o.write(encodeDataFrame({  
6.         FIN:0,Opcode:0,PayloadData:"-DEF-"  
7.       }));  
8.       o.write(encodeDataFrame({  
9.         FIN:1,Opcode:0,PayloadData:"GHI"  
10.       }));  

就可以在客户端得到

这就是分片传输的关键所在。