通讯（3）（websocket）

WebSocket

它实现了浏览器与服务器全双工通信(full-duplex)，可以传输基于消息的文本和二进制数据。WebSocket简单的API背后隐藏了很多复杂性。他还提供了更多的服务：

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

API

var ws = new WebSocket('[wss://xxxxxxxxx'](https://link.jianshu.com?t=wss://xxxxxxxxx'))
// 建立连接
ws.onerror = function () { // do something }
// 错误调用
ws.onclose = function () { ... }
// 关闭时调用
ws.onopen = function () {
// 连接建立时调用
ws.send("Connection established. Hello server!");
> // 向服务端发送消息
}

接受数据与发送数据

处理数据

ws.onmessage = function(msg) {
  // 接收服务端发送的消息
  if(msg.data instanceof Blob) {
  // 处理二进制信息
    processBlob(msg.data);
  } else {
    processText(msg.data);
    // 处理文本信息
  }
}

应用只需监听onmessage事件，用回调处理返回数据即可。 WebSocket支持文本和二进制数据传输，浏览器如果接收到文本数据，会将其转换为DOMString 对象，如果是二进制数据或Blob 对象，可直接将其转交给应用或将其转化为ArrayBuffer，由应用对其进行进一步处理。
详细处理：

wss.onmessage = function(msg) {
  if (msg.data instanceof ArrayBuffer) {
    processArrayBuffer(msg.data);
  } else {
    processText(msg.data);
  }
}

发送

ws.onopen = function () {
  socket.send("Hello server!");
  socket.send(JSON.stringify({'msg': 'payload'}));
  var buffer = new ArrayBuffer(128);
  socket.send(buffer);
  var intview = new Uint32Array(buffer);             
  socket.send(intview);
  var blob = new Blob([buffer]);
  socket.send(blob);
}

名称解释：
Blob
ArrBuffer

Blob 对象是包含有只读原始数据的类文件对象，可存储二进制数据，它会被写入磁盘；ArrayBuffer （缓冲数组）是一种用于呈现通用、固定长度的二进制数据的类型，作为内存区域可以存放多种类型的数据。
对于将要传输的二进制数据，开发者可以决定以何种方式处理，可以更好的处理数据流，Blob 对象一般用来表示一个不可变文件对象或原始数据，如果你不需要修改它或者不需要把它切分成更小的块，那这种格式是理想的；如果你还需要再处理接收到的二进制数据，那么选择ArrayBuffer 应该更合适。

ws
wss

WebSocket 资源URI采用了自定义模式：ws 表示纯文本通信（ 如ws://example.com/socket），wss 表示使用加密信道通信（TCP+TLS）。为什么不使用http而要自定义呢？
WebSocket 的主要目的，是在浏览器中的应用与服务器之间提供优化的、双向通信机制。可是，WebSocket 的连接协议也可以用于浏览器之外的场景，可以通过非HTTP协商机制交换数据。

• ws协议：普通请求，占用与http相同的80端口
• wss协议：基于SSL的安全传输，占用与tls相同的443端口。