WebSocket

WebSocket とは

WebSocket は、HTTP のハンドシェイクで接続を確立した後、クライアントとサーバー間で双方向のリアルタイム通信を行うプロトコル (RFC 6455) である。HTTP のリクエスト/レスポンスモデルと異なり、サーバーからクライアントへ能動的にデータを送信できる。

HTTP との比較

HTTP との主な違いを以下に比較する。

観点	HTTP	WebSocket
方向	リクエスト/レスポンス	双方向
接続	リクエストごとに開閉	持続的
オーバーヘッド	ヘッダーが毎回付く	初回ハンドシェイクのみ
プロトコル	http:// / https://	ws:// / wss://
用途	REST API、Web ページ	チャット、ゲーム、通知

ハンドシェイク

ハンドシェイクを図で示す。

クライアント → HTTP Upgrade リクエスト → サーバー
  GET /chat HTTP/1.1
  Upgrade: websocket
  Connection: Upgrade

サーバー → 101 Switching Protocols → クライアント
  HTTP/1.1 101 Switching Protocols
  Upgrade: websocket

→ 以降は WebSocket フレームで双方向通信

クライアント側

クライアント側のコード例を示す。

const ws = new WebSocket('wss://api.example.com/ws');

ws.onopen = () => {
  ws.send(JSON.stringify({ type: 'subscribe', channel: 'notifications' }));
};

ws.onmessage = (event) => {
  const data = JSON.parse(event.data);
  console.log('Received:', data);
};

ws.onclose = (event) => {
  console.log(`Closed: ${event.code} ${event.reason}`);
  // 再接続ロジック
};

SSE との使い分け

分かれ目は、クライアントからも送る必要があるかどうかである。

用途	選ぶ方式	理由
チャットやゲームで双方向にやり取りする	WebSocket	同じ接続でクライアントからも送信できる。サーバーからの一方向しか流れない方式では、操作を送るための経路を別に用意することになる
通知やログをサーバーから流すだけ	SSE	受け取り専用なら双方向の持続接続は要らず、ws:// への切り替えを挟まず HTTP のままで扱える
ダッシュボードの更新	送信方向で決める	数値を表示し直すだけなら SSE で足りる。画面から購読するチャンネルを切り替えるなら、クライアント発の送信ができる WebSocket にする

再接続の実装

WebSocket は接続が切れることがある。指数バックオフで再接続する。

function connect(url: string, delay = 1000) {
  const ws = new WebSocket(url);
  ws.onclose = () => {
    setTimeout(() => connect(url, Math.min(delay * 2, 30000)), delay);
  };
  return ws;
}

現場での応用を知るには関連書籍も役立つ。