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 との使い分け

SSE との使い分けを以下に整理する。

ケース	推奨
チャット、ゲーム (双方向)	WebSocket
通知、ログストリーム (サーバー→クライアント)	SSE
ダッシュボードの更新	SSE or 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;
}

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