ジャバスクリプトのWebSocket [遠位にプッシュ情報に+ハートビートサーバ]

まず、[役割]
の接続、WebSocketの心拍の持続可能性と安定性を維持するためには、この問題を解決することです。
第二に、[分析]
装置はネイティブのWebSocketは直ちにイベント用WebSocketを誘発しない、ネットワークから切断された場合に1が、フロントエンドは、現在の接続が切断されたかどうかを知ることができません。
図2は、我々はwebsocket.sendメソッドを使用し、ブラウザ接続が切断されています。OnCloseの方法がトリガされます。
図3に示すように、同一のサービスも後端用WebSocket原因] [遠位端は切断通知されません、それが必要であるリーディングエッジタイミングピングハートビートメッセージが送信され、メッセージのピンポンタイプの後端を切断することができる[]、メッセージを返しますフロントエンド接続が正常である知らせます。逆に切断。
第三に、[原則]
最もアクティブなパーティのフロントエンドには、時間がpingメッセージの方法は、ブラウザのハートビートメカニズムである送られました。
第四には、[差異]のWebSocketとソケット
のWebSocket H5は新しいプロトコルです。これは、ブラウザとサーバのデュアル通信を実装しています。まだ要求が完了したHTTPの助けを必要とハンドシェーク確立します。
HTTPプロトコルは、非永続的な、一方向のネットワークプロトコルです。接続を確立した後にのみ、サーバは、適切なデータを返すことができ、ブラウザが要求を行うことができます。ブラウザが長すぎる要求を送信し、リクエストヘッダー続ける：トラフィックの無駄、サーバリソースの
インスタントメッセージングサイトでは、Web QQなどとして、非常に一般的です。やり方一般的に使用されるポーリング、コメット技術の前に。
WebSocketを私たちはこの問題を解決することができます。サーバとブラウザはTCPは、データ伝送のために別の通信チャネルを確立し、HTTPハンドシェイクプロトコルによって操作のみを必要とします。
ハンドシェイク
のTCP接続を確立するために、ブラウザとサーバーのスリーウェイハンドシェイクを、それはコミュニケーションの基本であり、
成功した接続TCP後、httpプロトコルを介したブラウザ、バージョン情報がサーバー用WebSocketのサポートに送信され、
サーバが同じ洗濯物のhttpフィードバックデータを使用して、クライアントからのハンドシェイクリクエストを受信し、
クライアントは接続成功メッセージを受信しますデータ伝送のためのTCPチャネルを使用した後。
スリーウェイハンドシェイク
最初のハンドシェイク：サーバーへのクライアントの送信データは、確認のための待ち時間。
第二のハンドシェイク：サーバーが接続要求を確認するために、クライアントにデータを、再送信確認データを受け取ります。
サードハンドシェイク：クライアントはサービス終了の確認を受け、サーバーにデータを送信するには、接続を確立するために語りました。
Q：なぜは、3ウェイハンドシェイクのですか？
A：接続を確立するためのスリーウェイハンドシェイク、両当事者が通信データを送受信する能力を持っていることを保証します。
安全でないは二回、4回は必要ありません。
ジャバスクリプトのWebSocket [遠位にプッシュ情報に+ハートビートサーバ]
四つはウェービング
最初の波を、クライアントがサービスの閉鎖端に関連するデータを送信し、待機状態に入り、
第二波、サーバが閉じた関連データを受信した後、クライアントに肯定応答シーケンス番号を送信し、閉鎖にサーバ待機状態;
第三の波、サーバはクライアントに、クライアント関連のデータに再び閉じ、サーバーを送信し、LAST_ACK状態に入ります。
第四の波：クライアントを閉じるには、TIME_WAIT状態に、クライアントにデータ・サーバを受信し、サーバー番号に確認応答を送信します。サーバーは、最終的にシャットダウンします。
ジャバスクリプトのWebSocket [遠位にプッシュ情報に+ハートビートサーバ]
ソケットは、実際のプロトコルが、より簡単に使用するTCPまたはUDPの抽象レベルではありません。アプリケーション層とトランスポート層との間のインタフェースのセットです。2つのホストが通信するとき、ソケットを介して接続されている必要があり、ソケットTCP接続はTCP / IPプロトコルを使用して確立されます。TCP接続が基本的なIPプロトコルの詳細依存している、IPプロトコル接続は、下のリンク層のレベルに依存します。
5つの例

客户端websocket示例：
//1、申请一个Websocket对象，参数是需要连接服务端的地址，同 HTTP 协议开头一样，WebSocket 协议的 URL 使用 ws://开头，另外安全的 WebSocket 协议使用 wss://开头。
var ws = new WebSocket(“ws://echo.websocket.org”); 
//WebSocket 对象一共支持四个消息 onopen, onmessage, onclose 和 onerror
 ws.onopen = function(){ws.send(“Test!”); }; 
 ws.onmessage = function(evt){console.log(evt.data);ws.close();}; 
 ws.onclose = function(evt){console.log(“WebSocketClosed!”);}; 
 ws.onerror = function(evt){console.log(“WebSocketError!”);};

ブラウザとサーバーの接続が成功すると、それはああのニュースをonopトリガーする、
それが失敗した場合、それはONERRORメッセージをトリガします。
ブラウザは、メッセージのonMessageサーバートリガーから送信されたデータを受信すると
、ブラウザがサーバーが接続をクローズする要求を送信し受信すると、メッセージOnCloseの引き金となります。
彼らはステップのコールバックメソッドを取る前に、すべての操作がトリガーされます。

六バックエンドコード

//开启WebSocket支持
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.server.standard.ServerEndpointExporter;

@Configuration
public class WebSocketConfig {
        @Bean
        public ServerEndpointExporter serverEndpointExporter() {
                return new ServerEndpointExporter();
        }
}

import org.springframework.stereotype.Component;
import javax.websocket.*;
import javax.websocket.server.ServerEndpoint;

/**
 * Frozen
 * 2020年3月30日21:22:55
 */
@ServerEndpoint("/redant")
@Component
public class FrozenTest {
        /**
         * 正常连接
         * @throws Exception
         */
     @OnOpen
        public void onOpen(Session session) throws Exception {
                sendMessage(session, "我还是从前哪个少年");
                Thread.sleep(10000);//10秒后再发个
                sendMessage(session, "嗨，HoYL，这是10秒之后的服务器推送数据！");
                 Thread.sleep(5000);//10秒后再发个
    for (int i = 0; i < 100; i++) {
        Random random = new Random();
        sendMessage(session, String.valueOf(Math.random()*1000));
        Thread.sleep(5000);//10秒后再发个
    }
        }
        /**
         * 实现服务器主动推送
         */
        public void sendMessage(Session session, String message) throws Exception {
                session.getBasicRemote().sendText(message);
        }
}

七、テストコードのフロントエンド

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>心跳测试</title>
        <script type="text/javascript" src="frozenjs/websocket.js" ></script>
        <script type="text/javascript" src="frozenjs/jquery-1.10.2.min.js" ></script>
    </head>
    <body>
        <div> 
            <span id="suppose" style="color: red; font-weight: bolder;"></span>
        </div>
    </body>
    <script>
        var url = "ws://127.0.0.1:8088/rest/2020/redant";
        var ws = new WebSocket(url);
        ws.onclose = function (e) {
        };
        ws.onerror = function (e) {
        };

        ws.onopen = function () {
            alert("与服务器连接成功！");
        };
        ws.onmessage = function (event) {
            $("#suppose").text(event.data);
        }

    </script>
</html>

八、図
1、サーバ・クライアントハンドシェークの成功

ジャバスクリプトのWebSocket [遠位にプッシュ情報に+ハートビートサーバ]

2、最初のデータ・サーバプッシュ
ジャバスクリプトのWebSocket [遠位にプッシュ情報に+ハートビートサーバ]

図3に示すように、第2のサーバプッシュデータ
ジャバスクリプトのWebSocket [遠位にプッシュ情報に+ハートビートサーバ]

長い待ち時間に従ってください4、
ジャバスクリプトのWebSocket [遠位にプッシュ情報に+ハートビートサーバ]

ジャバスクリプトのWebSocket [遠位にプッシュ情報に+ハートビートサーバ]

おすすめ