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

【分析原因】

【解决步骤】

  • 第一步、首先,根据前面的手册介绍,我在服务端补充了如下的代码:
// 心跳间隔
$gateway->pingInterval = 57;
$gateway->pingNotResponseLimit = 1; // 代表客户端必须定时发送心跳给服务端
$gateway->pingData = '';
  • 第二步、在客户端创建 连接及定时器核心代码如下:
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()" 方法.

【参考文章】

Logo

权威|前沿|技术|干货|国内首个API全生命周期开发者社区

更多推荐