JS WebSocket 切断理由とハートビートの仕組みの詳しい説明

JS WebSocket 切断理由とハートビートの仕組みの詳しい説明

1. 切断理由

WebSocket が切断される理由は多数あります。WebSocket が切断されたときにエラーを出力するのが最適です。

ws.onclose = 関数 (e) {
  console.log('Websocketが切断されました: ' + e.code + ' ' + e.reason + ' ' + e.wasClean)
  コンソール.log(e)
}

エラーステータスコード:

WebSocket が切断されると、CloseEvent がトリガーされます。CloseEvent は、接続が閉じられると WebSocket を使用してクライアントに送信されます。これは、WebSocket オブジェクトの onclose イベント リスナーで使用されます。 CloseEvent のコード フィールドは、WebSocket が切断された理由を示します。このフィールドから切断の理由を分析できます。

CloseEvent には注意が必要な 3 つのフィールドがあります。これら 3 つのフィールドを分析することで、通常は切断の理由を見つけることができます。

CloseEvent.code: codeはエラーコードで、整数型です。

CloseEvent.reason: 理由は切断の理由、文字列

CloseEvent.wasClean: wasClean は切断が正常であったかどうかを示すブール値です。通常、異常な切断が発生した場合、値は false になります。

ステータスコード名前説明する
0~999予約済みセグメント。使用されていません。
1000閉じる_通常正常終了。リンクが作成された目的が何であれ、リンクはタスクを正常に完了しました。
1001閉店サーバー エラーのため、またはブラウザーが接続を開始したページを離れるため、端末は離れます。
1002 CLOSE_PROTOCOL_ERRORプロトコル エラーのため接続が中止されました。
1003閉じる_サポートされていません受け入れられないデータ型が受信されたため、接続が終了しました (例: テキスト データのみを受け入れる端末でバイナリ データが受信された場合)。
1004予約済み。その意味は将来定義される可能性があります。
1005閉じる_ステータスなし予約済み。予期されたステータス コードが受信されなかったことを示します。
1006 CLOSE_異常予約済み。ステータス コードが予期されており、接続が異常終了した場合 (つまり、Close フレームが送信されなかった) に使用されます。
1007サポートされていないデータ指定された形式に準拠していないデータ (UTF-8 以外のデータを含むテキスト メッセージなど) を受信したため、接続が終了しました。
1008ポリシー違反プロトコルに準拠していないデータを受信したため、接続が切断されました。これは、ステータス コード 1003 および 1009 が適切でない状況で使用される一般的なステータス コードです。
1009閉じすぎます大きすぎるデータ フレームを受信したため、接続が終了しました。
1010拡張子がありませんクライアントはサーバーが 1 つ以上の拡張機能をネゴシエートすることを期待していましたが、サーバーがそれらを処理しなかったため、クライアントは切断されました。
1011内部エラークライアントが予期しない状況に遭遇し、要求を完了できなかったため、サーバーは切断されました。
1012サービスの再起動再起動のためサーバーが切断されました。
1013後でもう一度お試しくださいサーバーの過負荷などの一時的な理由によりサーバーが切断されたため、一部のクライアントが切断されました。
1014将来の使用のために WebSocket 標準によって予約されています。
1015 TLS ハンドシェイク保持。TLS ハンドシェイクを完了できなかったため (サーバー証明書を検証できなかったなど)、接続が閉じられたことを示します。
1016–1999将来の使用のために WebSocket 標準によって予約されています。
2000–2999 WebSocket 拡張機能で使用するために予約されています。
3000–3999ライブラリまたはフレームワークで使用できます。アプリケーションでは使用しないでください。先着順で IANA に登録できます。
4000~4999年アプリケーションで使用できます。

2. ハートビートを追加する

var lockReconnect = false; // 繰り返しの ws 接続を回避する var ws = null; // 現在のブラウザが WebSocket をサポートしているかどうかを判断します
var wsUrl = serverConfig.socketUrl;
createWebSocket(wsUrl); //wsに接続

関数createWebSocket(url) {
    試す{
        if('WebSocket' がウィンドウ内にある場合){
            ws = 新しい WebSocket(url);
        }
        イベントハンドルを初期化します。
    }キャッチ(e){
        再接続(url);
        コンソールログ(e);
    }     
}

関数initEventHandle() {
    ws.onclose = 関数(){
        再接続(wsUrl);
        console.log("llws 接続が閉じられました!"+new Date().toLocaleString());
    };
    ws.onerror = 関数(){
        再接続(wsUrl);
        console.log("llws 接続エラー!");
    };
    ws.onopen = 関数(){
        heartCheck.reset().start(); //ハートビート検出のリセット console.log("llws 接続が成功しました!"+new Date().toLocaleString());
    };
    ws.onmessage = function (event) { // メッセージが受信されると、ハートビート検出がリセットされます heartCheck.reset().start(); // メッセージが受信されると、現在の接続が正常であることを意味します console.log("llws はメッセージを受信しました:" + event.data);
        if(event.data!='ポン'){
            data = jsON.parse(event.data); とします。
        }
    };
}
// ウィンドウを閉じるイベントをリッスンします。ウィンドウが閉じられると、Websocket 接続をアクティブに閉じて、接続が切断される前にウィンドウが閉じられたときにサーバーが例外をスローするのを防ぎます。
window.onbeforeunload = 関数() {
    ws.close();
}  

関数 reconnect(url) {
    if(lockReconnect) 戻り値:
    ロック再接続 = true;
    setTimeout(function () { //接続に失敗した場合は、再接続を続けます。リクエストが多すぎるのを避けるために遅延を設定します。createWebSocket(url);
        ロック再接続 = false;
    }, 2000);
}

