vue使用websocket

建立websocket.js

javascript 复制代码

// 信息提示
import { Message } from 'element-ui'
// 引入用户id
import { getTenantId, getAccessToken } from '@/utils/auth'
 
// websocket地址
var url = 'ws://192.168.2.20:48081/websocket/message'
// websocket实例
var ws
// 重连定时器实例
var tt
// websocket重连开关
var websocketswitch = false
 
// websocket对象
var websocket = {
  // websocket建立连接
  Init () {
    // 判断浏览器是否支持websocket
    if (!'WebSocket' in window) {
      this.$modal.msgError('您的浏览器不支持WebSocket')
      return
    }
    // 获取用户id
    let userId = getTenantId()
    // 创建websocket实例
    ws = new WebSocket(url + '?userId=' + userId)
    // 监听websocket连接
    ws.onopen = function () {
      Message({
        type: 'success',
        message: 'websocket连接成功'
      })
    }
    // 监听websocket连接错误信息
    ws.onerror = function (e) {
      console.log('重连开关', websocketswitch)
      console.log('数据传输发生错误', e)
      Message({
        message: 'websocket传输发生错误',
        type: 'error'
      })
      // 打开重连
      reconnect()
    }
    // 监听websocket接受消息
    ws.onmessage = function (e) {
      console.log('接收后端消息:' + e.data)
      //心跳消息不做处理
      if (e.data === 'ok') {
        return
      }
      Message({
        message: e.data,
        type: 'success'
      })
    }
  },
  // websocket连接关闭方法
  Close () {
    //关闭断开重连机制
    websocketswitch = true
    ws.close()
  },
  // websocket发送信息方法
  Send (data) {
    // 处理发送数据JSON字符串
    let msg = JSON.stringify(data)
    // 发送消息给后端
    ws.send(msg)
  },
  // 暴露websocket实例
  getwebsocket () {
    return ws
  }
}
 
// 监听窗口关闭事件，当窗口关闭时-每一个页面关闭都会触发-扩张需求业务
window.onbeforeunload = function () {
  console.log('测试方法执行了')
}
 
// 浏览器刷新重新连接
// 刷新页面后需要重连-并且是在登录之后
if (window.performance.navigation.type == 1 && getAccessToken()) {
  console.log('浏览器刷新了')
  //刷新后重连
  websocket.Init()
}
// 重连方法
function reconnect () {
  console.log('重连开关', websocketswitch)
  // 判断是否主动关闭连接
  if (websocketswitch) {
    return
  }
  // 重连定时器-每次websocket错误方法onerror触发他都会触发
  tt && clearTimeout(tt)
  tt = setTimeout(function () {
    console.log('执行断线重连...')
    websocket.Init()
    websocketswitch = false
  }, 4000)
}
 
// 暴露对象
export default websocket

在登录和退出的时候进行websocket进行建立连接和关闭连接

javascript 复制代码

// 引入外部文件
import websocket from '@/utils/websocket'
// 请求
const actions = {
  // 登录
  async login (ctx, data) {
    // 调用mutations里的方法存到state
    // 登录成功后创建websocket连接
    // res.data 是token
    websocket.Init(res.data)
    ctx.commit('SET_TOKEN', res.data)
  },
 
  // 退出登录
  logout (ctx) {
   // 主动关闭连接
    websocket.onClose()
    Message.success('退出成功，请重新登录')
  }
}

在需要用到websocket使用

javascript 复制代码

// 引入websocket文件
import websocket from '@/utils/websocket'

// 登录成功一进到页面的时候调用
created() {
   this.getWebSocket()
 },

// getWebSocket()方法
method: {
   // websocket 接受消息
    getWebSocket() {
      // websocket.getWebSocket()这个是websocket里面方法返回ws对象（websocket.js）
      let ws = websocket.getWebSocket()
      // 通过ws这个对象获取这个websocket里面后端推消息前端执行的方法onmessage。
      // 给他赋给我们自己方法 this.websocketonmessage
      // websocketonmessage(e)就会执行
      ws.onmessage = this.websocketonmessage
    },
    //接收到消息的回调函数
    websocketonmessage(e) {
      // e后端传回来参数
      // console.log(e.data);
      // 防止心跳监测，返回来的ok 对方法执行的影响（心跳监测方法也会执行一次）
      if (e.data == 'ok') {
        //心跳消息不做处理
        return
      }
      // 需要监测的接口 我们查询数据的接口 在进行处理
        this.alarmerlist()
    },
}