開發websocket應用，最難處理的就是斷線後的自動重連
現在GOFLY在線客服使用reconnect-websocket.js就可以非常簡單輕鬆的實現斷線重連
reconnect-websocket.js的機制是，當連接websocket服務的過程中，如果連不上，會自動進行指定次數的重試
如果連接成功後回調onOpen方法以後，會把重試次數清空，因此如果是連接已經成功，但是後端主動關閉連接，這個庫會不斷的進行連接
這個問題也一併處理了下
核心代碼在下面，是cdn引入的vue以及element-ui ，GOFLY也是這樣的前端架構
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<!-- Import style -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/element-plus/dist/index.css"
/>
<!-- Import Vue 3 -->
<script src="https://cdn.jsdelivr.net/npm/vue@next"></script>
<!-- Import component library -->
<script src="https://cdn.jsdelivr.net/npm/element-plus"></script>
</head>
<body>
<div id="app">
<el-button>${ message }</el-button>
</div>
<script src="../../js/reconnect-websocket.js"></script>
<script>
const App = {
compilerOptions: {
delimiters: ['${', '}'],
comments: true
},
data() {
return {
message: "Hello Element Plus",
apiHost:"ws://gofly.sopans.com/ws_visitor?visitor_id=efccd385-cdfe-41ed-8dfd-ab1faa732996&to_id=taoshihan",
websocket:null,
websocketOpenNum:0,
websocketMaxOpenNum:20,
websocketClosed:true,
};
},
methods: {
//初始化websocket連接
initWebsocketConn() {
this.websocket = new ReconnectingWebSocket(this.apiHost,null,{
debug:true
});//創建Socket實例
this.websocket.onmessage = this.onMessage;
this.websocket.onopen = this.onOpen;
this.websocket.onerror = this.onError;
this.websocket.onclose = this.onClose;
},
onOpen(){
console.log("ws:onOpen");
if(this.websocketOpenNum>=this.websocketMaxOpenNum){
this.websocket.close();
}
this.websocketOpenNum++;
this.websocketClosed=false;
this.ping();
},
onMessage(){
console.log("ws:onMessage");
},
onError(){
console.log("ws:onError");
},
onClose(){
console.log("ws:onClose");
this.websocketClosed=true;
},
//心跳包
ping(){
var _this=this;
setInterval(function () {
if(!_this.websocketClosed){
_this.websocket.send("ping");
}
},10000);
},
},
//屬性初始化
created(){
this.initWebsocketConn();
}
};
const app = Vue.createApp(App);
app.use(ElementPlus);
app.mount("#app");
</script>
</body>
</html>