我要评论描述
项目需求是做一个全局聊天系统，随时接受新消息通知，实时更新聊天内容
方式就是做一个全局的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()
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持代码网。
发表评论