vue如何优雅的使用全局WebSocket
作者：不应识
这篇文章主要介绍了vue如何优雅的使用全局WebSocket问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
描述
项目需求是做一个全局聊天系统，随时接受新消息通知，实时更新聊天内容
方式就是做一个全局的ws属性，统一发送，统一接受，使用xuex存储需要的数据
代码步骤
第一步
utils下新建globalWs.js, 用来处理全部的ws事件,
代码如下：
//utils/globalWs.js
import { Notification } from 'element-ui' //引入ui组件, 作消息通知
import router from '@/router/routers' //引入router, 作页面跳转
import store from '@/store' //引入store, 作聊天消息存储
export default {
ws: {},
//发送ws方法
sendWs: function(data) {
console.log(data, '发送的消息')
this.ws.send(JSON.stringify(data))
},
//初始化ws
initWs: function() {
const that = this
if ('WebSocket' in window) {
// 打开一个 web socket
const ws = new WebSocket(process.env.VUE_APP_WS_API)
that.ws = ws
ws.onopen = function() {
console.log('ws.onopen')
// Web Socket 已连接上，使用 that.sendWs() 方法发送数据, 例如
that.sendWs({name:'张三'})
}
ws.onmessage = function(evt) {
console.log('全局数据已接收...', evt.data)
var receivedData = JSON.parse(evt.data)
// 添加聊天记录代码
// store.commit('ADD_CALL_LOG', data)
//新消息通知
//Notification.info({
// title: '消息',
// message: '您有一条新的消息',
// onClick: () => {
// if (router.currentRoute.fullPath != '/airobot/chat') {
// 页面跳转
// router.push('/airobot/chat')
// }
// }
//})
}
}
// 异常断开重连(2023.4.12更新)
ws.onerror = function(err) {
console.log('websocket 断开: ' + err, ws.readyState)
if (ws.readyState != 0) {
setTimeout(() => {
that.initWs()
}, 1000)
}
}
},
//断开socked方法
closeWs: function() {
// 关闭定时器
console.log('关闭定时器')
clearInterval(this.heartbeat)
console.log('关闭ws')
this.ws.close()
}
}第二步
main.js中注册全局属性
//main.js import globalWs from './utils/globalWs.js' Vue.prototype.$globalWs = globalWs
优雅之处讲解
可以在任何时刻去选择初始化ws, 可以是app.vue中, 也可以是验证完用户信息后
可以随时使用globalWs.send()发送聊天消息
- js中初始化：
import globalWs from '@/utils/globalWs.js' globalWs.initWs()
- vue中初始化：
this.globalWs.initWs()
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。