Vue项目全局创建WebSocket连接

首先创建WebSocket.js文件，我把它放在了src/js/websocket.js路径下

WebSocket.js：

import store from '@/store' import { Message } from 'element-ui' var url = 'ws://127.0.0.1:9090/websocket/' var ws; var tt; var lockReconnect = false;//避免重复连接 var clientId = localStorage.getItem("clientId")//缓存中取出客户端id var websocket = { Init: function(clientId) { if ("WebSocket" in window) { ws = new WebSocket(url + clientId); } else if ("MozWebSocket" in window) { ws = new MozWebSocket(url + clientId); } else { console.log("您的浏览器不支持 WebSocket!"); return; } ws.onmessage = function(e) { console.log("接收消息:" + e.data) heartCheck.start() if(e.data=='ok'){//心跳消息不做处理 return } //messageHandle(e.data) } ws.onclose = function() { console.log("连接已关闭") Message({ message: '连接已关闭', type: 'error', }); reconnect(clientId); } ws.onopen = function() { console.log("连接成功") Message({ message: '连接成功', type: 'success', }); heartCheck.start(); } ws.onerror = function(e) { console.log("数据传输发生错误"); Message({ message: '数据传输发生错误', type: 'error', }); reconnect(clientId) } }, Send:function(sender,reception,body,flag){ let data = { sender:sender, reception:reception, body:body, flag:flag } let msg= JSON.stringify(data) console.log("发送消息："+msg) ws.send(msg) }, getWebSocket(){ return ws; }, getStatus() { if (ws.readyState == 0) { return "未连接"; } else if (ws.readyState == 1) { return "已连接"; } else if (ws.readyState == 2) { return "连接正在关闭"; } else if (ws.readyState == 3) { return "连接已关闭"; } } } export default websocket; //根据消息标识做不同的处理 function messageHandle(message) { let msg = JSON.parse(message) switch (msg.flag) { case 'command': console.log("指令消息类型") break; case 'inform': console.log("通知") break; default: console.log("未知消息类型") } } function reconnect(sname) { if(lockReconnect) { return; }; lockReconnect = true; //没连接上会一直重连，设置延迟避免请求过多 tt && clearTimeout(tt); tt = setTimeout(function () { console.log("执行断线重连...") websocket.Init(sname); lockReconnect = false; }, 4000); } //心跳检测 var heartCheck = { timeout: 1000 * 60 * 3, timeoutObj: null, serverTimeoutObj: null, start: function(){ console.log('开始心跳检测'); var self = this; this.timeoutObj && clearTimeout(this.timeoutObj); this.serverTimeoutObj && clearTimeout(this.serverTimeoutObj); this.timeoutObj = setTimeout(function(){ //这里发送一个心跳，后端收到后，返回一个心跳消息， //onmessage拿到返回的心跳就说明连接正常 console.log('心跳检测...'); ws.send("HeartBeat:"+ clientId ); self.serverTimeoutObj = setTimeout(function() { if(ws.readyState!=1){ ws.close(); } // createWebSocket(); }, self.timeout); }, this.timeout) } }

在App.vue文件中引入我们创建的WebSockt.js,在created方法中调用Init方法初始化WebSocket连接

<template> <div id="app"> <router-view /> </div> </template> <script> import websocket from '@/js/websocket' export default { name: 'App', created(){ localStorage.setItem("clientId","user-1") websocket.Init("user-1") } } </script>

由于所有页面都是在App.vue下面切换的，相当于App.vue是所有路由的父组件， 所以只需在App.vue中创建WebSocket即可实现全局创建