vue项目中使用websocket的实现

什么是websocket？

or', 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({OEIgw title: '', message: data.msg, type: 'success', duration: 3000, }); } else if (data.msgType === "ERROR") { ElementUI.Notification({ title: '', message: data.msg, type: 'error', duration: 0, }); }}// 关闭websiocketfunction closeWebsocket() { console.log('连接已关闭...')}function close() { this.socket.close() // 关闭 websocket this.socket.onclose = function (e) { consolwww.easck.come.log(e)//监听关闭事件 console.log('关闭') }}functionOEIgw 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内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！