Web Socket

WebSocket 作为 HTML5 一种新的协议，实现了浏览器和服务器双全工通信（full-duplex）。

• 连接协商和同源策略
• 与既有 HTTP 基础设施的互操作
• 基于消息的通信和高效消息分帧
• 子协议协商及可扩展能力

建立通信

WebSocket 通过构造函数创建一个 WebSocket 用于与服务器进行连接，返回一个 WebSocket 实例。通过这个实例监听事件，这些事件可以让我们知道什么时候建立连接，什么时候服务器发消息过来，什么时候发生了故障，什么时候关闭连接。

语法

WebSocket(url [, protocols])

• url：ws(wss)://ip:port/url （wss 是 WebSocketSource 缩写）
• protocols：可以使用的字协议包括 XMPP（可扩展息处理现场协议）、SOAP（简单对象访问协议）或者自定义协议

属性

连接状态

readyState 报告连接状态：

方法

Code 附录

示例

// 创建安全的WebSocket连接(wss)
const ws = new WebSocket('ws://github.websocket.org');

// 连接建立时调用
ws.addEventListener(
  'open',
  () => {
    // 向服务端发送消息
    this.send('TEST!');
  },
  false
);

// 接收服务端响应的消息
ws.addEventListener(
  'message',
  err => {
    console.log(e.data);
  },
  false
);

// 连接关闭时调用
ws.addEvenetListener(
  'close',
  err => {
    console.log('WebSocketClosed!');
  },
  false
);

// 连接错误时调用(并且会关闭连接)
ws.addEventListener(
  'error',
  err => {
    console.log('WebSocketError!');
  },
  false
);

ws.binaryType = 'blob';

ws.onmessage = function(e) {
  if (e.data instanceof Blob) {
    console.log('Blob', e.data);
    const b = new Blob(e.data);
  }
};

ws.binaryType = 'arraybuffer';

ws.onmessage = function(e) {
  if (e.data instanceof ArrayBuffer) {
    console.log('ArrayBuffer', e.data);
    const a = new Uint8Array(e.data);
  }
};

WebSocket 协议

WebSocket 协议有两部分：握手、数据传输。

握手请求

WebSocket 协议是为了浏览器实现与服务器的全双工通信和 HTTP 协议在浏览器端的广泛应用，因此 WebSocket 的握手是 HTTP 请求的升级。

建立 WebSocket 连接的请求头：

GET /chat HTTP/1.1
Host: server.example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw==
Sec-WebSocket-Protocol: chat, superchat
Sec-WebSocket-Version: 13
Origin: http://example.com

WebSocket 客户端将上述请求发送到服务器。如果是调用浏览器的 WebSocket API，浏览器会自动完成完成上述请求头。

相关类库

• react-websocket

兼容性

语法部分错误

// 兼容代码
const ws = window.WebSocket
  ? new window.WebSocket(url, protocol)
  : new window.MozWebSocket(url, protocol);

参考资料：

• WebSocket 浅析
• WebSocket 粗谈
• WebSocket 探秘
• React 加入 WebSocket