vue中使用webSocket进行数据实时接收

功能描述：页面需要实时接收后台返回的最新数据并在页面展示，使用webSocket进行消息轮询和接收。

生成message.js

import Vue from 'vue'
// 定义定时器变量名
var wsTimeoutMessage

export function messageWS() {
  // window.context.ws.ip 为全局定义的后台提供的请求地址例：//ws://192.0.0.1:10000/ws
  let ws = new window.WebSocket(window.context.ws.ip)
  let client = Stomp.over(ws)
  // 连接异常事件
  let on_error = function () {
    wsTimeoutMessage && clearTimeout(wsTimeoutMessage)
    wsTimeoutMessage = setTimeout(() => {
      console.log('消息重连中')
      messageWS()
    }, 5000)
  }
  // 连接中事件
  let on_connect = function (x) {
    client.subscribe('后台提供的服务地址', function (data) {
      if (data) {
        // ...TODO 当前为后台返回的实时数据，可自行处理，
        // 例使用全局事件线或者store传递返回数据并在其他页面使用
      }
    })
    console.log('消息链接ok')
  }
  // window.context.ws.usr为后台提供的注册请求地址
  client.connect(
    window.context.ws.usr,
    on_error,
    on_connect,
    '/'
  )
}

页面使用

// 可在home.vue中使用,页面需引入message.js中的messageWS方法,直接在页面初始化时调用即可
mounted() { messageWS() }