WebSocket

一、背景与定义

背景

HTTP 协议有一个缺陷：通信只能由客户端向服务器发出请求，服务器返回查询结果。做不到服务器主动向客户端推送信息。这种单向请求的特点，如果服务器有连续的状态变化，客户端要获知就非常麻烦。我们只能使用Ajax轮询：每隔一段时候，就发出一个询问，了解服务器有没有新的信息。轮询的效率低，非常浪费资源（因为必须不停连接，或者 HTTP 连接始终打开）。

提出

WebSocket 它的最大特点就是，服务端可以主动推送信息给客户端，解决了轮询造成的同步延迟问题。由于 WebSocket 只需要一次 HTTP 握手，服务端就能一直与客户端保持通信，直到关闭连接，这样就解决了服务器需要反复解析 HTTP 协议，减少了资源的开销。

为了建立一个 WebSocket 连接，客户端浏览器首先要向服务器发起一个 HTTP 请求，这个请求和通常的 HTTP 请求不同，包含了一些附加头信息，其中附加头信息"Upgrade: WebSocket"表明这是一个申请协议升级的 HTTP 请求，服务器端解析这些附加的头信息然后产生应答信息返回给客户端，客户端和服务器端的 WebSocket 连接就建立起来了，双方就可以通过这个连接通道自由的传递信息，并且这个连接会持续存在直到客户端或者服务器端的某一方主动的关闭连接。

定义

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

解释
数据通信的三种方式：
1.单工通信
只有一个方向的通信而没有反方向的交互，仅需要一条信道。如：广播
2.半双工通信（双向交替通信）
通信双方都可以发送或接受消息，但任何一方都不能同时发送和接收。需要两条信道。如：对讲机
3.全双工通信（双向同时通信）
通信双方可以同时发送和接收消息，也需要两条信道。如：打电话。

特点

（1）建立在 TCP 协议之上，服务器端的实现比较容易。
（2）与 HTTP 协议有着良好的兼容性。默认端口也是80和443，并且握手阶段采用 HTTP 协议，因此握手时不容易屏蔽，能通过各种 HTTP 代理服务器。
（3）数据格式比较轻量，性能开销小，通信高效。
（4）可以发送文本，也可以发送二进制数据。
（5）没有同源限制，客户端可以与任意服务器通信。
（6）协议标识符是ws（如果加密，则为wss），服务器网址就是 URL。

ws://example.com:80/some/path

二、使用

创建 WebSocket 对象。

let Socket = new WebSocket(url, [protocol] );

第一个参数 url, 指定连接的 URL。第二个参数 protocol 是可选的，指定了可接受的子协议。

WebSocket 属性

属性	描述
Socket.readyState	只读属性readyState表示连接状态
Socket.bufferedAmount	只读属性bufferedAmount已被 send() 放入正在队列中等待传输，但是还没有发出的 UTF-8 文本字节数。

只读属性readyState表示连接状态，可以是以下值：

• 0 - 表示连接尚未建立。
• 1 - 表示连接已建立，可以进行通信。
• 2 - 表示连接正在进行关闭。
• 3 - 表示连接已经关闭或者连接不能打开。

WebSocket 事件

事件	事件处理程序	描述
open	Socket.onopen	连接建立时触发
message	Socket.onmessage	客户端接收服务端数据时触发
error	Socket.onerror	通信发生错误时触发
close	Socket.onclose	连接关闭时触发

WebSocket 方法

方法	描述
Socket.send()	使用连接发送数据
Socket.close()	关闭连接

WebSocket 示例

// 打开一个 websocket
let ws = new WebSocket("wss://echo.websocket.org");

ws.onopen = function(evt) { 
// Web Socket 已连接上，使用 send() 方法发送数据
  console.log("Connection open ..."); 
  ws.send("Hello WebSockets!");
};

ws.onmessage = function(evt) {
  console.log( "Received Message: " + evt.data);
  ws.close();
};

ws.onclose = function(evt) {
  console.log("Connection closed.");
}; 

参考文章：http://www.ruanyifeng.com/blo...
参考文章：https://www.runoob.com/html/h...