WebSocketテスター

ツール概要：WebSocketテスター

WebSocketテスターは、ToolMi 上でリアルタイムサービスを検証できるブラウザベースのクライアントです。エンドポイントを入力してすぐに接続し、各フレームのタイムスタンプ・状態・方向を確認できます。

WebSocketテスターとは？

WebSocketテスターはルールや接続を素早くテストして原因切り分けを支援します。

使い方

1. ルールやパラメータを入力します。
2. サンプルや接続先を指定します。
3. 結果を確認して調整します。

よくある利用シーン

• リリース前の確認
• ルールや境界値の検証
• 連携時の素早い確認

❓ よくある質問

Q1: 期待と違う結果？
A: 入力とオプションを確認してください。

Q2: テスト失敗？
A: ケースを簡略化して切り分けてください。

Q3: 保存方法は？
A: 結果をコピーするかスクリーンショットを取ってください。

✨ 主な機能

• 🔄 リアルタイム状態監視: ハンドシェイクの進行、readyState の変化、クローズコードと理由を追跡。
• 🧾 構造化ログ: すべてのフレームを時刻・方向・内容と一緒に記録し、最新エントリをリスト上部に表示。
• 🧩 バイナリ検出: バイナリフレームを自動で識別し、必要に応じてブラウザの DevTools から生データを取得可能。
• ⚙️ 柔軟なエディタ: 自動スクロールや送信後クリアを切り替えて、素早い検証と反復調整の両方に対応。
• 🌐 多言語ヘルプ: 表示中の言語に合わせたガイドで、チーム全体が同じ手順を共有。

🚀 クイックスタート

1. サーバーエンドポイント に ws:// または wss:// の URL を貼り付けます。
2. ws:///wss:// に切り替え ボタンでアドレスを再入力せずにプロトコルを変更できます。
3. （任意）サーバーがサブプロトコルを要求する場合は、カンマ区切りで指定します。
4. 接続 をクリックし、ステータスバッジでハンドシェイク完了を確認します。
5. メッセージ欄に送信したい内容を入力し、メッセージを送信 を押してフレームを送出します。
6. ログパネル上部の 送信・受信 エントリを確認し、履歴を精査したいときは自動スクロールを停止します。

📖 使用例

エコーサーバーでの確認

エンドポイント: wss://echo.websocket.events
メッセージ: {"action":"ping","source":"toolmi"}

サーバーが同じ内容を返すため、送信 と 受信 のログに同じ JSON が表示されます。

サブプロトコル交渉

エンドポイント: wss://example.com/chat
サブプロトコル: chat.v2, json
メッセージ: {"type":"join","room":"support"}

chat.v2 が受理されると、そのプロトコルで継続的にメッセージ交換が行えます。

ペイロードの反復テスト

1. 送信後に入力をクリアする のチェックを外します。
2. 最初の JSON を送信します。
3. 必要なフィールドだけ修正し、再度送信します。
4. 最新ログでレスポンスを比較しながら調整します。

🎯 活用シナリオ

1. WebSocket API の連携テスト

認証フローやチャンネル購読、メッセージ形式を本番実装前に検証できます。

2. リアルタイム機能のデモ

追加ツールなしでテスト環境に接続し、リアルタイムのデータストリームを関係者に見せられます。

3. プロトコル学習

クローズコードやバイナリフレーム、サブプロトコルの挙動を実際に観察しながら学習できます。

📘 ログの見方

• 情報 – 接続試行、ハンドシェイク成功、手動切断、サーバー側の理由など。
• 送信 – エディタからサーバーへ送ったフレーム。
• 受信 – サーバーから返ってきたフレーム。テキストはそのまま表示されます。
• エラー – URL ミス、TLS 問題、ネットワーク切断などブラウザが検知した異常。

🛠️ トラブルシューティング

• ブラウザは WebSocket 握手にカスタムヘッダーを追加できません。同一オリジンで試すか、デスクトップクライアントを利用してください。
• クローズコード 1006 は握手途中の切断を示すことが多いので、プロキシ・ファイアウォール・証明書を確認してください。
• 接続が拒否された場合は、未知のサブプロトコルを削除するか、バックエンドに期待値を確認しましょう。
• バイナリフレームの内容が必要なときは、ブラウザの DevTools 内 Network タブから保存できます。

💡 追加ヒント

• JSON フォーマッタや JWT デコーダーと組み合わせると、テスト用ペイロードを素早く準備できます。
• メッセージが多い場面では自動スクロールをオンにし、スクリーンショットや比較が必要なときはオフにします。
• エンドポイントとペイロードの例を共有すれば、チームメンバーも同じ検証手順を再現できます。