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-03
Vue + 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-02
Vue組件化(ref,props,?mixin,.插件)詳解
這篇文章主要介紹了Vue組件化(ref,?props,?mixin,?插件)的相關(guān)知識,包括ref屬性,props配置項及mixin混入的方式,本文通過示例代碼多種方式相結(jié)合給大家介紹的非常詳細,需要的朋友可以參考下2022-05-05
vue-cli項目如何使用vue-resource獲取本地的json數(shù)據(jù)(模擬服務(wù)端返回數(shù)據(jù))
這篇文章主要介紹了vue-cli項目如何使用vue-resource獲取本地的json數(shù)據(jù)(模擬服務(wù)端返回數(shù)據(jù)),具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-08-08

