vue 項(xiàng)目中使用websocket的正確姿勢(shì)
1. 在utils下新建websocket.js文件
// import { showInfoMsg, showErrorMsg } from '@/utils/popInfo' import ElementUI from 'element-ui'; function initWebSocket(e) { console.log(e) const wsUri = WS_API + "/webSocket/" + e; this.socket = new WebSocket(wsUri)//這里面的this都指向vue this.socket.onerror = webSocketOnError; this.socket.onmessage = webSocketOnMessage; this.socket.onclose = closeWebsocket; } function webSocketOnError(e) { ElementUI.Notification({ title: '', message: "WebSocket連接發(fā)生錯(cuò)誤" + e, type: 'error', duration: 0, }); } function webSocketOnMessage(e) { const data = JSON.parse(e.data); console.log(data.msgType === "INFO", data.msgType === "INFO") if (data.msgType === "INFO") { ElementUI.Notification({ title: '', message: data.msg, type: 'success', duration: 3000, }); } else if (data.msgType === "ERROR") { ElementUI.Notification({ title: '', message: data.msg, type: 'error', duration: 0, }); } } // 關(guān)閉websiocket function closeWebsocket() { console.log('連接已關(guān)閉...') } function close() { this.socket.close() // 關(guān)閉 websocket this.socket.onclose = function (e) { console.log(e)//監(jiān)聽關(guān)閉事件 console.log('關(guān)閉') } } function webSocketSend(agentData) { this.socket.send(agentData); } export default { initWebSocket, close }
如果想刷新重新鏈接websocket 可以在App.vue頁面里添加個(gè)鉤子函數(shù)
mounted() { //當(dāng)在任一路由頁面被刷新時(shí),便是根組件app被從新建立,此時(shí)能夠進(jìn)行webSocket重連 //從localStorage中獲取用戶信息,是登陸狀態(tài)則能夠進(jìn)行webSocket重連 let token = localStorage.getItem("token"); if (token) { // userMessage = JSON.parse(userMessage); this.$websocket.initWebSocket(token); } },
客戶端主動(dòng)關(guān)閉websocket 在關(guān)閉的地方觸發(fā)函數(shù)就可以
logout() { // localStorage.clear(); localStorage.removeItem("token"); this.$websocket.close(); this.$store.dispatch("LogOut").then(() => { location.reload(); }); },
注:$webSocket 是在main.js中全局注冊(cè)了websocket.js文件
到此這篇關(guān)于vue 項(xiàng)目中使用websocket的文章就介紹到這了,更多相關(guān)vue使用websocket內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- 一文詳解websocket在vue2中的封裝使用
- Vue項(xiàng)目中Websocket的使用實(shí)例
- 前端之vue3使用WebSocket的詳細(xì)步驟
- vue3.0中使用websocket,封裝到公共方法的實(shí)現(xiàn)
- vue3+ts+Vuex中使用websocket協(xié)議方式
- Vue項(xiàng)目使用Websocket大文件FileReader()切片上傳實(shí)例
- vue項(xiàng)目使用websocket連接問題及解決
- Vue?websocket封裝實(shí)現(xiàn)方法詳解
- vue使用websocket概念及示例
- vue基于websocket實(shí)現(xiàn)智能聊天及吸附動(dòng)畫效果
- Flask使用SocketIO實(shí)現(xiàn)WebSocket與Vue進(jìn)行實(shí)時(shí)推送
- vue+flv.js+SpringBoot+websocket實(shí)現(xiàn)視頻監(jiān)控與回放功能
- vue項(xiàng)目中使用websocket的實(shí)現(xiàn)
- vue實(shí)現(xiàn)websocket客服聊天功能
- Vue+Websocket簡(jiǎn)單實(shí)現(xiàn)聊天功能
- vue使用WebSocket模擬實(shí)現(xiàn)聊天功能
- websocket+Vuex實(shí)現(xiàn)一個(gè)實(shí)時(shí)聊天軟件
- 使用WebSocket+SpringBoot+Vue搭建簡(jiǎn)易網(wǎng)頁聊天室的實(shí)現(xiàn)代碼
相關(guān)文章
vue2結(jié)合element-ui實(shí)現(xiàn)TreeSelect樹選擇功能
這篇文章主要為大家詳細(xì)介紹了vue2如何結(jié)合element-ui實(shí)現(xiàn)TreeSelect樹選擇功能,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以了解下2024-03-03簡(jiǎn)單聊聊Vue中的ref,toRef與toRefs
這篇文章主要是想和大家來簡(jiǎn)單聊聊Vue中的ref、toRef、toRefs這三個(gè)函數(shù)的使用與區(qū)別,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以了解一下2023-04-04vue中使用vant的Toast輕提示報(bào)錯(cuò)的解決
這篇文章主要介紹了vue中使用vant的Toast輕提示報(bào)錯(cuò)的解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-05-05Vue + Element UI 實(shí)現(xiàn)權(quán)限管理系統(tǒng)之菜單功能實(shí)現(xiàn)代碼
菜單管理是一個(gè)對(duì)菜單樹結(jié)構(gòu)的增刪改查操作,這篇文章主要介紹了Vue + Element UI 實(shí)現(xiàn)權(quán)限管理系統(tǒng)之菜單功能實(shí)現(xiàn)代碼,需要的朋友可以參考下2022-02-02vue3動(dòng)態(tài)加載對(duì)話框的方法實(shí)例
對(duì)話框是很常用的組件,在很多地方都會(huì)用到,下面這篇文章主要給大家介紹了關(guān)于vue3動(dòng)態(tài)加載對(duì)話框的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-03-03Vue組件化(ref,props,?mixin,.插件)詳解
這篇文章主要介紹了Vue組件化(ref,?props,?mixin,?插件)的相關(guān)知識(shí),包括ref屬性,props配置項(xiàng)及mixin混入的方式,本文通過示例代碼多種方式相結(jié)合給大家介紹的非常詳細(xì),需要的朋友可以參考下2022-05-05vue-cli項(xiàng)目如何使用vue-resource獲取本地的json數(shù)據(jù)(模擬服務(wù)端返回?cái)?shù)據(jù))
這篇文章主要介紹了vue-cli項(xiàng)目如何使用vue-resource獲取本地的json數(shù)據(jù)(模擬服務(wù)端返回?cái)?shù)據(jù)),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-08-08