WebSocket とリアルタイム通信｜基礎を学ぶ

WebSocket とリアルタイム通信

このレッスンで分かること

WebSocket は HTTP からアップグレードして、1 接続で双方向のメッセージ通信を行うプロトコルです

HTTP のオーバーヘッドを排除し、サーバー側から即座にクライアントへプッシュできます

チャット、通知、共同編集、ライブダッシュボード、ゲーム同期などリアルタイム機能の定番手段

WebSocket とリアルタイム通信とは

双方向通信を実現する WebSocket の仕組みを理解します。本レッスンでは、WebSocket とリアルタイム通信の基本から実際の使いどころまでを整理し、現場で迷わず使える形に落とし込みます。

この章のポイント

WebSocket とは (要約)

HTTP の上でハンドシェイクを開始し、その後は 1 つの TCP 接続を維持したまま双方向にメッセージを送り合える プロトコル。低オーバーヘッドで、チャット・通知・共同編集・ライブダッシュボード・オンラインゲームのリアルタイム機能を支えます。

リアルタイム通信手段の比較

手段	通信方向	サーバー → クライアント能力	接続維持	典型用途
HTTP ポーリング	双方向 (擬似)	△ (遅延あり)	しない	古い実装
ロングポーリング	双方向 (擬似)	○ (やや遅延)	数十秒	互換性重視
Server-Sent Events (SSE)	一方向 (サーバー → クライアント)	◎	維持	通知のみで OK な場合
WebSocket	双方向	◎ (即時)	維持	チャット、共同編集、ゲーム
HTTP/2 サーバープッシュ (廃止済み)	サーバー → クライアント	— (主要ブラウザが削除済み)	—	後継は 103 Early Hints
WebTransport (HTTP/3)	双方向	◎	維持	WebSocket の後継 (主要ブラウザ対応済み)

このレッスンで学ぶこと

サーバー側から自由にクライアントへ送信できる双方向通信プロトコル、WebSocket の仕組みを学びます。チャットや通知などリアルタイム機能の定番です。

HTTP の限界

HTTP は基本的にクライアントから問い合わせて、サーバーが応答するという一方向のプロトコルです。「サーバー側で新しいイベントが起きたから、クライアントに即座に伝えたい」という用途では、下記のような工夫が必要でした。

ポーリング — 数秒ごとにクライアントから問い合わせる。リアルタイム性が低く、サーバー負荷も無駄。
ロングポーリング — 問い合わせを長めに保持し、サーバー側でイベントが発生したら即返す。やや改善するが効率は良くない。
Server-Sent Events (SSE) — 一方向 (サーバー → クライアント) のストリーミング。

これらの欠点を解消するのが WebSocket です。

WebSocket の特徴

WebSocket は HTTP の上で始まり、ハンドシェイク後は独立した TCP コネクション上で双方向通信を行うプロトコルです。

1 つの TCP 接続を保ったまま双方向にメッセージ送受信
ヘッダーが極小なので低オーバーヘッド
バイナリ・テキスト両対応
ws:// (80番) / wss:// (443番、TLS)

クライアントもサーバーも自分のタイミングでメッセージを送れるので、リアルタイム性が必要なアプリで活躍します。

ハンドシェイク

接続開始時は普通の HTTP リクエストです。Upgrade: websocket ヘッダーで「これから WebSocket に切り替える」と申告します。

プレーンテキスト

GET /chat HTTP/1.1
Host: example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==
Sec-WebSocket-Version: 13

サーバーが承諾すると、ステータス 101 Switching Protocols を返し、以降は WebSocket フォーマットでメッセージをやりとりします。

メッセージとフレーム

WebSocket はメッセージを「フレーム」という単位で送信します。各フレームには下記が含まれます。

FIN ビット — 最終フレームかどうか
オペコード — テキスト / バイナリ / Ping / Pong / Close
マスク — クライアント → サーバーは必ずマスクをかける (キャッシュポイズニング対策)
ペイロード

HTTP より圧倒的に軽量で、1 メッセージあたり数バイト〜の固定オーバーヘッドで済みます。

Ping / Pong によるキープアライブ

