前端webSocket实现聊天消息&心跳检测&断线重连

本文只是简单实现了webSocket在客户端的使用。

知识点

• 1、建立连接
• 2、发送消息
• 3、接收消息
• 4、关闭连接
• 5、检测心跳
• 6、重新连接

封装socket.js

class Socket {
    /**
     * @description: 初始化实例属性，保存参数
     * 
     */
    constructor(options) {
        this.url = options.url;
        this.callback = options.received;
        this.name = options.name || 'default';
        this.ws = null;
        this.status = null;
        this.pingInterval = null;
        // 心跳检测频率
        this._timeout = 3000;
        this.isHeart = options.isHeart;
        this.isReconnection = options.isReconnection;
    }
    connect(data) {
        this.ws = new WebSocket(this.url);
        // 建立连接
        this.ws.onopen = (e) => {
            this.status = 'open';
            console.log("连接成功", e)
            if(this.isHeart) {
                // 心跳
                this._heartCheck()
            }
            // 给后台发送数据
            if(data !== undefined) {
                return this.ws.send(JSON.stringify({type: 'init'}))
            }
        }
        // 接受服务器返回的信息
        this.ws.onmessage = (e) => {
            if(typeof this.callback === 'function'){
                return this.callback(e.data)
            }else{
                console.log('参数的类型必须为函数')
            }
        }
        // 关闭连接
        this.ws.onclose = (e) => {
            console.log('onclose',e)
            this._closeSocket(e)
        }
        // 报错
        this.onerror = (e) => {
            console.log('onerror',e)
            this._closeSocket(e)
        }
    }
    sendMsg(data) {
        let msg = JSON.stringify(data)
        return this.ws.send(msg)
    }
    _resetHeart() {
        clearInterval(this.pingInterval)
        return this
    }
    _heartCheck() {
        this.pingInterval = setInterval(() => {
            if(this.ws.readyState === 1) {
                this.ws.send(JSON.stringify({type: 'ping'}))
            }
        },this._timeout)
    }
    _closeSocket(e) {
        this._resetHeart()
        if(this.status !== 'close') {
            console.log('断开，重连', e)
            if(this.isReconnection){
                // 重连
                this.connect()
            }
        }else{
            console.log('手动关闭了', e)
        }
    }
    close() {
        this.status = 'close'
        this._resetHeart()
        return this.ws.close();
    }
}

页面使用

// 引入文件
<script src="./socket.js"></script>

<script>
    // 初始化
    const ws = new Socket({
        url: 'wss://echo.websocket.org',// 阮一峰老师教程链接
        name: '',			// name
        isHeart:true,			// 是否心跳
        isReconnection:false,		// 是否断开重连
        received: function(data){
        	// 监听服务器返回信息
            console.log("received",data)
        }
    });
    // 建立连接
    let data = {
        type: 'init'
    }
    ws.connect(data);
    
    // 发送消息
    let sendData = {
       type: 'sendMsg'
    }
    ws.sendMsg(sendData)
    
    // 手动关闭
    ws.close()
</script>

本文只是简单做了封装，可能有遗漏或更好的方式实现，欢迎留言讨论