WebSocket--实时通讯（1）

前言

在WebSocket之前，开发者完成实时通讯大抵都是求助一些‘hacks’来实现实时通讯。最流行的一种方式是长轮询 。 长轮询主要是发出一个HTTP请求到服务器，然后保持连接打开以允许服务器在稍后的时间响应（由服务器确定）。可想而知，这是很浪费资源的。

WebSocket

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

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

API

var ws = new WebSocket('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端口。

参考文献：

Google
掘金