【ネットワーク】WebSocket技術についてのチートシート - j-komatsu/myCheatSheet GitHub Wiki
WebSocket技術についてのチートシート
WebSocketとは？
- リアルタイム通信を実現するための技術
- HTTPでは不可能な双方向通信が可能
- WebSocketを使用すると、クライアント（ブラウザ）とサーバー間で継続的な接続が維持され、データを即座に送受信できます
小学生にも分かる例
- 普通のウェブサイト（HTTP）は 手紙のやり取り のようなものです。毎回新しい封筒に手紙を書いて送ります。
- WebSocketは 電話で話す ようなものです。最初に電話をかけた後は、何回も話したり聞いたりできます。
仕組み
1. 初期接続（ハンドシェイク）
- クライアントがサーバーに接続リクエストを送る
- 通常のHTTPリクエストを利用
- サーバーが「WebSocket通信を使ってもOK」と応答すると、接続が確立
2. 継続的な通信
- 接続が確立すると、HTTPからWebSocketプロトコルに切り替わります。
- 切り替え後はデータが 即座に、軽量に やり取りされます。
sequenceDiagram
Browser->>Server: HTTPリクエストでWebSocket接続要求
Server-->>Browser: 接続OK（101 Switching Protocols）
Browser->>Server: データ送信（WebSocket）
Server-->>Browser: データ応答（WebSocket）
どんなときに使う？
- チャットアプリ
- 例: LINEやSlack
- ゲーム
- 例: オンラインマルチプレイゲーム
- 株価のリアルタイム更新
- IoTデバイスの状態監視
小学生にも分かる使い道
チャットアプリの例
- あなたと友達がチャットしているとします。
- もし普通の手紙（HTTP）を使うと、友達に「こんにちは！」と送ってから返事を待つ間に時間がかかります。
- WebSocketを使うと電話のように話し続けられるので、「こんにちは！」「元気？」「元気だよ！」とすぐにやり取りできます。
実装例
WebSocketサーバー（Node.js）
const WebSocket = require('ws');
const server = new WebSocket.Server({ port: 8080 });
server.on('connection', (socket) => {
console.log('クライアントが接続しました');
// クライアントからのメッセージを受信
socket.on('message', (message) => {
console.log(`受信: ${message}`);
socket.send(`サーバーからの応答: ${message}`);
});
// 接続終了時
socket.on('close', () => {
console.log('クライアントが切断しました');
});
});
WebSocketクライアント（ブラウザ）
const socket = new WebSocket('ws://localhost:8080');
// サーバー接続成功時
socket.onopen = () => {
console.log('サーバーに接続しました');
socket.send('こんにちは！');
};
// サーバーからのメッセージ受信時
socket.onmessage = (event) => {
console.log(`サーバーの応答: ${event.data}`);
};
// 接続が閉じた時
socket.onclose = () => {
console.log('接続が閉じられました');
};
よくある質問（FAQ）
Q: WebSocketはHTTPとどう違うの？
- HTTPはリクエストとレスポンスが1回ずつ行われる仕組み
- WebSocketは双方向通信を持続的に行う仕組み
Q: WebSocketを使うとどんなメリットがあるの？
- リアルタイムでデータ更新が必要な場合に適している
- 通信量を削減できる
Q: 使うために特別なソフトウェアが必要？
- 多くのブラウザが標準でWebSocketをサポートしているので、特別な設定は不要です。
まとめ
- WebSocketはリアルタイム通信を実現する便利な技術
- チャットやゲームなど、リアルタイム性が求められるアプリに最適
- 実装は簡単で、Node.jsなどを使うと手軽に始められる