开发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>