我们在是有websocekt的时候,有的时候由于某些原先websocket会断开连接,我们需要重现连接,该如何实现呢?这就需要我们仔细研究websocket的api的使用了。
    首先我们要熟悉如下几个api
    1、连接websocket的服务器的websocekt函数
    2、websocekt断开后触发的onclose函数
    由上面这两个函数就可以了,大致思路梳理一下:
    1、首先开发一个函数websocketinit,函数主要是websocket的连接逻辑,监听信息,发送信息
    2、监听onclose事件,onclose触发后重新执行websocketinit事件
    思路有了大致代码如下:

    1. function webSocketInit(service){
    2. //1、初始化ws
    3. //2、监听onclose事件 重新执行websocketInit函数
    4. }

    具体代码如下:

    1. //1.创建websocket客户端
    2. var host = window.location.host; #IP
    3. var ut = "{{ ut }}";
    4. var wsServer = 'wss://' + host + '/notify/wxlogin?ut=' + ut;
    5. var timeConnect = 0;
    6. webSocketInit(wsServer);
    7. //socket初始化
    8. function webSocketInit(service) {
    9. var ws = new WebSocket(service);
    10. ws.onopen = function () {
    11. console.log("已连接TCP服务器");
    12. ws.send('Hello WebSockets!');
    13. };
    14. ws.onmessage = function (evt) {
    15. console.log('Received Message: ' + evt.data);
    16. data = JSON.parse(evt.data);
    17. console.log(data);
    18. if (data.status != 0) {
    19. alert("扫码错误");
    20. ws.close();
    21. }
    22. if (data.data.wx_login == 1) {
    23. //window.location.href = "http://" + host + "/admin"
    24. window.location.href = "/admin"
    25. }
    26. if (data.data.wx_login == 0) {
    27. //alert(data.data.message)
    28. $(".qr_code").css("display", "none");
    29. $(".tips").text(data.data.message)
    30. }
    31. console.log(data.data);
    32. };
    33. ws.onclose = function () {
    34. console.log('服务器已经断开');
    35. reconnect(service);
    36. };
    37. }
    38. // 重连
    39. function reconnect(service) {
    40. // lockReconnect加锁,防止onclose、onerror两次重连
    41. timeConnect++;
    42. console.log("第" + timeConnect + "次重连");
    43. // 进行重连
    44. setTimeout(function () {
    45. webSocketInit(service);
    46. }, 1000);
    47. }
    48. // 心跳 * 回应
    49. setInterval(function () {
    50. var websocket = new WebSocket(wsServer);
    51. websocket.send('');
    52. }, 1000 * 100)