用websocket实现消息的收发

一：

引入 import MockedSocket from 'socket.io-mock' 引入 import {EventEmitter} from 'events';

二：初始化socket

class TagSocket extends EventEmitter {

constructor(para, dispatch) {
    super()
    this.para = para
    this.url = `${serverList.wsUrl}websocket?lecturerId=${para.lecturerId}&chapterStartTime=${para.chapterStartTime}&tutorId=${para.tutorId}&courseId=${para.courseId}&chapterId=${para.chapterId}&version=${para.version}&client=${para.client}&token=${para.token}&subject=4`
    this.ws = null
    this.dispatch = dispatch
    this.heartSpeed = 5000
    this.heartMsg = {
        'from': `${para.client}`,
        'to': '0',
        'command': 'RTI_HEART'
    }
    
    this.errorClose = window.onlineState// 判断是否是异常关闭 false的时候代表断网异常
    this.activityId = 0
    this.heartTimer = null
    this.reconnectTimer = null
    this.TAGS = {
        STREAM_STATE: 'STREAM_STATE'// 主讲强切直播流通知信令
    }
    
    this.listener = {
        onopen: () => {
        },
        onmessage: (e) => {

            let quesAnswerObj = JSON.parse(e.data);
            console.log(quesAnswerObj)

            let activityType = quesAnswerObj.content ? quesAnswerObj.content.type : '';

            // 输入log
            // classroomRTC.runWriteLogFn('info', this.para, 'websocket', 'receive', quesAnswerObj.command)
            if (JSON.parse(e.data).command !== 'RTI_HEART') {
                // classroomRTC.runWriteLogFn('info', this.para, 'websocket', 'receive', quesAnswerObj.command)
            }

            switch (quesAnswerObj.command) {
                case this.TAGS.STREAM_STATE: // 切直播消息通知
                    console.error(`${+new Date()}-切直播消息通知`, JSON.parse(e.data).content.data);
                    let data = JSON.parse(e.data).content.data;
                    this.dispatch('setSwitchStreamNotice', data);
                case  "CHAT_MSG_NOTIFY": //学生发来消息
                    this.dispatch('receivePrivateMessage', quesAnswerObj);
                case  "SEND_CHAT_MSG": //发送失败或者包含敏感词
                    if(quesAnswerObj.content.msgInfo.state=="sensitiveWord"){
                        let way=(quesAnswerObj.content.msgInfo.id).substr(0,2)
                        if(way=='qf'){
                            //改群发消息为发送失败的状态
                            this.dispatch('changMsgSendState', quesAnswerObj.content.msgInfo.id);
                        }else {
                            //改私聊消息为发送失败的状态
                            this.dispatch('changPrivateMsgSendState', quesAnswerObj.content.msgInfo.id);
                        }
                    }
            }
        },
        //设置前端socket连接状态，用于端上异常提示
        setSocketConnectStatus: (status) => {
            dispatch('setWebsocketConnectStatus', status)
        }
    }
}
// 开始心跳
_startHeartBeat() {
    this._stopHeartBeat()
    this.heartTimer = setInterval(() => {
        this.send(this.heartMsg)
    }, this.heartSpeed)
    console.error('开始心跳')
}

// 停止心跳
_stopHeartBeat() {
    if (this.heartTimer) {
        clearInterval(this.heartTimer)
        console.error(" 停止心跳--------------------")
    }
}
 //断开重连
_reconnect() {
    if (this.reconnectTimer) {
        clearTimeout(this.reconnectTimer)
    }
    this.reconnectTimer = setTimeout(() => {
        console.log("重连中。。。。。。。。。。。。。。。。。")
        // classroomRTC.runWriteLogFn('info', this.para, 'websocket', 'reconnect', '')
        this.open()
    }, 2000)
}

// 绑定websocket各状态的事件
_bindListener() {
    this.ws.onopen = (evt) => {
        console.error('socket连接成功', this.url)
        this._startHeartBeat()
        this.listener.onopen && this.listener.onopen()
        this.listener.setSocketConnectStatus && this.listener.setSocketConnectStatus(true)
    }
    this.ws.onmessage = (evt) => {
        this.listener.onmessage && this.listener.onmessage(evt)
    }
    this.ws.onclose = (evt) => {
        this.listener.setSocketConnectStatus && this.listener.setSocketConnectStatus(false)
        this._stopHeartBeat()
        let inLessonStatus = localStorage.getItem('inLessonStatus') === 'false' ? false : true;
        if (inLessonStatus) {
            console.log('连接关闭，开始重新连接', window.inLessonStatus)
            this._reconnect()
        }

    }

    this.ws.onerror = (e) => {
        this.listener.setSocketConnectStatus && this.listener.setSocketConnectStatus(false)
        console.log('socket出错了   重连中。。。。。。。。。。。。。。。')
        // classroomRTC.runWriteLogFn('info', this.para, 'websocket', 'onerror', '')
        this._reconnect()
    }
}

// 开始
open() {
    console.log('wsUrl=' + this.url)
    if (this.ws) {
        console.log('enterThis.ws')
        this.ws.close()
        this.ws = null
    }
    this.ws = process.env.MOCK ? new MockedSocket() : new WebSocket(this.url)
    this._bindListener()
}

// 发送消息
send(data) {
    console.log(data)
    if (this.ws) {
        this.ws.send(JSON.stringify(data))
        if (data.command !== 'RTI_HEART') {
            // classroomRTC.runWriteLogFn('info', this.para, 'websocket', 'send', JSON.stringify(data))
        }
    }
}
// 关闭
close() {
    this._stopHeartBeat()
    this.ws.close()
}

getCtx() {
    return {
        'lectureId': this.para.lecturerId,
        'courseId': this.para.courseId,
        'chapterId': this.para.chapterId,
    }
}

}

三：创建自己的socket 并应用

//1：创建 连接 websocket

const createWebSocket = ({state, commit, rootState, dispatch}, data) => {

const assistTeacher = new TagSocket(data, dispatch)
assistTeacher.open()

}

//2：发送socket消息

const saveWebSocket = ({state, commit, rootState, dispatch}, data) => {

window.ws.send(data)

}

//data为前后台约定的消息题

//3：socket状态设置

const setWebsocketConnectStatus = ({commit}, status) => {

     commit(types.CONNECT_WEBSOCKET_FLAG, status)
}