websocket 使用流程说明

1.初始化 websocket

initWebSocket: function () {
  let url = 'ws://113.105.121.204:12000/msg'
  this.websocket = new WebSocket(url)
  this.websocket.onopen = this.websocketonopen
  this.websocket.onmessage = this.websocketonmessage  
  this.websocket.onerror = this.websocketonerror
  this.websocket.onclose = this.websocketclose
},

 

2.连接建立之后执行send方法发送数据

websocketonopen () {
  this.websocket.send(data)
},

3.数据接收

websocketonmessage (e) {
  const resp = JSON.parse(e.data)
},

4.连接建立失败重连

websocketonerror () {
  this.initWebSocket()
},

5.断开连接, websocket 关闭

websocketclose (e) {
  console.log('断开连接', e)
},

6.启动心跳

就是添加定时器，定期向服务端发送数据。

heartbeat () {
  const param = { ...... }
  this.websocketsend(JSON.stringify(param))
},

this.TIMER = setInterval(() => {
  this.heartbeat()
}, 50000)

7.关闭连接

// 关闭连接
closeWs () {
  const param = { ...... }
  this._send(JSON.stringify(param))
},

什么时候开启/关闭连接呢？

websocket 在页面被切走或是进入后台运行一段时间后会断开，

这里监听页面显隐，根据状态进行websocket断开和重连。

watch: {
  documentHidden (val) {
    if (val) {
      this.closeWs()
      clearInterval(this.TIMER)
    } else {
      this.initWebSocket()
      this.TIMER = setInterval(() => {
        this.heartbeat()
      }, 50000)
    }
  }
},

documentHidden 是通过 Vuex 控制页面显示/隐藏的属性。

// src/store/modules/framework.js
const state = {
  documentHidden: false, // 当前页面标签是否被切换隐藏
}

const mutations = {
  // 当前页面标签是否被切换隐藏
  changeDocumentHidden: (state, val) => {
    state.documentHidden = val
  }
}
export default {
  state,
  mutations,
  actions,
}

如何判断页面显示/隐藏呢？

在 main.js 文件下，监听浏览器标签页显示或隐藏功能。

import store from './store'
document.addEventListener('visibilitychange', function () {
  if (!document.hidden) { // 当前标签页显示
    
  }
  // 将标签页的显示隐藏情况存储起来
  store.commit('changeDocumentHidden', document.hidden)
})