接続が生きているか確認するために Ping / Pong フレームをやりとりします。サーバーや LB がアイドル接続をタイムアウト切断するので、定期的に Ping を送って維持する設計が一般的です。

この章のポイント

切断と再接続戦略

WebSocket はネットワークが切れると接続が切れます。クライアント側で「指数バックオフで再接続」「再接続後に未受信メッセージを取り直す」というロジックを組み込むのが定番です。Socket.IO はこの再接続ロジックをライブラリで提供する代表例。

用途

チャット (Slack, Discord, LINE Web)
リアルタイム通知 (Notification)
共同編集 (Google Docs, Figma)
ライブダッシュボード (株価、IoT 監視)
オンラインゲームの状態同期

「サーバーから即座に状態変化を押し出したい」用途すべてが対象になります。

WebSocket と HTTP/2 / HTTP/3

HTTP/2 にはサーバープッシュ機能があり、HTTP/3 のストリームも双方向ですが、WebSocket と完全に置き換わるわけではありません。

WebSocket は「メッセージ単位で双方向に投げ合う」モデルですが、HTTP/2 のサーバープッシュは「将来のリクエストに先回りで応答を送る」モデル。用途が異なります。

WebTransport は HTTP/3 (QUIC) の上で WebSocket の代替・上位互換を狙うブラウザ API で、2026年時点では Chrome・Firefox・Safari の主要ブラウザが出揃い Baseline に到達しています。

この章のポイント

サーバー側のスケール

WebSocket は接続を維持し続けるので、サーバー 1 台あたりの接続数を意識する必要があります。Node.js なら 1 万〜10 万接続クラスを 1 ノードで保持できますが、横方向にスケールするときは Redis Pub/Sub などでノード間メッセージ配信を組み合わせます。

まとめ

このレッスンの要点は、HTTP からのアップグレード / フレームと Ping/Pong / 再接続戦略 の 3 点です。実務でこれらを切り分けて説明できるようになると、設計レビューや障害対応の精度が一段上がります。

理解度チェック

Q. WebSocket と Server-Sent Events (SSE) の 最大の違いは？

SSE は HTTPS をサポートしない
WebSocket は双方向、SSE は一方向 (サーバー → クライアント) のみ
WebSocket はバイナリを送れない
SSE は接続を維持しない

答えを見る

正解は 2。WebSocket は両方向に自由にメッセージを送れますが、SSE はサーバー → クライアントの一方向のみ。通知だけで十分なら SSE のほうがシンプルです。

出典 (References)

最終更新: 2026-05-28

よくある質問

Q. このトピックは実務でどう役立ちますか？

A. DB のクエリ最適化、API 設計、データ構造の選択など、設計判断の根拠になります。表面的にライブラリを使うだけでなく「なぜそれが速いのか」を理解できると、性能問題を未然に防げます。コーディング面接でも頻出のテーマです。

Q. 計算量はどう求めれば良いですか？

A. ループのネストごとに掛け算する、再帰なら漸化式から解く、というのが基本です。Big-O 表記は定数倍と低次の項を無視するため、n の指数（n²、n log n など）に注目してください。最悪・平均・最良の 3 つを意識すると説得力が増します。

Q. 覚えるべき定番アルゴリズムは何ですか？

A. 二分探索、クイックソート/マージソート、BFS/DFS、ダイクストラ、DP の基本問題（フィボナッチ・ナップサック）が必修です。これらを「白紙から書ける」状態にすると、応用問題が一気に解けるようになります。

次のレッスン

次は gRPC と HTTP/2 利用 で、双方向通信を実現する WebSocket の仕組みを理解しますを学びます。

事前確認 — 進む前に次の 3 つができることを確認しましょう。

WebSocket の要点を自分の言葉で説明できる
このレッスンの最小コード (または操作手順) を見ずに書ける
練習問題やクイズで間違えた箇所を読み直して理解した

理解度チェック (30 秒)

Q. WebSocket とは何か、1 文で説明してください。

この章のポイント

A. 本文の「このレッスンで分かること」または冒頭の説明文を見直し、自分の言葉で要約できれば OK。詰まったら本レッスンの最初の H2 セクションを読み返してみましょう。

関連レッスン