WebSocket的使用

例子：

// WebSocket构造函数，创建WebSocket对象
let ws = new WebSocket('ws://localhost:8888')

// 连接成功后的回调函数
ws.onopen = function (params) {
  console.log('客户端连接成功')
  // 向服务器发送消息
  ws.send('hello')
};

// 从服务器接受到信息时的回调函数
ws.onmessage = function (e) {
  console.log('收到服务器响应', e.data)
};

// 连接关闭后的回调函数
ws.onclose = function(evt) {
  console.log("关闭客户端连接");
};

// 连接失败后的回调函数
ws.onerror = function (evt) {
  console.log("连接失败了");
};

// 监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，这样服务端会抛异常。
window.onbeforeunload = function() {
    ws.close();
}

1. readyState 属性返回实例对象的当前状态
   CONNECTING：值为0，表示正在连接。
   OPEN：值为1，表示连接成功，可以通信。
   CLOSING：值为2，表示连接正在关闭。
   CLOSED：值为3，表示连接已经关闭，或者打开连接失败。

2. onopen 连接成功后的回调函数
   当WebSocket 的连接状态readyState 变为1时调用，这意味着当前连接已经准备好发送和接受数据。

3. onmessage 从服务器接受到信息时的回调函数
   message 事件会在 WebSocket 接收到新消息时被触发

4. onclose 连接关闭后的回调函数
   onclose 在 WebSocket 连接的readyState 变为 CLOSED或3时被调用，它接收一个名字为close的 CloseEvent 事件

5. onerror 连接失败后的回调函数
   当websocket的连接由于一些错误事件的发生 (例如无法发送一些数据) 而被关闭时，一个error事件将被引发。

6. send() 对要传输的数据进行排队
   send() 方法将需要通过 WebSocket 链接传输至服务器的数据排入队列，并根据所需要传输的 data bytes 的大小来增加 bufferedAmount 的值

7. close() 关闭当前链接
   close() 方法关闭 WebSocket 连接或连接尝试（如果有的话）。如果连接已经关闭，则此方法不执行任何操作。

作者：张勇辉