[网络协议]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 = null;   // 信息onmessage缓存方法
  
    /* 参数 */
    heartBeat = 50000;  // 心跳时间 50秒一次
    heartMsg = {msg: 'yd'}; // 心跳信息
    reconnect = true; // 是否自动重连
    reconnectTime = 5000; // 重连间隔时间
    reconnectTimes = 10; // 重连次数
    constructor(params) {
        this._params = params
        this.init()
    }
  
    /* 初始化 */
    init() {
        // 重中之重，不然重连的时候会越来越快
        clearInterval(this._reconnect_timer);
        clearInterval(this._heart_timer);
    
        let params = this._params;
        
        let {url, port} = params;   // 设置连接路径
        let global_params = ['heartBeat', 'heartMsg', 'reconnect', 'reconnectTime', 'reconnectTimes'];
        
        // 定义全局变量
        Object.keys(params).forEach(key=>{
            if (global_params.indexOf(key) !== -1) {
                this[key] = params[key];
            }
        })
  
        let ws_url = port ? url + ':' + port : url;
        delete this.ws;
        this.ws = new WebSocket(ws_url);
        if(this._message_func) this.onmessage(this._message_func);
      
  
        // 默认绑定事件
        this.ws.onopen = () => { 
            this._alive = true; // 设置状态为开启
            clearInterval(this._reconnect_timer)
            this.onheartbeat(); // 连接后进入心跳状态
        }

        this.ws.onclose = () => { 
            
            this._alive = false;    // 设置状态为断开
            clearInterval(this._heart_timer)
    
            // 自动重连开启
            if (true == this.reconnect) {
                this.onreconnect(); // 断开后立刻重连
            }
        }
    }
  
    /* 心跳事件 */
    onheartbeat(func) {
        // 在连接状态下
        if(true == this._alive) {
            /* 心跳计时器 */
            this._heart_timer = setInterval(()=>{
                // 发送心跳信息
                this.send(this.heartMsg)
                func ? func(this) : false
            }, this.heartBeat)
        }
    }
  
    /* 重连事件 */
    onreconnect(func) {
        /* 重连间隔计时器 */
        this._reconnect_timer = setInterval(()=>{
            // 限制重连次数
            if(this.reconnectTimes <= 0){
                clearInterval(this._reconnect_timer)
                return; // 跳出函数之间的循环
            }else{
                this.reconnectTimes--;  // 重连一次-1
            }
            
            this.init();    // 进入初始状态
            func ? func(this) : false
        },this.reconnectTime)
    }
  
    // 发送消息 
    send(text) {
        if(true == this._alive){
            text = typeof text == 'string' ?  text : JSON.stringify(text);
            this.ws.send(text);
            console.log('发送心跳消息：', text)
        }
    }
  
    // 断开连接
    close() {
        if(true == this._alive){
            this.ws.close();
        }
    }
  
    //接受消息
    onmessage(func, all = false) {
        this.ws.onmessage = data => {
            this._message_func = func;
            func(!all ? data.data : data);
        }
    }
  
    //websocket连接成功事件
    onopen(func) {
        this.ws.onopen = event => {
            this._alive = true;
            func ? func(event) : false;
        }
    }
    // 关闭事件
    onclose(func) { 
        this.ws.onclose = event => {
            //设置状态为断开
            this._alive = false;
            clearInterval(this._heart_timer);
            // 自动重连开启
            if(true == this.reconnect){
                this.onreconnect(); // 断开后立刻重连
            }
            func ? func(event) : false;
        }
    }
    // 错误事件
    onerror(func) { 
        this.ws.onerror = event => {
            func ? func(event) : false
        }
    }
}
  
  export default Socket

2、用法

import Socket from '@/assets/js/webSocket'	// 导入
// 新建实例
ws = new Socket({
	url: '服务器地址'
})

// 获取消息
ws.onmessage((event) => {
	// 处理消息
})

注：爱护原创，转载请说明出处