vue 項目中使用websocket的正確姿勢
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ā)生錯誤" + 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頁面里添加個鉤子函數(shù)
mounted() { //當在任一路由頁面被刷新時,便是根組件app被從新建立,此時能夠進行webSocket重連 //從localStorage中獲取用戶信息,是登陸狀態(tài)則能夠進行webSocket重連 let token = localStorage.getItem("token"); if (token) { // userMessage = JSON.parse(userMessage); this.$websocket.initWebSocket(token); } },
客戶端主動關(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中全局注冊了websocket.js文件
到此這篇關(guān)于vue 項目中使用websocket的文章就介紹到這了,更多相關(guān)vue使用websocket內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- 一文詳解websocket在vue2中的封裝使用
- Vue項目中Websocket的使用實例
- 前端之vue3使用WebSocket的詳細步驟
- vue3.0中使用websocket,封裝到公共方法的實現(xiàn)
- vue3+ts+Vuex中使用websocket協(xié)議方式
- Vue項目使用Websocket大文件FileReader()切片上傳實例
- vue項目使用websocket連接問題及解決
- Vue?websocket封裝實現(xiàn)方法詳解
- vue使用websocket概念及示例
- vue基于websocket實現(xiàn)智能聊天及吸附動畫效果
- Flask使用SocketIO實現(xiàn)WebSocket與Vue進行實時推送
- vue+flv.js+SpringBoot+websocket實現(xiàn)視頻監(jiān)控與回放功能
- vue項目中使用websocket的實現(xiàn)
- vue實現(xiàn)websocket客服聊天功能
- Vue+Websocket簡單實現(xiàn)聊天功能
- vue使用WebSocket模擬實現(xiàn)聊天功能
- websocket+Vuex實現(xiàn)一個實時聊天軟件
- 使用WebSocket+SpringBoot+Vue搭建簡易網(wǎng)頁聊天室的實現(xiàn)代碼
相關(guān)文章
vue2結(jié)合element-ui實現(xiàn)TreeSelect樹選擇功能
這篇文章主要為大家詳細介紹了vue2如何結(jié)合element-ui實現(xiàn)TreeSelect樹選擇功能,文中的示例代碼講解詳細,感興趣的小伙伴可以了解下2024-03-03Vue + Element UI 實現(xiàn)權(quán)限管理系統(tǒng)之菜單功能實現(xiàn)代碼
菜單管理是一個對菜單樹結(jié)構(gòu)的增刪改查操作,這篇文章主要介紹了Vue + Element UI 實現(xiàn)權(quán)限管理系統(tǒng)之菜單功能實現(xiàn)代碼,需要的朋友可以參考下2022-02-02Vue組件化(ref,props,?mixin,.插件)詳解
這篇文章主要介紹了Vue組件化(ref,?props,?mixin,?插件)的相關(guān)知識,包括ref屬性,props配置項及mixin混入的方式,本文通過示例代碼多種方式相結(jié)合給大家介紹的非常詳細,需要的朋友可以參考下2022-05-05vue-cli項目如何使用vue-resource獲取本地的json數(shù)據(jù)(模擬服務(wù)端返回數(shù)據(jù))
這篇文章主要介紹了vue-cli項目如何使用vue-resource獲取本地的json數(shù)據(jù)(模擬服務(wù)端返回數(shù)據(jù)),具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-08-08