1. 建立socket.js類
; //建立的連線
let lockreconnect =
false
; //是否真正建立連線
lettimeout
= 60 * 1000; // 1分鐘一次心跳
let timeoutobj = null; //心跳心跳倒計時
let servertimeoutobj = null; //心跳倒計時
let timeoutnum = null; //斷開 重連倒計時
// 一進入就載入
initwebsocket();
// 初始化weosocket
function initwebsocket(
)else
}// 重新連線
function reconnect(
) lockreconnect =
true
; // 沒連線上會一直重連，設定延遲避免請求過多
timeoutnum && cleartimeout(timeoutnum)
; timeoutnum = settimeout(function(
), 5000);}
//重置心跳
function reset(
) start();
}//開啟心跳
function start(
)else
servertimeoutobj = settimeout(()=
>
, timeout)
;}, timeout);}
//連線成功事件
function websocketonopen(
)//連線失敗事件
function websocketonerror(e)
//連線關閉事件
function websocketclose(e)
function websocketsend(msg)
else
}// 接收伺服器返回的資料
function websocketonmessage(e));
let tourl = sessionstorage.getitem(
'url');
if(resdata.type ==
"init");
api.post(
"service/bind", para, 1).then(res =
>})
;}else
if(resdata.type ==
"msg_add"
)else
} // 收到伺服器資訊，心跳重置
reset();
}function eventstorage ()}
export
2.進入系統開啟websocket, 在main.js引入
import * as socket from '@/assets/js/socket.js'
vue.prototype.$socket
= socket;
"cgh-view"
>
}
"cgh-tab-view"
>
"cgh-msg-msg-on-read"
>
}
在index.html寫入:
"display:none;" id=
'msgaudiots'
>
"msg.***" />
vue使用 封裝websocket心跳包
這套 可以拿過去直接用 一些注意我會在下面 中加上注釋 謝謝支援 直接上 核心 這裡需要引入vuex import store from store let wsconnection 開啟websocket wsopen function e wsclose function e wsmsg fun...
前端封裝WebSocket
最近遇到的專案不少都要使用websocket，這兒我把它封裝起來，使用起來非常簡單。1.首先在專案裡面建立乙個websocketutils.js的檔案let farmwebsocket function this.ws null websocket例項 this.repeat 0 this.oncl...
websocket 重連封裝
websocket 類 方法和原生websocket保持一致 param url 連線位址 param isreconnect 是否包含重連機制 param options 配置引數 class ws this.opt this.lockreconnect false 重連鎖，避免頻繁重連 this...