学习使用js链接websocket服务断线重连的方法

学习使用js链接websocket服务断线重连的方法

    • 前言
    • 思路
    • 示例代码

前言

我们在是有websocekt的时候,有的时候由于某些原先websocket会断开连接,我们需要重现连接,该如何实现呢?这就需要我们仔细研究websocket的api的使用了。

思路

首先我们要熟悉如下几个api

1、连接websocket的服务器的websocekt函数

2、websocekt断开后触发的onclose函数

由上面这两个函数就可以了,大致思路梳理一下:
1、首先开发一个函数websocketinit,函数主要是websocket的连接逻辑,监听信息,发送信息
2、监听onclose事件,onclose触发后重新执行websocketinit事件

示例代码

//1.创建websocket客户端
var host = window.location.host; #IP
var 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)

你可能感兴趣的:(Websocket,Javascript,Jquery,html,websocket,javascript)