WebSocket知识体系

优点：客户端与服务器之间可以发送非常少的数据，不会对HTTP 造成任何负担。使用更小的数据包让 Web Socket非常适合带宽和延迟问题比较明显的移动应用。

缺点：定义协议的时间比定义 JavaScript API 要长。

1. API

   1. readyState：当前状态

      1. WebSocket.OPENING （0）：连接正在建立。

      2. WebSocket.OPEN （1）：连接已经建立。

      3. WebSocket.CLOSING （2）：连接正在关闭。

      4. WebSocket.CLOSE （3）：连接已经关闭。

   2. 特点：

      1. WebSocket 对象没有 readystatechange 事件

      2. 任何时候都可以调用 close() 方法关闭 Web Socket 连接：

      3. socket.close();

      4. 调用 close() 之后， readyState 立即变为 2（连接正在关闭），并会在关闭后变为3（连接已经关闭）。

2. 发生和接收数据

   1. 客户端要向服务器发送数据，使用 send() 方法并传入一个字符串、 ArrayBuffer 或 Blob

   2. 客户端接收数据：服务器向客户端发送消息时， WebSocket 对象上会触发 message 事件。这个 message 事件与其他消息协议类似，可以通过 event.data 属性访问到有效载荷

   3. 特点：

      1. 与通过 send() 方法发送的数据类似， event.data 返回的数据也可能是 ArrayBuffer 或 Blob 。

      2. 这由 WebSocket 对象的 binaryType 属性决定，该属性可能是 "blob" 或 "arraybuffer" 。

3. 其它事件

   1. 在连接生命周期中有可能触发 3 个其他事件

      1. open ：在连接成功建立时触发。

      2. error ：在发生错误时触发。连接无法存续。

      3. close ：在连接关闭时触发。

代码：

let socket = new WebSocket("ws://www.example.com/server.php");
let stringData = "Hello world!";
let arrayBufferData = Uint8Array.from(['f', 'o', 'o']);
let blobData = new Blob(['f', 'o', 'o']);
socket.send(stringData);
socket.send(arrayBufferData.buffer);
socket.send(blobData);


socket.onmessage = function(event) {
    let data = event.data;
    // 对数据执行某些操作
};

let socket = new WebSocket("ws://www.example.com/server.php");
socket.onopen = function() {
    alert("Connection established.");
};
socket.onerror = function() {
    alert("Connection error.");
};
socket.onclose = function() {
    alert("Connection closed.");
};

socket.onclose = function(event) {
    console.log(`as clean? ${event.wasClean} Code=${event.code} Reason=${event.reason}`);
};

问答：

1. websocket建立连接过程？

2. websocket和长轮询区别？

有实力的小伙伴，可以把答案放在评论区，进一步巩固和加深理解websocket。