WebSocket

network development beginner

サーバーとクライアントの間で、接続を保ったまま双方向にリアルタイム通信できる仕組み。

概要（サマリー）

WebSocketとは、サーバーとブラウザなどのクライアントの間で、接続をつなぎっぱなしにして、双方向にリアルタイムでデータをやり取りできる通信の仕組みである。

通常のHTTP通信は、「質問して、その質問に対する答えをもらう」リクエスト・レスポンス型のやり取りである。一方WebSocketは、「一度電話をつないだら、切らずにお互い好きなタイミングで話し続けられる」通話のようなものである。チャットアプリの即時メッセージ表示や、株価のリアルタイム更新、ブラウザゲームの状態同期など、「サーバー側から突然データを送りたい」場面で活躍する。

詳細解説

WebSocketが必要な理由（HTTPとの違い）

通常のHTTP通信は、クライアントのリクエストにサーバーがレスポンスを返す形で進む。HTTPの基盤となる接続は複数のリクエストで再利用されることもあるが、通常のHTTPのやり取りはリクエストを起点とする。

チャットやリアルタイム通知のように「サーバー側の変化を即座にクライアントへ伝えたい」場合、短い間隔のポーリングでは、変化がない間も問い合わせが発生する。WebSocketは、一度確立した接続を維持したまま、サーバーからもデータを送れるようにした仕組みである。

WebSocketの仕組み（HTTPからの切り替え）

WebSocketの一般的なHTTP/1.1接続は、HTTP/HTTPSのリクエストから始まる。

クライアントがWebSocketへの切り替えを求めるUpgradeリクエストを送り、サーバー側が承認すると、同じ接続上でWebSocketプロトコルの通信へ移行する。以降はリクエストとレスポンスを1往復ずつ繰り返すのではなく、接続を保ったまま双方向にデータを送り合える。HTTP/2上でWebSocketを開始する拡張では、HTTP/1.1のUpgradeとは異なる手順を使う。

基本的な使い方（コード例）

以下は、JavaScriptでWebSocketを使ってサーバーへ接続し、メッセージを送受信する簡単な例である。

// サーバーへWebSocket接続を確立する
const socket = new WebSocket('wss://example.com/chat');

// 接続が確立したときの処理
socket.addEventListener('open', () => {
  console.log('サーバーへ接続しました');
  socket.send('こんにちは');
});

// サーバーからメッセージを受け取ったときの処理
socket.addEventListener('message', (event) => {
  console.log('受信したメッセージ:', event.data);
});

// 接続が切れたときの処理
socket.addEventListener('close', () => {
  console.log('接続が終了しました');
});

このように、一度 new WebSocket() で接続を作れば、その後は send() でいつでもサーバーへデータを送り、message イベントでサーバーからのデータをいつでも受け取れる。

代表的な利用場面

WebSocketは、「即座に情報を伝えたい」アプリケーションで広く使われている。

チャットアプリ: 相手が送ったメッセージを即座に画面へ反映する
通知機能: 新着通知やコメントをリアルタイムで表示する
ブラウザゲーム: プレイヤーの位置や状態をリアルタイムで同期する
株価・仮想通貨の価格表示: 価格の変動を即座に反映する
共同編集ツール: 複数人が同時に編集している内容をリアルタイムで反映する

HTTPポーリングとの違い

一定間隔でサーバーに問い合わせるポーリングでも、リアルタイム風の更新を実現できる。

ポーリング: 数秒おきに「新しい情報はありますか」と繰り返し問い合わせる。実装は簡単だが、無駄な通信が発生しやすい。
WebSocket: 接続を維持し、変化があったときだけサーバー側から即座に知らせる。効率はよいが、実装や接続管理がやや複雑になる。

すべての通信をWebSocketにする必要はなく、リアルタイム性が重要な部分にだけ使い、それ以外は通常のHTTP通信で済ませる設計もよく行われる。

AIコーディングとの関係

AIに「チャット機能を作って」「リアルタイム通知を実装して」と依頼すると、AIはWebSocketを使った実装を提案することが多い。

たとえば、次のように指示すると効果的である。

「Node.jsでWebSocketサーバーを用意し、複数のユーザー間でチャットメッセージを送受信する最小構成のコードを書いて」
「WebSocketの接続が切れたときに自動で再接続する処理を追加して」

AIが生成したWebSocketのコードを確認する際は、認証と権限確認、受信データの検証、通信途絶時の再接続、大量の接続やメッセージを処理する際の負荷制御も確認するとよい。Socket.IOのような独自のライブラリを使う場合は、標準のWebSocket APIとそのまま互換ではないことにも注意する。

よくある勘違い

WebSocketは、HTTPを置き換える新しい仕組み？

そうではない。WebSocketは接続確立時にHTTPの仕組みを利用するプロトコルであり、HTTP全体を置き換えるものではない。リアルタイム性が必要な通信にはWebSocket、それ以外の通常のページ表示やAPI呼び出しにはHTTPというように、用途によって使い分けるのが一般的である。

WebSocketを使えば、通信は自動的に安全になる？

そうとは限らない。WebSocketにも暗号化されていない ws:// と、TLSで保護された wss:// がある。本番環境では原則として wss:// を使う。ただし、暗号化だけで利用者の権限まで保証されるわけではないため、接続時の認証とメッセージごとの権限確認も必要である。

WebSocketの接続は、一度確立すれば絶対に切れない？

そうではない。ネットワークの不安定さやサーバー側の再起動などにより、接続が切れることは普通に起こる。実際のアプリケーションでは、待ち時間を徐々に長くするなど、サーバーへ同時に再接続が集中しないように再接続を設計することが重要である。

まとめ

WebSocketは、サーバーとクライアントが接続を保ったまま双方向にリアルタイム通信できる仕組みである。
通常のHTTP通信と異なり、サーバー側から自発的にデータを送れる点が特徴である。
チャット、リアルタイム通知、オンラインゲームなど、即時性が求められる場面で使われる。
本番環境では wss:// と適切な認証・権限確認を使い、通信途絶も考慮する。

情報ソース

より詳しくAIに聞いてみよう

WebSocketとHTTPの違いを、電話と手紙にたとえて初心者向けに説明してください。
WebSocketを使ったリアルタイムチャット機能の基本的な実装手順を教えてください。
WebSocketの接続が切れたときに自動で再接続する処理の実装方法を教えてください。
WebSocketとHTTPポーリングのどちらを使うべきか、判断基準を教えてください。
AIにWebSocketを使ったアプリを作ってもらうとき、サーバーの負荷対策として確認すべき点を教えてください。