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

