WebSocketのデバッグ

投稿日: 2022-10-24 2022-10-24
タグ: Programming, WebSockets

1. 概要

WebSocket は、クライアントとサーバー間のイベント駆動型の双方向の全二重接続を提供します。 WebSocket通信には、ハンドシェイク、メッセージング（メッセージの送受信）、および接続の終了が含まれます。

このチュートリアルでは、ブラウザーやその他の一般的なツールを使用してWebSocketをデバッグする方法を学習します。

2. WebSocketの構築

まず、株式相場表示の更新をクライアントにプッシュするWebSocketサーバーを構築することから始めましょう。

2.1. Mavenの依存関係

まず、 SpringWebSocketの依存関係を宣言しましょう。

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-websocket</artifactId>
    <version>2.5.4</version>
</dependency>

2.2. スプリングブート構成

次に、WebSocketサポートを有効にするために必要な@Configurationを定義しましょう。

@Configuration
@EnableWebSocketMessageBroker
public class WebsocketConfiguration implements WebSocketMessageBrokerConfigurer {
    @Override
    public void configureMessageBroker(MessageBrokerRegistry config) {
        config.enableSimpleBroker("/topic");
        config.setApplicationDestinationPrefixes("/app");
    }
    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        registry.addEndpoint("/stock-ticks").withSockJS();
    }
}

この構成は、メッセージブローカーベースのWebSocketを提供し、STOMPエンドポイントを登録することに注意してください。

さらに、モックストックの更新をサブスクライバーに送信するコントローラーを作成しましょう。

private SimpMessagingTemplate simpMessagingTemplate;
 
public void sendTicks() { 
    simpMessagingTemplate.convertAndSend("/topic/ticks", getStockTicks());
}

2.3. クライアント–ユーザーインターフェイス

サーバーからの更新を表示するHTML5ページを作成しましょう。

<div class="spinner-border text-primary" role="status">
    <span class="visually-hidden">Loading ...</span>
</div>

次に、SockJSを使用してWebSocketサーバーに接続しましょう。

function connect() {
    let socket = new SockJS('/stock-ticks');
    stompClient = Stomp.over(socket);
    stompClient.connect({}, function (frame) {
        stompClient.subscribe('/topic/ticks', function (ticks) {
            ...
        });
    });
}

ここでは、SockJSを使用してWebSocketを開き、トピック / topic / ticksをサブスクライブします。最終的に、サーバーがメッセージを生成すると、クライアントはメッセージを消費してユーザーインターフェイスに表示します。。

2.4. デモンストレーション

サーバーを起動して、ブラウザでアプリケーションを開きましょう。

mvn spring-boot:run

その結果、ページの更新やサーバーのポーリングなしで、株価が3秒ごとに変化することがわかります。

[IE9の場合]> <![endif] ビデオプレーヤー

メディアエラー：フォーマットがサポートされていないか、ソースが見つかりません

ファイルのダウンロード：https：//www.baeldung.com/wp-content/uploads/2021/11/Websocket-2.mp4？_ = 1

00：00

これまで、WebSocketでストックティックを受け取るアプリケーションを構築してきました。次に、このアプリケーションをデバッグする方法を学びましょう。

3. Mozilla Firefox

Mozilla Firefoxには、他のWeb開発ツールとともにWebSocketインスペクターがあります。 Firefoxでは、いくつかの方法で開発者ツールを有効にできます。

WindowsおよびLinux： Ctrl + Shift + IまたはF12またはアプリケーションメニュー →その他のツール→Web開発ツール
macOS： Cmd + Opt + I

次に、ネットワークモニター→ WS をクリックして、WebSocketペインを開きます。

WebSocketインスペクターをアクティブにして、さらに詳しく見ていきましょう。

3.1. ハンドシェーク

FirefoxでURLhttp：// localhost：8080を開きます。 開発者ツールを開くと、HTTPハンドシェイクが表示されます。リクエストをクリックして、ハンドシェイクを分析します。

