はじめに
先日、実務でシステムのWebSocket化という議題が出ていたので、まずWebSocketってなんぞやということで気になり調べてみました
リアルタイム通信 と聞くと、チャットアプリやオンラインゲームを思い浮かべる人も多いのではないでしょうか？
これらのアプリに欠かせない技術が WebSocket です！
目次
- そもそも通信ってどうなってるの？
- WebSocketの登場！
- HTTP通信との違い
- WebSocketのメリット・デメリット
- WebSocketが使われているアプリジャンル
- WebSocketが適している場面と注意点
- まとめ
- 参考文献
🧷 そもそも通信ってどうなってるの？
普段、私たちがウェブサイトを見ているときは HTTP通信 という方式が使われています。
📥 HTTP通信の流れ
- ブラウザ: 「サーバーさん！このページちょーだい！」
- サーバー: 「はい、どうぞ！」（HTMLや画像などを送る）
- これで通信は 終了（接続が切れる）
✅ 問題点
- ページが更新されるまでサーバーから新しい情報は来ない
- チャットやゲームみたいにリアルタイムで情報が欲しい場合は不便
🧷 WebSocketの登場！
WebSocket は、ブラウザとサーバーが 双方向通信 を行える仕組みです。
従来の HTTP通信 と比べて、リアルタイム性と効率性に優れています。
🌐 WebSocket通信の流れ
- ブラウザ: 「サーバーさん！ずっと繋がっていていい？」
- サーバー: 「いいよ！パイプ（通信路）開くね！」
- お互いに自由にデータを 送り合い放題 🎉
🧷 HTTP通信との違い
| HTTP通信 | WebSocket | |
|---|---|---|
| 通信 | 一方向通信（リクエストごとに接続） | 双方向通信（常時接続） |
| 接続 | 通信ごとに接続と切断を繰り返す | 一度接続したら、維持される |
| データ送信 | 必要な時にリクエスト | 接続維持でオーバーヘッドが少ない |
| 効率性 | 送信のたびにオーバーヘッドが発生 | 双方向通信（常時接続） |
| 用途 | 静的なページ表示、API呼び出し | チャット、ゲーム、リアルタイム通知など |
たとえるなら…
HTTP通信 は「ピザのデリバリー」🍕
- 頼むたびに1回きりのやりとり
- 食べたくなったらまた注文
WebSocket は「固定電話」☎️
- 一度繋がったらずっと会話できる
- 必要なときに好きなだけ話せる
🧷 WebSocketの仕組み
WebSocketは、まず HTTPで接続を開始しますが、その後で通信がアップグレードされます。
🔧 通信の流れ
1. クライアントから接続要求
- ブラウザが wss:// でサーバーに接続要求
2. サーバーが接続を承認
- 通信が HTTPからWebSocketにアップグレード
3. 常時接続でデータを自由にやりとり
- 双方向にデータを送信＆受信し続ける
👩💻 実際のコード例
シンプルなWebSocket接続の例です👇
// サーバーに接続
const socket = new WebSocket('wss://example.com');
// 接続成功時
socket.addEventListener('open', () => {
console.log('接続しました！');
socket.send('こんにちは！');
});
// サーバーからメッセージを受信
socket.addEventListener('message', (event) => {
console.log(`サーバーから: ${event.data}`);
});
// エラー時
socket.addEventListener('error', (error) => {
console.error('エラー:', error);
});
💡 wss:// は セキュア版WebSocket（HTTPSと同じように暗号化通信）です。
🧷 WebSocketのメリット・デメリット
💕 メリット
✔️ リアルタイム通信が可能
- チャット、通知、ゲームなどに最適
- サーバーからも好きなタイミングでプッシュ通知が可能
✔️ 通信効率が良い
- 一度接続したら維持されるため、頻繁に接続・切断を繰り返す必要がない
- オーバーヘッドが減り、通信コストを抑えられる
✔️ 通信速度が速い
- レイテンシ（遅延）が少ない
- リアルタイム性が求められるアプリに有利
💘 デメリット
⚠️ サーバー負荷が高くなりやすい
- 接続を維持するため、サーバーのリソースを消費し続ける
- ユーザー数が多いとスケーリングが難しくなる
⚠️ ブラウザの対応が必要
- 古いブラウザではサポートされていない場合がある（とはいえ最近はほぼ対応済み）
⚠️ ファイアウォール制限に注意
- 一部のファイアウォールやプロキシで通信がブロックされる可能性がある
🧷 WebSocketが使われているアプリジャンル
① チャットアプリ 💬
- LINEやSlack などのリアルタイムチャット
- メッセージを即座にやり取りできる
② オンラインゲーム 🎮
- プレイヤーの操作を即座に反映
- 多人数で同時に接続できるゲームサーバー
③ 株価・仮想通貨のリアルタイム表示 💹
- 株価や暗号資産のリアルタイム更新
- Coinbase や Binance などで利用
④ 通知サービス 🔔
- Webアプリでのリアルタイム通知
例: 「新しいメッセージが届きました！」のポップアップ表示
🧷 WebSocketが適している場面と注意点
💡 こんなときに使うと良い！
- リアルタイム性が重要なアプリ
- チャット、ゲーム、ライブストリーミング
- 常に最新データを表示するダッシュボード
⚠️ 使わない方が良い場合
- 静的なページ表示だけの場合
- 小規模アプリで接続数が少ない場合
- 通信負荷を抑えたい場面
🎉 まとめ
WebSocketは、HTTP通信にはできない リアルタイム性 を実現できる強力な技術！✨
✅ メリット
- 双方向通信＆リアルタイム更新
- 通信効率が良い
⚠️ デメリット
- サーバー負荷が高くなりがち
- スケーリングや負荷分散の工夫が必要