vue如何優(yōu)雅的使用全局WebSocket
描述
項(xiàng)目需求是做一個(gè)全局聊天系統(tǒng),隨時(shí)接受新消息通知,實(shí)時(shí)更新聊天內(nèi)容
方式就是做一個(gè)全局的ws屬性,統(tǒng)一發(fā)送,統(tǒng)一接受,使用xuex存儲(chǔ)需要的數(shù)據(jù)
代碼步驟
第一步
utils下新建globalWs.js, 用來(lái)處理全部的ws事件,
代碼如下:
//utils/globalWs.js
import { Notification } from 'element-ui' //引入ui組件, 作消息通知
import router from '@/router/routers' //引入router, 作頁(yè)面跳轉(zhuǎn)
import store from '@/store' //引入store, 作聊天消息存儲(chǔ)
export default {
ws: {},
//發(fā)送ws方法
sendWs: function(data) {
console.log(data, '發(fā)送的消息')
this.ws.send(JSON.stringify(data))
},
//初始化ws
initWs: function() {
const that = this
if ('WebSocket' in window) {
// 打開(kāi)一個(gè) 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() 方法發(fā)送數(shù)據(jù), 例如
that.sendWs({name:'張三'})
}
ws.onmessage = function(evt) {
console.log('全局?jǐn)?shù)據(jù)已接收...', 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') {
// 頁(yè)面跳轉(zhuǎn)
// router.push('/airobot/chat')
// }
// }
//})
}
}
// 異常斷開(kāi)重連(2023.4.12更新)
ws.onerror = function(err) {
console.log('websocket 斷開(kāi): ' + err, ws.readyState)
if (ws.readyState != 0) {
setTimeout(() => {
that.initWs()
}, 1000)
}
}
},
//斷開(kāi)socked方法
closeWs: function() {
// 關(guān)閉定時(shí)器
console.log('關(guān)閉定時(shí)器')
clearInterval(this.heartbeat)
console.log('關(guān)閉ws')
this.ws.close()
}
}第二步
main.js中注冊(cè)全局屬性
//main.js import globalWs from './utils/globalWs.js' Vue.prototype.$globalWs = globalWs
優(yōu)雅之處講解
可以在任何時(shí)刻去選擇初始化ws, 可以是app.vue中, 也可以是驗(yàn)證完用戶信息后
可以隨時(shí)使用globalWs.send()發(fā)送聊天消息
- js中初始化:
import globalWs from '@/utils/globalWs.js' globalWs.initWs()
- vue中初始化:
this.globalWs.initWs()
總結(jié)
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue elementUI el-form 數(shù)據(jù)無(wú)法賦值且不報(bào)錯(cuò)的問(wèn)題及解決方法
vue項(xiàng)目中使用elementUI的el-form組件,里面有部分后端數(shù)據(jù)遍歷的字段和部分確定的字段,遇到個(gè)問(wèn)題遍歷的字段可以修改值但是確定的幾個(gè)字段無(wú)法修改值,下面小編給大家分享vue elementUI el-form 數(shù)據(jù)無(wú)法賦值且不報(bào)錯(cuò)的問(wèn)題及解決方法,感興趣的朋友一起看看吧2023-12-12
maptalks+three.js+vue webpack實(shí)現(xiàn)二維地圖上貼三維模型操作
這篇文章主要介紹了maptalks+three.js+vue webpack實(shí)現(xiàn)二維地圖上貼三維模型操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08
淺析vue-router jquery和params傳參(接收參數(shù))$router $route的區(qū)別
今天做項(xiàng)目時(shí)踩到了vue-router傳參的坑(jquery和params),所以決定總結(jié)一下二者的區(qū)別。感興趣的朋友跟隨腳本之家小編一起看看吧2018-08-08
Vue項(xiàng)目中0.js過(guò)大導(dǎo)致首屏加載慢的問(wèn)題解決方法
在 Vue 項(xiàng)目開(kāi)發(fā)完成后,進(jìn)行打包部署時(shí),首屏加載速度是影響用戶體驗(yàn)的關(guān)鍵因素之一,最近我在項(xiàng)目中就遇到了 0.js 過(guò)大導(dǎo)致首屏加載時(shí)間變慢的問(wèn)題,經(jīng)過(guò)一番排查和優(yōu)化,成功解決了該問(wèn)題,特此記錄分享給大家,需要的朋友可以參考下2025-11-11
vue3?+?Ant?Design?實(shí)現(xiàn)雙表頭表格的效果(橫向表頭+縱向表頭)
這篇文章主要介紹了vue3?+?Ant?Design?實(shí)現(xiàn)雙表頭表格(橫向表頭+縱向表頭),需要的朋友可以參考下2023-12-12
vue2?web多標(biāo)簽輸入框elinput是否當(dāng)前焦點(diǎn)詳解
這篇文章主要介紹了vue2?web多標(biāo)簽輸入框elinput是否當(dāng)前焦點(diǎn)的相關(guān)資料,講解了如何在產(chǎn)品中實(shí)現(xiàn)用戶輸入文字后按下回車鍵生成標(biāo)簽并顯示在頁(yè)面上的功能,通過(guò)組件的使用和改造,解決了輸入不連續(xù)的問(wèn)題,需要的朋友可以參考下2025-01-01
vscode+vue cli3.0創(chuàng)建項(xiàng)目配置Prettier+eslint方式
這篇文章主要介紹了vscode+vue cli3.0創(chuàng)建項(xiàng)目配置Prettier+eslint方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10