//ハートビート検出 var heartCheck = {
    timeout: 1000, // 1分ごとにハートビートを送信します timeoutObj: null,
    serverTimeoutObj: null、
    リセット: 関数(){
        タイムアウトをクリアします(this.timeoutObj);
        タイムアウトをクリアします(this.serverTimeoutObj);
        これを返します。
    },
    開始: 関数(){
        var self = this;
        this.timeoutObj = setTimeout(function(){
            //ここでハートビートが送信され、バックエンドがそれを受信すると、ハートビート メッセージが返されます。
            //onmessage は返されたハートビートを取得します。これは接続が正常であることを意味しますws.send("ping");
            console.log("ping!")
            self.serverTimeoutObj = setTimeout(function(){//一定時間後にリセットされない場合は、バックエンドがアクティブに切断したことを意味します ws.close(); //onclose が再接続を実行する場合は、ws.close() を実行する必要があります。再接続が直接実行されると、onclose がトリガーされ、2 回の再接続が発生します}, self.timeout)
        }, this.timeout)
    }
}
    //クライアントメッセージを受信した後に呼び出されるメソッド @OnMessage  
    パブリック void onMessage(String message, Session session) {  
        if (message.equals("ping")) {
        }それ以外{
        。 。 。 。
        }
   }

システムは、Websocket が 1 分ごとに自動的に切断されることを検出しました。多くのブログを検索しましたが、すべて nginx の proxy_read_timeout を設定するように言われていましたが、この時間は長すぎるため、サーバーのパフォーマンスに影響します。ハートビート パケット メソッドを使用すると、クライアントは 1 分ごとにサーバーに ping メッセージを自動送信し、サーバーは pong を返す必要があります。その問題は解決できます。

以上がJS WebSocket切断の原因とハートビートの仕組みについての詳しい説明です。JS WebSocket切断の原因とハートビートの仕組みについてさらに詳しく知りたい方は、123WORDPRESS.COMの他の関連記事もぜひご覧ください!

以下もご興味があるかもしれません:
  • JS WebSocketを使用して簡単なチャットを実装する方法
  • js は、Websocket 経由で mp3 録音のリアルタイム送信とシンプルな波形効果を実現します。
  • ネイティブNode.jsはWebSocketコード共有を使用する
  • node.js で Express ベースの Websocket を使用する方法
  • JSはWebSocketロングポーリングリアルタイムメッセージプロンプトの効果を実装します
  • nodejs+websocket リアルタイム チャット システムの改良版
  • Websocket+node.jsでリアルタイムチャットシステムの問題相談を実装
  • Node.js ベースの WebSocket 通信の実装
  • Node.js websocketはsocket.ioライブラリを使用してリアルタイムチャットルームを実装します
  • Javascript WebSocket の使用例 (簡潔な入門チュートリアル)

<<:  Linux に setup.py プログラムをインストールする方法

>>:  Linux に Python クローラー スクリプトを展開し、スケジュールされたタスクを設定する方法

推薦する

CSSクラス名の問題の詳細な説明

数字で始まる次の CSS クラス名は有効になりません。 .1番目{ 色: 赤; }有効な CSS ク...

CSS3のボックスサイズプロパティの興味深いボックスモデルについての簡単な説明

誰もがボックス モデルの構成を、内側から外側まで、コンテンツ、パディング、境界線、マージンについて知...

VMware12.0 インストール Ubuntu14.04 LTS チュートリアル

私は、デスクトップ バージョンとサーバー バージョンの両方で、仮想マシンにさまざまなイメージを何度も...

nginx 503 サービスが一時的に利用できない問題を解決する方法

最近、ウェブサイトを更新すると、503 Service Temporarily Unavailabl...

Linux サーバーと Windows システム間でファイルをアップロードおよびダウンロードする方法

背景: Linux サーバーのファイルのアップロードとダウンロード。 XShell+Xftp インス...

Alibaba Cloud MySQL スペースをクリーンアップする方法

今日、Alibaba Cloudからディスク警告通知を受け取りました。確認したところ、100Gのスペ...

MySQL DISTINCTの基本実装原理の詳細な説明

序文DISTINCT は、GROUP BY 操作の実装と非常によく似ていますが、GROUP BY の...

IDEA を使用して Tomcat を設定し、JSP ファイルを作成する方法

idea を使用して JSP ファイルを書き込む前に、jdk 環境 (ここでは説明しません) と対応...

MySQL における or、in、union、インデックス最適化の詳細な分析

この記事は、「1 分でインデックス作成スキルを学ぶ」という宿題から生まれました。注文ビジネス テーブ...

MySQLデータベーストリガーの詳細な説明

目次1 はじめに2 トリガーの紹介3 トリガーを作成する4 トリガーを表示5. トリガーの削除6 結...

この記事では、Vueのフロントエンドページングとバックエンドページングを実装する方法を説明します。

目次1: フロントエンドの手書きページング(データ量が少ない場合) 2: バックエンドのページング、...

CSS を使用してテクスチャ付きグラデーション背景画像を記述するためのサンプル コード

プロジェクト内のページの長さはおよそ2000px以上あり、背景画像にはテクスチャやグラデーションがあ...

Linux システムで MySQL データベースの解凍バージョンをインストールして構成する方法

1. ファイルを現在のディレクトリに解凍しますコマンド: tar -zxvf mysql....ta...

ルート権限なしでログインするためのDockerソリューション

docker コマンドを初めて使用する場合、権限の問題を確認するメッセージが表示されます。 unix...