WebSocket

1、背景与定义

背景

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

2、使用

建立 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...