• 背景
    近期在对 【GatewayWorker】的开发过程中
    注意到,当客户端长时间没有反应时,会发生 WebSocket 自动断开的情况
    在此,提供一个使用定时器的解决方案 …

【分析原因】

【解决步骤】

  • 第一步、首先,根据前面的手册介绍,我在服务端补充了如下的代码:

    1
    2
    3
    4
    // 心跳间隔
    $gateway->pingInterval = 57;
    $gateway->pingNotResponseLimit = 1; // 代表客户端必须定时发送心跳给服务端
    $gateway->pingData = '';
  • 第二步、在客户端创建 连接及定时器核心代码如下:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    var interval_timer = null;//计时器
    var timer_count = 0;
    var wsUrl = "wss://xxxeee.com/ssssmn";
    var ws;

    createOrConnectWebSocket(); // 创建websocket
    /**
    * 创建websocket或掉线重连
    */
    function createOrConnectWebSocket(){
    if(!ws){
    //TODO ws 不存在
    ws = new WebSocket(wsUrl);
    websocketInit();
    }else {
    if (!isOnlineCurrUser()){
    ws = null;
    createOrConnectWebSocket();
    }
    }
    // 开启定时器
    init_start_timer();
    }

    /**
    * websocket 的初始化
    */
    function websocketInit(){
    ws.onmessage = function (e) {
    var message = eval('(' + e.data + ')');
    switch (message.type) {
    case 'init':
    changeNoReadLogs();
    var bind = '{"type":"bind","from_id":"' + from_id + '","to_id":"' + to_id + '"}';
    ws.send(bind);
    message_load();
    break;
    ....... 具体代码省略......
    }
    };
    ws.onclose = function (e) {
    console.log('websocket 断开: ' + e.code + ' ' + e.reason + ' ' + e.wasClean);
    };
    }

    /**
    * 设置一个 30秒的轮询监听方法,避免页面关闭
    */
    function init_start_timer() {
    //重置计数器
    timer_count = 0;
    if(interval_timer != null){
    clearInterval(interval_timer);
    interval_timer = null;
    }
    interval_timer = setInterval(function(){ myTimer() }, 30000);
    }
    /**
    *定时器具体实现方法
    */
    function myTimer() {
    //TODO 如果超过半小时没有交互,则关闭计时器
    if(timer_count >= 1800){
    clearInterval(interval_timer);
    }else {
    timer_count += 30;
    var online = '{"type":"timer","from_id":"' + from_id + '","to_id":"' + to_id + '"}';
    ws.send(online);
    console.log('timer_count',timer_count);
    }
    }
    /**
    * 判断当前用户是否 还在线
    */
    function isOnlineCurrUser() {
    if(ws){
    if(ws.readyState == WebSocket.OPEN){
    return true;
    }else {
    return false;
    }
    }else {
    return false;
    }
    }
  • 然后,注意在发送消息时,
    比如点击发送键时首先判断用户是否在线,如果不在线进行重连或者提示信息


同时,注意当顺利发送或接收到消息时,要进行初始化定时器操作,保证重新计数!


  • 第三步、测试效果 (基本解决了我的需求)
    在发送消息的位置,调用 "createOrConnectWebSocket()" 方法.