webSocket客户端用法与实例

一、客户端API

1、WebSocket构造函数

初始化实例后，客户端就会与服务器进行连接！实例对象的相关属性，查看官方API

const ws = new WebSocket('ws://localhost:8080');

2、readyState属性

readyState属性返回实例对象的连接状态。

1. CONNECTING：值为0，表示正在连接。
2. OPEN：值为1，表示连接成功，可以通信了。
3. CLOSING：值为2，表示连接正在关闭。
4. CLOSED：值为3，表示连接已经关闭，或者打开连接失败。

3、bufferedAmount属性

bufferedAmount属性返回当前还剩下多少二进制数据没有发送完成，可用来判断是否发送完毕。

4、onopen回调函数

连接成功后的回调函数。

ws.onopen = event => {
   
   ws.send('服务器，我连接成功了!');
}

5、onclose回调函数

连接关闭后的回调函数。

ws.onclose = event => {
   
   console.log(event.code)
   console.log(event.reason)
   console.log(event.wasClean)
}

6、onmessage回调函数

接收到服务器信息后的回调。

ws.onmessage= event => {
   
   console.log(event.data)
   // event.data == (String || blob || Arraybuffer)
   // data数据有三种格式
}

7、send方法

向服务器发送消息的方法。

ws.send('String || blob || Arraybuffer');
// 可发送三种格式数据

8、onerror回调函数

发生错误时的回调。

ws.onerror = event => {
   
   console.log(event)
}

二、客户端封装

1、封装代码

/*
 * @Author : 云端君
 * @Date   : 2021/3/16
 * @ins    : '_'为私有属性
 */
class Socket{
   
    ws = null;  // websocket实例
    _alive = false; // 连接状态
    _params = null; // 把类的参数传入这里，方便调用
  
    /* 计时器 */
    _reconnect_timer = null;    // 重连计时器
    _heart_timer = null;    // 心跳计时器
    _message_func =