WebSocketは、サーバーとクライアント間でリアルタイム双方向通信を可能にする通信プロトコルです。通常のHTTP通信（リクエストとレスポンスの一回限りのやり取り）とは異なり、WebSocketでは接続が一度確立されると、その接続を維持してデータのやり取りを行えます。
WebSocketの特徴
- 双方向通信
- サーバーとクライアントが自由にデータを送受信可能です。
- クライアントからだけでなく、サーバーからもメッセージを送信できます。
- リアルタイム
- 接続が常にオープンなため、リアルタイムでの通知や更新が可能です。
- チャットアプリ、ゲーム、リアルタイムのデータストリーム（例: 株価更新）に最適。
- 軽量
- HTTPヘッダが不要なため、データ送受信が効率的です。
- TCPベース
- WebSocketはTCPをベースに動作し、通常のブラウザでサポートされています。
WebSocketの仕組み
- ハンドシェイク
- クライアントはHTTPリクエストを送信してWebSocket接続を開始します。
- サーバーがリクエストを承認すると、HTTP接続はWebSocket接続にアップグレードされます。
WebSocketの重要なメソッドとイベント
サーバー側 (ws)
on('connection', callback)- 新しいクライアントが接続した際のイベント。
on('message', callback)- クライアントからメッセージを受信した際のイベント。
on('close', callback)- クライアントが切断した際のイベント。
send(data)- クライアントにデータを送信。
クライアント側 (WebSocket)
onopen- 接続が確立された際に呼び出される。
onmessage- サーバーからメッセージを受信した際に呼び出される。
onclose- 接続が閉じられた際に呼び出される。
send(data)- サーバーにデータを送信。
WebSocketとHTTPの違い
| 特徴 | WebSocket | HTTP |
|---|---|---|
| 接続の持続性 | 持続的（常に接続） | 一時的（リクエストごとに接続） |
| データ送受信方向 | 双方向 | クライアントからサーバー |
| リアルタイム性 | 高い | 低い |
| オーバーヘッド | 低い | 高い |
エラー集
const ws = new WebSocket(`${protocol}//${window.location.host}:5000/ws`);
window.location.hosthostにはドメイン名とポート番号（存在する場合）が含まれます。しかし、現在の環境ではポート番号が明示的に指定されていないため、この値が不正確になっています。- 不正なURL
window.location.hostが正しく解決できなかった場合、undefinedが含まれるURLが生成され、WebSocketの接続が失敗します。
