WebSocket

WebSocketは、ブラウザとサーバーが一度つながったら、どちらからでも好きなタイミングでデータを送り合える通信の仕組みです。

WebSocket のアイキャッチ図解
まずは、こう考えるとつかみやすいです。

WebSocketは、電話のようなものです。一度つながったら、どちらからでも話しかけられて、切るまで会話が続きます。

ひとことで言うと

WebSocketは、ブラウザとサーバーの間で一度接続を結び、その後はどちらからでも自由にデータを送り合える双方向通信の仕組みです。

通常のHTTP通信は「ブラウザが聞いて、サーバーが答える」一問一答ですが、WebSocketは接続を保ち続け、サーバーから先にデータを送ることもできます。 チャットやリアルタイムの通知など、「更新があればすぐ伝えたい」場面で使われます。

たとえ話でもう少し詳しく

WebSocketは、電話の通話に近いです。

  • 電話をかけてつながったら、どちらからでも話しかけられる
  • 話し終わったら電話を切る
  • 相手が何か言いたいときは、こちらが聞いていなくても伝えてくれる

通常のHTTP通信は「手紙のやりとり」に近く、こちらから送らないと相手から返事は来ません。 WebSocketは「電話中」のように接続が続いているので、サーバー側で変化が起きたときにブラウザへすぐ知らせることができます。 チャットのメッセージ、株価の更新、ゲームの操作など、「常に最新の状態を反映したい」機能に向いています。

よく出る場面・使いどころ

  • チャットアプリで、相手のメッセージをリアルタイムに受け取りたいとき
  • 株価や試合のスコアなど、頻繁に変わる情報をすぐ画面に反映したいとき
  • オンラインゲームで、複数のプレイヤーの動きをリアルタイムに同期したいとき
  • 進捗状況を画面に逐次表示したいとき

似た言葉との違い

  • HTTP
    • ブラウザがリクエストを送り、サーバーが返答する一問一答の通信
    • WebSocketは一度接続したあとは両方向にいつでもデータを送れる
  • リクエスト/レスポンス
    • HTTPの「依頼と返答」のセット
    • WebSocketでは接続を確立した後、このセットを繰り返さずに通信が続く
  • webhook
    • 出来事が起きたときにサーバーからURLへ一度だけ通知する仕組み
    • WebSocketは接続が続く間、何度でも双方向でやりとりできる

実務で気にするポイント

  • 接続を長時間維持するためサーバーへの負荷が積み上がりやすい
  • 接続が切れたときに自動で再接続する仕組みを用意する
  • 認証はHTTPと別に設計が必要になることが多い
  • HTTPと異なり ws://wss://(暗号化)のURLを使う

注意: WebSocketは「リアルタイム性が必要なとき」の道具です。単純なデータ取得や送信は通常のHTTP通信の方がシンプルで扱いやすいため、リアルタイム更新が本当に必要かどうかを先に確認してから採用を検討しましょう。