WebSocket is already in CLOSING or CLOSED state. 報錯信息的解決方案

位置:首頁 / 新聞中心 / 知識教程

知識教程 Admin 2024-02-22 18:00:47 1171

背景

近期在對 【GatewayWorker】的開發(fā)過程中

注意到,當客戶端長時間沒有反應(yīng)時,會發(fā)生 WebSocket 自動斷開的情況

在此,提供一個使用定時器的解決方案 …

【分析原因】


首先,對于這種報錯信息的提示,我們小小百度下就很容易明白問題所在

可以參考這一篇文章 : WebSocket斷開原因、心跳機制防止自動斷開連接

其次,定位的知識點便是開發(fā)手冊上的講解 —— 【心跳檢測】

【解決步驟】


第一步、首先,根據(jù)前面的手冊介紹,我在服務(wù)端補充了如下的代碼:

// 心跳間隔

$gateway->pingInterval = 57;

$gateway->pingNotResponseLimit = 1; // 代表客戶端必須定時發(fā)送心跳給服務(wù)端

$gateway->pingData = '';

第二步、在客戶端創(chuàng)建 連接及定時器核心代碼如下:

var interval_timer = null;//計時器

var timer_count = 0;

var wsUrl = "wss://xxxeee.com/ssssmn";

var ws;


createOrConnectWebSocket();// 創(chuàng)建websocket

/**

 * 創(chuàng)建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);

   };

  }

    /**

     * 設(shè)置一個 30秒的輪詢監(jiān)聽方法,避免頁面關(guān)閉

     */

    function init_start_timer() {

        //重置計數(shù)器

        timer_count = 0;

        if(interval_timer != null){

            clearInterval(interval_timer);

            interval_timer = null;

        }

        interval_timer = setInterval(function(){ myTimer() }, 30000);

    }

    /**

     *定時器具體實現(xiàn)方法

     */

    function myTimer() {

        //TODO 如果超過半小時沒有交互,則關(guān)閉計時器

        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;

        }

    }

然后,注意在發(fā)送消息時,
比如點擊發(fā)送鍵時首先判斷用戶是否在線,如果不在線進行重連或者提示信息

image.png

同時,注意當順利發(fā)送或接收到消息時,要進行初始化定時器操作,保證重新計數(shù)!

第三步、測試效果 (基本解決了我的需求)
在發(fā)送消息的位置,調(diào)用 "createOrConnectWebSocket()" 方法.

image.png


以上就是“WebSocket is already in CLOSING or CLOSED state. 報錯信息的解決方案”的詳細內(nèi)容,更多請關(guān)注木子天禾科技其它相關(guān)文章!

以上就是“WebSocket is already in CLOSING or CLOSED state. 報錯信息的解決方案”的詳細內(nèi)容,更多請關(guān)注木子天禾科技其它相關(guān)文章!

15934152105 掃描微信