在vue 项目中采用websocket的正确姿势

vue 项目中使用websocket的正确姿势

在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连接发生错误" + 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,
     });
 }

}
// 关闭websiocket
function closeWebsocket() {

console.log('连接已关闭...')

}
function close() {

this.socket.close() // 关闭 websocket
 this.socket.onclose = function (e) {
     console.log(e)//监听关闭事件
     console.log('关闭')
 }

}
function webSocketSend(agentData) {

 this.socket.send(agentData);

}
export default {

 initWebSocket,close

}

如果想刷新重新链接websocket 可以在App.vue页面里添加个钩子函数
mounted() {
//当在任一路由页面被刷新时,便是根组件app被从新建立,此时能够进行webSocket重连
//从localStorage中获取用户信息,是登陆状态则能够进行webSocket重连
let token = localStorage.getItem(“token”);
if (token) {
// userMessage = JSON.parse(userMessage);
this.$websocket.initWebSocket(token);
}
},

客户端主动关闭websocket 在关闭的地方触发函数就可以
logout() {
// localStorage.clear();
localStorage.removeItem(“token”);
this.$websocket.close();
this.$store.dispatch(“LogOut”).then(() => {
location.reload();
});
},

注：$webSocket 是在main.js中全局注册了websocket.js文件

关于这篇在vue项目中使用websocket的正确方案文章就介绍到这了,更多相关vue使用websocket内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！