我们在是有websocekt的时候,有的时候由于某些原先websocket会断开连接,我们需要重现连接,该如何实现呢?这就需要我们仔细研究websocket的api的使用了。
首先我们要熟悉如下几个api
1、连接websocket的服务器的websocekt函数
2、websocekt断开后触发的onclose函数
由上面这两个函数就可以了,大致思路梳理一下:
1、首先开发一个函数websocketinit,函数主要是websocket的连接逻辑,监听信息,发送信息
2、监听onclose事件,onclose触发后重新执行websocketinit事件
思路有了大致代码如下:
function webSocketInit(service){//1、初始化ws//2、监听onclose事件 重新执行websocketInit函数}
具体代码如下:
//1.创建websocket客户端var host = window.location.host; #IPvar ut = "{{ ut }}";var wsServer = 'wss://' + host + '/notify/wxlogin?ut=' + ut;var timeConnect = 0;webSocketInit(wsServer);//socket初始化function webSocketInit(service) {var ws = new WebSocket(service);ws.onopen = function () {console.log("已连接TCP服务器");ws.send('Hello WebSockets!');};ws.onmessage = function (evt) {console.log('Received Message: ' + evt.data);data = JSON.parse(evt.data);console.log(data);if (data.status != 0) {alert("扫码错误");ws.close();}if (data.data.wx_login == 1) {//window.location.href = "http://" + host + "/admin"window.location.href = "/admin"}if (data.data.wx_login == 0) {//alert(data.data.message)$(".qr_code").css("display", "none");$(".tips").text(data.data.message)}console.log(data.data);};ws.onclose = function () {console.log('服务器已经断开');reconnect(service);};}// 重连function reconnect(service) {// lockReconnect加锁,防止onclose、onerror两次重连timeConnect++;console.log("第" + timeConnect + "次重连");// 进行重连setTimeout(function () {webSocketInit(service);}, 1000);}// 心跳 * 回应setInterval(function () {var websocket = new WebSocket(wsServer);websocket.send('');}, 1000 * 100)
