vue使用websocket
建立websocket.js
// 信息提示
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 () {// 判断浏览器是否支持websocketif (!'WebSocket' in window) {this.$modal.msgError('您的浏览器不支持WebSocket')return}// 获取用户idlet 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 = truews.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进行建立连接和关闭连接
// 引入外部文件
import websocket from '@/utils/websocket'
// 请求
const actions = {// 登录async login (ctx, data) {// 调用mutations里的方法存到state// 登录成功后创建websocket连接// res.data 是tokenwebsocket.Init(res.data)ctx.commit('SET_TOKEN', res.data)},// 退出登录logout (ctx) {// 主动关闭连接websocket.onClose()Message.success('退出成功，请重新登录')}
}在需要用到websocket使用
// 引入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()},
}