目录
1.描述
项目需求是做一个全局聊天系统, 随时接受新消息通知, 实时更新聊天内容.
方式就是做一个全局的ws属性, 统一发送, 统一接受, 使用xuex存储需要的数据
2.代码步骤
1.第一步, 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
3.优雅之处讲解
可以在任何时刻去选择初始化ws, 可以是app.vue中, 也可以是验证完用户信息后
可以随时使用globalWs.send()发送聊天消息
js中初始化
import globalWs from '@/utils/globalWs.js'
globalWs.initWs()
vue中初始化
this.globalWs.initWs()