WebSocket is already in CLOSING or CLOSED state. 報(bào)錯(cuò)信息的解決方案

位置:首頁(yè) / 新聞中心 / 知識(shí)教程

知識(shí)教程 Admin 2024-02-22 18:00:47 1125

背景

近期在對(duì) 【GatewayWorker】的開(kāi)發(fā)過(guò)程中

注意到,當(dāng)客戶端長(zhǎng)時(shí)間沒(méi)有反應(yīng)時(shí),會(huì)發(fā)生 WebSocket 自動(dòng)斷開(kāi)的情況

在此,提供一個(gè)使用定時(shí)器的解決方案 …

【分析原因】


首先,對(duì)于這種報(bào)錯(cuò)信息的提示,我們小小百度下就很容易明白問(wèn)題所在

可以參考這一篇文章 : WebSocket斷開(kāi)原因、心跳機(jī)制防止自動(dòng)斷開(kāi)連接

其次,定位的知識(shí)點(diǎn)便是開(kāi)發(fā)手冊(cè)上的講解 —— 【心跳檢測(cè)】

【解決步驟】


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

// 心跳間隔

$gateway->pingInterval = 57;

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

$gateway->pingData = '';

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

var interval_timer = null;//計(jì)時(shí)器

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();

        }

    }

    // 開(kāi)啟定時(shí)器

    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 斷開(kāi): ' + e.code + ' ' + e.reason + ' ' + e.wasClean);

   };

  }

    /**

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

     */

    function init_start_timer() {

        //重置計(jì)數(shù)器

        timer_count = 0;

        if(interval_timer != null){

            clearInterval(interval_timer);

            interval_timer = null;

        }

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

    }

    /**

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

     */

    function myTimer() {

        //TODO 如果超過(guò)半小時(shí)沒(méi)有交互,則關(guān)閉計(jì)時(shí)器

        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);

        }

    }

        /**

     * 判斷當(dāng)前用戶是否 還在線

     */

    function isOnlineCurrUser() {

        if(ws){

            if(ws.readyState == WebSocket.OPEN){

                return true;

            }else {

                return false;

            }

        }else {

            return false;

        }

    }

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

image.png

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

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

image.png


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

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

15934152105 掃描微信