websocket
Websocket借用了HTTP的协议来完成一部分握手，是一个持久化的协议，是相对于HTTP这种非持久(长连接，循环连接不算)的协议来说，更像是HTTP协议上的一种补充。Web Socket是一种HTML 5为Web定制的全双工通讯协议，没有“请求 - 响应”的概念，浏览器与服务器完全平等，连接一旦建立就一直开放，双方可随时向对方发送任意数据，没有推拉之分。
WebSocket在2011年被IETF定为标准RFC 6455，并被RFC 7936补充规范，WebSocket API被W3C定为标准。WebSocekt 是 HTML5 规范中的一部分，其借鉴了 socket 的思想，为 client 和 server 之间提供了类似的双向通信机制。同时，WebSocket 又是一种新的应用层协议，包含一套标准的 API；而 socket 并不是一个协议，而是一组接口，其主要方便大家直接使用更底层的协议（比如 TCP 或 UDP）
ws最大的优势：在于服务器和客户端可以在给定的时间范围内的任意时刻，相互推送信息，数据的传输使用帧来传递，并且允许跨域通信。
-
socket.io
网络应用中，两个应用程序同时需要向对方发送消息的能力（即全双工通信），所利用到的技术就是 socket，其能够提供端对端的通信。对于程序员而言，其需要在 A 端创建一个 socket 实例，并为这个实例提供其所要连接的 B 端的 IP 地址和端口号，而在 B 端创建另一个 socket 实例，并且绑定本地端口号来进行监听。当 A 和 B 建立连接后，双方就建立了一个端对端的 TCP 连接，从而可以进行双向通信。
目前主流的浏览器都支持WebSocket，并且有第三方的API：Guillermo Rauch创建了一个Socket.IO，遵循Engine.IO协议Engine.IO protocol。socket.io 底层是 engine.io，这个库实现了跨平台的双向通信,使用了 WebSocket 和 XMLHttprequest（或JSONP） 封装了一套自己的 Socket 协议，在低版本浏览器里面使用长轮询替代 WebSocket。一个完整的 Engine.IO Socket 包括多个 XHR 和 WebSocket 连接。
为了在每一种浏览器上支持实时通讯，Socket.IO 在运行中选择最佳的传输方式，而不影响API。支持的方式为：WebSocket, Adobe Flash Socket, AJAX long polling, AJAX multipart streaming, Forever Iframe, JSONP Polling。
// socket.io 流程 client request xhr ---->> server return { open: 0, sid, upgrades: [websocket/longpoll] } client start WebSocket -- ping probe -->> server return pong probe -->> stop longpoll -
websocket vs http
http WebSocket 单向通信，client请求 全双工双向通信 基于http，支持性好 新的协议，兼容http 简单，轻量，断线重连 较复杂，重连需额外部署 少几个属性 Upgrade: websocket / Connection: Upgrade / Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw== websocket与服务端进行握手，是通过http协议完成的，请求->响应，最为关键的请求报文字段Sec-WebSocket-Key， 它是一个Base64 encode的值，这个是浏览器随机生成的。服务端收到报文后，如果支持 WebSocket 协议，那么就会将自己的通信协议切换到 WebSocket，并且会返回Sec-WebSocket-Accept，这个则是经过服务端加密过后的 Sec-WebSocket-Key。
-
发送包类型：
- 0: open transport is opened(传输打开)
- 1: close
- 2: ping Send by client. Server should answer with a pong packet containing the same data
- 3: pong Sent by the server to respond to ping packets.
- 4: message actual message, client and server should call their callbacks with the data.(callback - 42, not - 41)
- 5: upgrade polling or websoket
- 6: noop 等待
-
数据成帧
WebSocket 使用了自定义的二进制分帧格式，把每个应用消息切分成一或多个帧，发送到目的地之后再组装起来，等到接收到完整的消息后再通知接收端。基本的成帧协议定义了帧类型有操作码、有效载荷的长度，指定位置的Extension data和Application data，统称为Payload data，保留了一些特殊位和操作码供后期扩展。在打开握手完成后，终端发送一个关闭帧之前的任何时间里，数据帧可能由客户端或服务器的任何一方发送。具体的帧格式如下所示：
-
FIN： 1 bit 。FIN是FINAL的缩写，它为1时表示一个数据传输结束。此位标示此帧是否是消息的最后帧，第一帧也可能是最后帧。
-
RSV1，RSV2，RSV3： 各1 bit 。必须是0，除非协商了扩展定义了非0的意义。
-
opcode：4 bit。表示被传输帧的类型：x0 表示一个后续帧；x1 表示一个文本帧；x2 表示一个二进制帧；x3-7 为以后的非控制帧保留；x8 表示一个连接关闭；x9 表示一个ping；xA 表示一个pong；xB-F 为以后的控制帧保留。同一个数据即使分片传输，它的每个数据帧的Opcode也应该相同。
-
Mask： 1 bit。表示净荷是否有掩码（只适用于客户端发送给服务器的消息）。
-
Payload length： 7 bit, 7 + 16 bit, 7 + 64 bit。 净荷长度由可变长度字段表示： 如果是 0~125，就是净荷长度；如果是 126，则接下来 2 字节表示的 16 位无符号整数才是这一帧的长度； 如果是 127，则接下来 8 字节表示的 64 位无符号整数才是这一帧的长度。
-
Masking-key：0或4 Byte。 用于给净荷加掩护，客户端到服务器标记。
-
Extension data： x Byte。默认为0 Byte，除非协商了扩展。
-
Application data： y Byte。 在”Extension data”之后，占据了帧的剩余部分。
-
Payload data： (x + y) Byte。”extension data” 后接 “application data”。
-
-
生成(封装)数据帧
待续…
-
解析数据帧
function decodeDataFrame(e) { var i = 0, j, s, frame = { //解析前两个字节的基本数据 FIN: e[i]>>7, Opcode: e[i++]&15, Mask: e[i]>>7, PayloadLength: e[i++]&0x7F }; //处理特殊长度126和127 if(frame.PayloadLength == 126) frame.length = (e[i++]<<8)+e[i++]; if(frame.PayloadLength==127) frame.length = (e[i++]<<24)+(e[i++]<<16)+(e[i++]<<8)+e[i++]; //判断是否使用掩码 if(frame.Mask){ //获取掩码实体 frame.MaskingKey = [e[i++],e[i++],e[i++],e[i++]]; //对数据和掩码做异或运算 for(j = 0, s = []; j < frame.PayloadLength; j++) s.push(e[i+j]^frame.MaskingKey[j%4]); } else { s = e.slice(i,frame.PayloadLength); //否则直接使用数据 } //数组转换成缓冲区来使用 s = new Buffer(s); //如果有必要则把缓冲区转换成字符串来使用 if(frame.Opcode == 1) s = s.toString(); //设置上数据部分 frame.PayloadData = s; //返回数据帧 return frame; }; function onmessage(e){ e = decodeDataFrame(e); //解析数据帧 console.log(e); //把数据帧输出到控制台 }; -
example:
client connects through new transport
client sends 2probe
server receives and sends 3probe
client receives and sends 5
server flushes and closes old transport and switches to new.