关于websocket 在vue和react中的使用_websocket react前端怎么连wss

1、在vue中使用

1、初始化

initWebSocket: function () {
            // WebSocket与普通的请求所用协议有所不同，ws等同于http，wss等同于https
            // 用户token
             let token= getToken()
            if (token=== 'undefined' || !token) {
                token= ''
            }
            let url = ''
            if (process.env.NODE_ENV === 'production') {
                // 生产环境
                url = ''
            } else if (process.env.NODE_ENV === 'staging') {
                url = '' // 测试服
            } else {
                // development 开发环境
                url = ''
            }
            this.websock = new WebSocket(url)
            this.websock.onopen = this.websocketOnopen
            this.websock.onerror = this.websocketOnerror
            this.websock.onmessage = this.websocketOnmessage
            this.websock.onclose = this.websocketOnclose
       },

2、开始连接

websocketOnopen: function () {
            console.log('WebSocket连接成功')
            //心跳检测重置
            // this.heartCheck.reset().start()
            //开启心跳
            this.start()
        },

3、心跳监测

 start() {
            //开启心跳
            let context = this
            clearInterval(context.timeObj)
 
            context.timeObj = setInterval(function () {
                //这里发送一个心跳，后端收到后，返回一个心跳消息
                // console.log('心跳', context.websock)
                if (context.websock.readyState === 1) {
                    //如果连接正常
                    context.websock.send(JSON.stringify({ content: 'user-bind心跳包', type: 0 }))
                } else {
                    //否则重连
                    context.reconnect()
                }
            }, context.timeout)
        },

4、连接失败

 // 连接失败后的回调函数
        websocketOnerror: function (e) {
            console.log('WebSocket连接发生错误', e)
            this.reconnect()
        },

5、从服务器接受到信息

 websocketOnmessage: function (e) {
            // console.log('监听关闭' + e)
            console.log('-----接收消息-------', e)
 
            // 收到消息，添加报警声音(先判断声音报警是否开启)
            if (this.pcAlarmVoice) {
                this.alarmTime = 5
            }
 
            const h = this.$createElement // 创建节点
 
            let alarmData = JSON.parse(e.data).bindContent
            alarmData.alarmTime = parseTime(alarmData.alarmTime)
 
            alarmData.alarmType = this.alarmType[alarmData.alarmType]
            alarmData.groupName = alarmData.groupName ? alarmData.groupName : '未分配'
            let title = alarmData.deviceName + '(' + alarmData.deviceSerial + ')'
 
            // 当前弹窗要插入数组的下标
            let index = this.alarmBox.length
 
            if (index === 3) {
                this.alarmBox[0].close()
                this.alarmBox.pop()
            }
 
            let messageHTML = null
            if (alarmData.channelName) {
                messageHTML = h(
                    'div',
                    {
                        class: 'alarm-box'
                    },
                    [
                        h('p', this.$t('device.d409') + '：' + alarmData.alarmType),
                        h('p', this.$t('device.d746') + '：' + alarmData.channelName),
                        h('p', this.$t('monitor.m15') + '：' + alarmData.groupName),
                        h('p', this.$t('device.d497') + '：' + alarmData.alarmTime),
                        h('p', this.$t('user.u258') + '：' + alarmData.alarmContent.cn),
                        h(
                            'div',
                            {
                                class: 'btn-box'
                            },
                            [
                                h(
                                    'button',
                                    {
                                        class: 'btn el-button--primary ' + alarmData.alarmBTN,
                                        on: {
                                            click: () => this.notifyClick(alarmData) // 按钮的点击事件
                                        }
                                    },
                                    '查看详情'
                                )
                            ]
                        )
                    ]
                )
            } else {
                messageHTML = h(
                    'div',
                    {
                        class: 'alarm-box'
                    },
                    [
                        h('p', this.$t('device.d409') + '：' + alarmData.alarmType),
                        h('p', this.$t('user.u489') + '：' + alarmData.objectName),
                        h('p', this.$t('device.d497') + '：' + alarmData.alarmTime),
                        h('p', this.$t('user.u258') + '：' + alarmData.alarmContent.cn),
                        h(
                            'div',
                            {
                                class: 'btn-box'
                            },
                            [
                                h(
                                    'button',
                                    {
                                        class: 'btn el-button--primary ' + alarmData.alarmBTN,
                                        on: {
                                            click: () => this.notifyClick(alarmData) // 按钮的点击事件
                                        }
                                    },
                                    this.$t('global.detailBtn') // '查看详情'
                                )
                            ]
                        )
                    ]
                )
            }
 
            this.open(title, messageHTML, index)
        },
//制作弹窗
      open(title, messageHTML, index) {
            this.alarmBox[index] = this.$notify({
                title: title,
                dangerouslyUseHTMLString: true,
                duration: 5000, // 自动关闭的时间
                // duration: 0, // 不自动关闭
                customClass: 'alarm-notify',
                // position: 'bottom-right',
                message: messageHTML
            })
        },

6、连接关闭

        websocketOnclose: function (e) {
            // console.log('WebSocket连接关闭')
            // console.log(e)
            // if (localStorage.getItem('websocket') === 'screen') {
            //     return false
            // }
            // this.reconnect()
        },

7、发送心跳

 websocketSend(text) {
            // 数据发送
            try {
                this.websock.send(text)
            } catch (err) {
                // console.log('send failed (' + err.code + ')')
            }
        },

8、重新连接函数

 reconnect() {
            let context = this
            if (context.lockReconnect) return
            context.lockReconnect = true
            //没连接上会一直重连，设置延迟避免请求过多
            clearTimeout(this.time1)
            this.time1 = setTimeout(function () {
                // console.info('尝试重连...')
                context.initWebSocket()
                context.lockReconnect = false
            }, 5000)
        },

9、页面销毁时

 beforeDestroy() {
        // localStorage.setItem('websocket', 'screen')
        this.websock.close()
        this.websock = null
        clearInterval(this.timeObj)
        clearTimeout(this.time1)
        // console.log('断开网页websock连接')
    }

10、同时添加一个报警弹窗

 <!-- 报警时的声音 controls -->
        <audio
            loop="true"
            ebkit-playsinline="true"
            playsinline="true"
            ref="myAudio"
            src="../../assets/alarm.mp3"
        ></audio>
 
 watch: {
        alarmTime(after) {
            clearInterval(this.timer)
            if (after > 0) {
                this.setAudio()
            } else {
                this.myAudio.pause() // 暂停
                clearInterval(this.timer)
            }
        }
    },