WebSocketの仕組み - リアルタイム双方向通信を理解しよう

10分 で読める | 2025.12.13

公式ドキュメント
Network

WebSocketとは

WebSocketは、クライアントとサーバー間で双方向のリアルタイム通信を実現するプロトコルです。チャットアプリ、オンラインゲーム、株価表示など、即時性が求められるアプリケーションで使用されます。

WebSocketのURL: ws://（非暗号化）とwss://（TLS暗号化）が使用されます。

HTTPとWebSocketの違い

特徴HTTPWebSocket
通信方向クライアント→サーバー双方向
接続リクエストごとに接続/切断永続的
サーバープッシュ不可可能
オーバーヘッド毎回HTTPヘッダーを送信初回のみ
リアルタイム性低い高い

WebSocketのハンドシェイク

WebSocket（RFC 6455）の Upgrade ハンドシェイクは HTTP リクエスト/レスポンスとして次のように行われます。

GET /chat HTTP/1.1
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==

サーバーは 101 Switching Protocols で応答します。

HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade

JavaScript実装例

const socket = new WebSocket('wss://example.com/chat');

socket.addEventListener('open', (event) => {
 console.log('接続成功');
 socket.send('Hello Server!');
});

socket.addEventListener('message', (event) => {
 console.log('受信:', event.data);
});

Socket.IO

Socket.IOは、WebSocketをベースにした高機能なライブラリです。

  • フォールバック: WebSocketが使えない場合はHTTPロングポーリングを使用
  • 自動再接続: 切断時に自動的に再接続
  • Room機能: クライアントをグループ化

ポイント: WebSocketは「サーバーからクライアントへのプッシュ通知」が必要な場面で最も効果を発揮します。単方向の通知だけならSSE（Server-Sent Events）も検討しましょう。

まとめ

WebSocketは、リアルタイム双方向通信を実現する強力なプロトコルです。HTTPとの特性の違いを理解し、アプリケーションの要件に応じて適切に選択・実装することが重要です。

注意: WebSocket接続は永続的なためサーバーリソースを消費します。ハートビートと切断検知を実装し、不要な接続を適切にクリーンアップしてください。

実践メモ: Socket.IOやws等のライブラリを使えば、WebSocketの接続管理や再接続ロジックを簡単に実装できます。

参考リソース

おすすめ記事

← 一覧に戻る
PR
PR
PR
PR