ヘッダータブの下に、プロトコルのアップグレードやその他のWebSocketヘッダーを含むリクエストヘッダーとレスポンスヘッダーが表示されます。

3.2. メッセージ交換

続いてハンドシェイク後、メッセージ交換が始まります。応答タブをクリックして、メッセージ交換を表示します。

Response ペインで、クライアントリクエストとサーバーの応答を表します。

3.3. 接続の終了

WebSocketでは、クライアントまたはサーバーのいずれかが接続を閉じることができます。

まず、クライアント側の接続終了をエミュレートしましょう。 HTMLページの切断ボタンをクリックして、応答タブを表示します。

ここでは、クライアントからの接続終了要求が表示されます。

次に、サーバーをシャットダウンして、サーバー側の接続の閉鎖をエミュレートしましょう。サーバーに到達できないため、接続が閉じます。

RFC6455 –WebSocketプロトコルは以下を指定します。

1000 –通常の閉包
1001 –サーバーがダウンしているか、ユーザーがページから移動しました

4. グーグルクローム

Google Chrome には、Firefoxに似た開発者ツールの一部であるWebSocketインスペクターがあります。 WebSocketインスペクターをアクティブ化するには、いくつかの方法があります。

WindowsおよびLinux： Ctrl + Shift + IまたはCtrl + Shift + JまたはF12またはアプリケーションメニュー→その他のツール→開発者ツール
macOS： Cmd + Opt + I

次に、ネットワーク→ WS パネルをクリックして、WebSocketペインを開きます。

4.1. ハンドシェーク

次に、ChromeでURL http：// localhost：8080 を開き、開発者ツールでリクエストをクリックします。

ヘッダータブの下に、ハンドシェイクを含むすべてのWebSocketヘッダーがあります。

4.2. メッセージ交換

次に、クライアントとサーバー間のメッセージ交換を確認しましょう。開発者ツールで、メッセージタブをクリックします。

Firefoxと同様に、 CONNECT リクエスト、 SUBSCRIBE リクエスト、MESSAGEエクスチェンジなどのメッセージ交換を表示できます。

4.3. 接続の終了

最後に、クライアント側とサーバー側の両方の接続終了をデバッグします。ただし、最初に、クライアント側の接続を閉じましょう。

クライアントとサーバー間の接続が正常に終了していることがわかります。次に、接続を終了するサーバーをエミュレートしましょう。

接続が正常に終了すると、クライアントとサーバー間のメッセージ交換が終了します。

5. Wireshark

Wireshark は、最も人気があり、広範で、広く使用されているネットワークプロトコルスニッフィングツールです。次に、Wiresharkを使用してWebSocketトラフィックをスニッフィングして分析する方法を見てみましょう。

5.1. トラフィックのキャプチャ

他のツールとは異なり、Wiresharkのトラフィックをキャプチャして分析する必要があります。それでは、トラフィックのキャプチャから始めましょう。

Windowsでは、Wiresharkを開くと、ライブネットワークトラフィックで利用可能なすべてのネットワークインターフェイスが表示されます。したがって、ネットワークパケットをキャプチャするための正しいネットワークインターフェイスを選択することが不可欠です。

通常、WebSocketサーバーがlocalhost（127.0.0.1）として実行されている場合、ネットワークインターフェイスはループバックアダプターになります。

次に、パケットのキャプチャを開始するには、インターフェイスをダブルクリックします。正しいインターフェースが選択されると、プロトコルに基づいてパケットをさらにフィルタリングできます。

Linux で、tcpdumpコマンドを使用してネットワークトラフィックをキャプチャします。たとえば、シェルターミナルを開き、次のコマンドを使用して、パケットキャプチャファイルwebsocket.pcapを生成します。

tcpdump -w websocket.pcap -s 2500 -vv -i lo

次に、Wiresharkを使用してwebsocket.pcapファイルを開きます。

5.2. ハンドシェーク

