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即可實現全局創建