WebSocketとは — リアルタイム通信の仕組みとHTTPとの違い
WebSocketはHTTPとは異なる全二重通信プロトコルで、サーバーとクライアントが接続を維持したまま双方向にメッセージを送受信できます。チャット・株価のリアルタイム更新・ゲームサーバーなど低レイテンシが求められる場面で使われます。
WebSocketとHTTPの違い
HTTPはクライアントがリクエストを送りサーバーがレスポンスを返す一方向のやり取りです。サーバーから能動的にデータを送るにはポーリングやServer-Sent Eventsが必要です。WebSocketはHTTPのUpgradeヘッダーで接続を確立した後、ws://またはwss://スキームで持続的な双方向チャンネルを維持します。一度接続すると両方が任意のタイミングでメッセージを送れます。
ws:// と wss:// の違い
ws://はプレーンなWebSocket通信でHTTPに相当します。wss://はTLSで暗号化されたWebSocket通信でHTTPSに相当します。本番環境では必ずwss://を使い、通信内容の盗聴・改ざんを防ぐ必要があります。ブラウザはHTTPSページからws://接続をブロックする場合があります(混在コンテンツ制限)。
WebSocketのデバッグ方法
ブラウザのDevToolsではNetworkタブでWebSocket接続を確認できます。接続後にMessagesタブを開くと送受信したフレームをリアルタイムで追跡できます。WebSocket Testerではエコーサーバー(wss://echo.websocket.org)を使って送信した内容がそのまま返ってくることを確認でき、ライブラリなしでWebSocket APIの基本動作をテストできます。
JavaScript WebSocket APIの基本
ブラウザのWebSocket APIは`const ws = new WebSocket("wss://...")`で接続を開始します。`ws.onopen`で接続完了、`ws.onmessage`で受信、`ws.onerror`でエラーを処理します。`ws.send(data)`でメッセージを送り、`ws.close()`で切断します。readyStateプロパティでCONNECTING(0)・OPEN(1)・CLOSING(2)・CLOSED(3)の状態を確認できます。