これまでにキャプチャされたネットワークパケットを分析してみましょう。 最初に、最初のハンドシェイクはHTTPプロトコルで行われるため、httpプロトコルのパケットをフィルタリングしてみましょう。

次に、ハンドシェイクの詳細を表示するには、パケットを右クリックします→フォロー→ TCPストリーム：

5.3. メッセージ交換

最初のハンドシェイクの後、クライアントとサーバーはwebsocketプロトコルを介して通信することを思い出してください。それでは、websocketのパケットをフィルタリングしましょう。表示されている残りのパケットは、接続とメッセージ交換を示しています。

5.4. 接続の終了

まず、クライアント側の接続終了をデバッグしましょう。 Wiresharkのキャプチャを開始し、HTMLページの切断ボタンをクリックして、ネットワークパケットを確認します。

同様に、サーバー側の接続終了をエミュレートしましょう。まず、パケットキャプチャを開始してから、WebSocketサーバーをシャットダウンします。

6. 郵便配達員

現在のところ、PostmanによるWebSocketのサポートはまだベータ版です。ただし、WebSocketのデバッグには引き続き使用できます。

Postmanを開き、 Ctrl + NまたはNew→WebSocketリクエスト：を押します。

次に、サーバーURLの入力テキストボックスにWebSocket URLを入力し、接続をクリックします。

6.1. ハンドシェーク

接続が成功したら、メッセージセクションで、接続要求をクリックしてハンドシェイクの詳細を表示します。

6.2. メッセージ交換

それでは、クライアントとサーバー間のメッセージ交換を確認しましょう。

クライアントがトピックにサブスクライブすると、クライアントとサーバー間のメッセージフローを確認できます。

6.3. 接続の終了

さらに、クライアントとサーバーの両方で接続の終了をデバッグする方法を見てみましょう。まず、Postmanの切断ボタンをクリックして、クライアント側からの接続を閉じます。

同様に、サーバー接続の終了を確認するには、サーバーをシャットダウンします。

7. SpringWebSocketクライアント

最後に、SpringベースのJavaクライアントを使用してWebSocketをデバッグしましょう。

WebSocketClient client = new StandardWebSocketClient();
WebSocketStompClient stompClient = new WebSocketStompClient(client);
stompClient.setMessageConverter(new MappingJackson2MessageConverter());
StompSessionHandler sessionHandler = new StompClientSessionHandler();
stompClient.connect(URL, sessionHandler);

これにより、WebSocketクライアントが作成され、STOMPクライアントセッションハンドラーが登録されます。

次に、StompSessionHandlerAdapterを拡張するハンドラーを定義しましょう。意図的に、 StompSessionHandlerAdapter クラスは、メソッドgetPayloadTypeを除いて実装を提供しません。したがって、これらのメソッドに意味のある実装を与えましょう。

public class StompClientSessionHandler extends StompSessionHandlerAdapter {
 
    @Override
    public void afterConnected(StompSession session, StompHeaders connectedHeaders) {
        session.subscribe("/topic/ticks", this);
    }
 
    // other methods ...
}

次に、このクライアントを実行すると、次のようなログが表示されます。

16:35:49.135 [WebSocketClient-AsyncIO-8] INFO StompClientSessionHandler - Subscribed to topic: /topic/ticks
16:35:50.291 [WebSocketClient-AsyncIO-8] INFO StompClientSessionHandler - Payload -> {MSFT=17, GOOGL=48, AAPL=54, TSLA=73, HPE=89, AMZN=-5}

ログには、接続とメッセージ交換が表示されます。さらに、クライアントの稼働中に、Wiresharkを使用してWebSocketパケットをスニッフィングできます：

8. 結論

このチュートリアルでは、最も人気があり広く使用されているツールのいくつかを使用してWebSocketをデバッグする方法を学びました。 WebSocketの使用と人気が日ごとに高まっているため、デバッグツールの数が増え、より高度になることが期待できます。

いつものように、完全なソースコードはGitHubでから入手できます。

getdocs

13036