【うぇぶそけっと】

WebSocket とは?

💡 サーバーからもブラウザに「プッシュ通知」できる双方向通信
📌 このページのポイント
HTTP vs WebSocket HTTP Client Server Request Response Request Response 毎回接続→切断を繰り返す(半二重通信) WebSocket Client Server Handshake (HTTP Upgrade) 双方向の持続的接続 メッセージ送信 メッセージ送信 一度接続したら切断まで双方向にデータ送受信(全二重通信) 用途例:チャット・リアルタイム通知・オンラインゲーム・株価配信
HTTPは毎回リクエスト/レスポンス、WebSocketは一度つないだら双方向通信
ひよこ ひよこ

HTTPとの違いは?

ペンギン先生 ペンギン先生

HTTPは「リクエスト→レスポンス」の一方通行で、ブラウザが聞かないとサーバーは答えられない。WebSocketは一度接続すれば、サーバーからブラウザにいつでもデータを送れる双方向通信。チャットアプリで「相手のメッセージがリアルタイムに表示される」のはWebSocketのおかげだよ

ひよこ ひよこ

どんな場面で使うの?

ペンギン先生 ペンギン先生

①チャットアプリ(SlackDiscord)、②リアルタイム通知(SNSの「いいね」通知)、③株価・仮想通貨の価格表示、④オンラインゲーム、⑤共同編集(Googleドキュメント)。「データが変わったらすぐにブラウザに反映したい」場面がWebSocketの出番だよ

ひよこ ひよこ

Server-Sent Events(SSE)との違いは?

ペンギン先生 ペンギン先生

SSEはサーバー→クライアントの一方向通知のみ。WebSocketは双方向。SSEはHTTP上で動くからプロキシロードバランサーとの相性が良い。「サーバーからのプッシュだけでいい」場合はSSEの方がシンプル。ChatGPTストリーミング表示にもSSEが使われているよ

ひよこ ひよこ

WebSocketの注意点は?

ペンギン先生 ペンギン先生

①コネクション数の管理(サーバーリソースを消費し続ける)、②再接続ロジック(ネットワーク切断時の自動復帰)、③ロードバランサーとの相性(スティッキーセッションが必要)、④認証(接続時にJWTで認証、コネクション中の権限変更は別途対応)。Socket.IOを使えばこれらの課題を自動的にハンドリングしてくれるよ

ペンギン
まとめ:ざっくりこれだけ覚えればOK!
「WebSocket」って出てきたら「ブラウザサーバーのリアルタイム双方向通信」と思えればだいたいOK!
📖 おまけ:英語の意味
「WebSocket」 = ウェブソケット
💬 Web上のSocket(通信口)。HTTPの一方通行を超えて双方向に会話できるよ
← 用語集にもどる