WebSocket

WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。

协议

请求

示例

GET / HTTP/1.1
Connection:Upgrade
Host:127.0.0.1:8088
Origin:null
Sec-WebSocket-Extensions:x-webkit-deflate-frame
Sec-WebSocket-Key:puVOuWb7rel6z2AVZBKnfw==
Sec-WebSocket-Version:13
Upgrade:websocket

解释

Connection:Upgrade
表示要升级协议
Upgrade:websocket
升级到websocket协议
Sec-WebSocket-Version:13
表示websocket的版本。如果服务端不支持该版本，需要返回一个Sec-WebSocket-Versionheader，里面包含服务端支持的版本号。
Sec-WebSocket-Key
与后面服务端响应首部的Sec-WebSocket-Accept是配套的，提供基本的防护，比如恶意的连接，或者无意的连接。

响应

示例

HTTP/1.1 101 Switching Protocols
Connection:Upgrade
Server:beetle websocket server
Upgrade:WebSocket
Date:Mon, 26 Nov 2012 23:42:44 GMT
Access-Control-Allow-Credentials:true
Access-Control-Allow-Headers:content-type
Sec-WebSocket-Accept:FCKgUr8c7OsDsLFeJTWrJw6WO8Q=

解释

Sec-WebSocket-Accept
根据客户端Sec-WebSocket-Key计算出来，公式：toBase64( sha1(Sec-WebSocket-Key+258EAFA5-E914-47DA-95CA-C5AB0DC85B11))

数据格式

FIN              1bit 表示信息的最后一帧，flag，也就是标记符
RSV 1-3        1bit each 以后备用的 默认都为 0
Opcode         4bit 帧类型，
Mask              1bit 掩码，是否加密数据，默认必须置为1 
Payload len   7bit 数据的长度，当这个7 bit的数据 == 126 时，后面的2 个字节也是表示数     据长度，当它 == 127 时，后面的 8 个字节表示数据长度
Masking-key      1 or 4 bit 掩码
Payload data  playload len  bytes 数据

WebAPI

构造函数

Socket(url,[protocols])

常量

Constant	Value
WebSocket.CONNECTING	0
WebSocket.OPEN	1
WebSocket.CLOSING	2
WebSocket.CLOSED	3

属性

WebSocket.binaryType
使用二进制的数据类型连接
WebSocket.bufferedAmount （只读）
未发送至服务器的字节数，调用send后还没有发出的UTF-8文本字节数
WebSocket.extensions (只读)
服务器选择的扩展
WebSocket.onerror
用于指定连接失败后的回调函数
WebSocket.onmessage
用于指定当从服务器接受到信息时的回调函数
WebSocket.onopen
用于指定连接成功后的回调函数
WebSocket.protocol(只读)
服务器选择的下属协议
WebSocket.readState(只读)
当前连接状态
WebSocket.url(只读）
WebSocket 的绝对路径

方法

WebSocket.close([code[,reason]])
关闭当前连接
WebSocket.send(data)
对要传输的数据进行排队

事件

close
error
message
open

示例

// Create WebSocket connection.
const socket = new WebSocket('ws://localhost:8080');

// Connection opened
socket.addEventListener('open', function (event) {
    socket.send('Hello Server!');
});

// Listen for messages
socket.addEventListener('message', function (event) {
    console.log('Message from server ', event.data);
});