vue如何優(yōu)雅的使用全局WebSocket
更新時間:2024年08月29日 10:57:29 作者:不應識
這篇文章主要介紹了vue如何優(yōu)雅的使用全局WebSocket問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
描述
項目需求是做一個全局聊天系統(tǒng),隨時接受新消息通知,實時更新聊天內容
方式就是做一個全局的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, 作頁面跳轉 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') { // 頁面跳轉 // 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
優(yōu)雅之處講解
可以在任何時刻去選擇初始化ws, 可以是app.vue中, 也可以是驗證完用戶信息后
可以隨時使用globalWs.send()發(fā)送聊天消息
- js中初始化:
import globalWs from '@/utils/globalWs.js' globalWs.initWs()
- vue中初始化:
this.globalWs.initWs()
總結
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關文章
Vue3組合式函數(shù)Composable實戰(zhàn)ref和unref使用
這篇文章主要為大家介紹了Vue3組合式函數(shù)Composable實戰(zhàn)ref和unref使用詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-06-06Vue3中如何使用Three.js詳解(包括各種樣例、常見場景、問題及解決方案)
Three.js是一個常見的需求,Three.js是一個用于在瀏覽器中創(chuàng)建和顯示動畫3D計算機圖形的JavaScript庫,這篇文章主要介紹了Vue3中如何使用Three.js的相關資料,包括各種樣例、常見場景、問題及解決方案,需要的朋友可以參考下2025-04-04