TERM PRIMER
先に知っておく言葉
HTTPとの違いと使い分け
HTTPは、ブラウザからサーバーへお願いを出し、サーバーが返事を返す形でよく使われます。
ページを開く、画像を取る、フォームを送る、APIからデータを受け取る。こうした場面では、HTTPのお願いと返事の形が向いています。一方で、サーバー側から「今すぐ新しい情報があります」と知らせたい場面では、普通のHTTPだけだと工夫が必要になります。
WebSocketは、最初にHTTPから接続を始め、その後WebSocketの通信へ切り替わります。接続が開いている間は、ブラウザとサーバーが双方向にメッセージを送れます。
| 見る点 | HTTPの基本形 | WebSocket |
|---|---|---|
| 通信の形 | お願いと返事 | 接続を保って双方向 |
| 得意な場面 | ページ表示、API取得、フォーム送信 | チャット、通知、共同編集、リアルタイム更新 |
| サーバーからの通知 | 工夫が必要 | 接続中なら送りやすい |
| 注意点 | リクエストの数やタイミング | 接続の維持、再接続、認証 |
画面でWebSocketを確認する場所
WebSocketは、普通の画面上に名前が出ることは多くありません。
開発者向けツールのネットワーク画面で、WS や wss:// の通信として見える場合があります。チャットや管理画面で、ページを再読み込みしなくても情報が更新されるとき、裏側でWebSocketのような仕組みが動いている可能性があります。
利用者として確認するなら、画面のふるまいを見るのが入口です。新着がすぐ出るか、オフラインになったときにどう表示されるか、再接続後に情報が戻るか、通知だけは届くか。開発者として見るなら、接続、送受信、切断、再接続、認証、エラー表示を確認します。
イト
リアルタイム通信の部屋に、閉じない扉があったよね
ユイ
毎回問い合わせなくても、サーバーからすぐ知らせてもらえる感じでした
ピコ
その代表的な仕組みの一つがWebSocketだよ
Webページでは、ブラウザがサーバーへリクエストを送り、サーバーが返事を返すHTTPの形がよく使われます。WebSocketでは、最初に接続を作ったあと、そのつながりを保ち、ブラウザからもサーバーからもデータを送れるようにします。チャット、通知、共同編集、リアルタイムの管理画面などで使われることがあります。
第80話「WebSocketはどんな扉？」では、第79話の二方向の光の道に続く、開いたままの連絡口を見ます。以下では、その物語のたとえを実際のWebの用語に戻しながら、WebSocketがどんな場面で役立つのか、HTTPとの違いは何か、何に注意するのかを順に見ていきます。
開いたままの連絡口にたとえると
そもそも近い時間で状態をそろえる考え方は、リアルタイム通信とは で先に整理できます。
たとえばチャットでは、自分がメッセージを送るだけでなく、相手からの新しいメッセージもすぐ受け取りたいです。毎回「新しいメッセージはありますか」と聞き続ける方法もありますが、WebSocketでは接続を開いたままにして、必要なタイミングで双方がデータを送れるようにします。
ラボのたとえでは、受付に毎回並び直すのではなく、開いたままの連絡口を作るイメージです。連絡口が開いている間は、こちらから札を送ることも、サーバー側から札を返すこともできます。
WebSocketの通信の流れ
WebSocketは、最初からいきなり別世界の通信を始めるわけではありません。入口では、ブラウザがサーバーへ「WebSocketとして接続したい」と伝えます。サーバーがそれを受け入れると、接続の使い方が切り替わり、開いたままの連絡口として扱えるようになります。
流れを短くすると、次のようになります。
- ブラウザが接続を始める
- HTTPの入口でWebSocketへ切り替えたいと伝える
- サーバーが受け入れる
- 接続を開いたままにする
- ブラウザとサーバーが必要なタイミングで送受信する
- 切れたら再接続や取り逃した情報の確認をする
この流れを持っておくと、「WebSocketはチャット専用の機能」といった誤解を避けやすくなります。WebSocketは、チャットそのものではなく、接続を開いたまま双方向にメッセージを運びやすくする通信の道具です。チャット画面では、その上に送信、保存、既読、通知、履歴取得などの別の仕組みが重なります。送信・既読・通知の流れは、メッセージの仕組み で確認できます。
WebSocketが使われる場面
WebSocketは、短い遅れで更新したい画面で使われることがあります。
- チャットの新着メッセージ
- オンラインゲームや共同編集の状態更新
- 管理画面のリアルタイムな数値
- ライブ配信のコメントやリアクション
- 通知やアラートの即時表示
- サポートチャットや取引画面の更新
ただし、リアルタイム通信ならいつもWebSocketというわけではありません。プッシュ通知、ポーリング、Server-Sent Events、UDP系の通信など、目的や環境によって別の方法が向いている場合もあります。WebSocketは、その中の一つの選択肢です。
マコト
リアルタイム通信という目的があって、その方法の一つがWebSocketなんだね
ピコ
そう。目的と仕組みを分けると、言葉が混ざりにくいよ
wsとwss
WebSocketのURLでは、ws:// や wss:// という形を見ることがあります。
ws:// はWebSocketの通信を表す入口です。wss:// は、暗号化された安全な接続で使われるWebSocketです。Webページで http:// と https:// が分かれるように、WebSocketでも安全な通信では wss:// を使うことが多いです。
実際のサービスでは、ログイン状態や権限も大切です。接続できる人、送ってよい内容、受け取ってよい相手を間違えないようにする必要があります。WebSocketは接続を開いたままにするため、認証、権限、切断時の扱いを設計することが重要です。
切断と再接続の注意点
WebSocketの接続は、ずっと安定して続くとは限りません。
スマホがスリープする、Wi-Fiが切れる、電車で移動して回線が変わる、サーバーが再起動する、アプリを閉じる。こうした場面では接続が切れることがあります。そのため、WebSocketを使うアプリでは、切れたときに再接続したり、取り逃した更新を取り直したりする工夫が必要になります。
チャットで一瞬オフラインになったあと、未読のメッセージがまとめて届くことがあります。これは、接続中に届く情報と、あとから取り直す情報を組み合わせている場合があります。リアルタイム通信は「つながっている間だけ」ではなく、「切れたあとにどう戻るか」も大事です。
自分の言葉で説明してみよう
チャットや共同編集の画面を見ながら、WebSocketらしい動きを探します。見るだけで終わらせず、「画面では何が起きていて、裏側ではどんな通信が必要か」を一文で言えるようにします。
- ページを更新しなくても新しい情報が出るか見る
- オフラインにしたとき、画面がどう変わるか見る
- 再接続したあと、抜けた情報が戻るか確認する
- 開発者向けツールで
WSやwss://があるか見る - HTTPのリクエストと、開いたままの通信を分けて考える
WebSocketとは、＿＿＿＿＿＿＿＿＿＿＿＿通信です。
HTTPとの違いは、＿＿＿＿＿＿＿＿＿＿＿＿です。
チャットで使う場合も、保存や通知などは＿＿＿＿＿＿＿＿＿＿＿＿と一緒に動きます。
答えの例は、「接続を開いたまま双方向に送れる」「お願いと返事を毎回作る形だけではなく、つながりを保てる」「別の仕組み」です。言葉を丸暗記するより、画面の動きと通信の役割を対応させて説明できるかを確認してください。
WebSocketのミニクイズ
Q1. WebSocketとは何ですか？
ブラウザとサーバーの接続を開いたままにし、双方向にデータを送れる通信の仕組みです。
Q2. WebSocketはHTTPとまったく別の世界ですか？
最初の接続はHTTPから始まり、その後WebSocketの通信へ切り替わります。役割は違いますが、Webの通信の流れの中で使われます。
Q3. WebSocketを使えば、切断の心配はなくなりますか？
なくなりません。通信環境や端末の状態で切れることがあるため、再接続や取り逃した情報の扱いが必要になります。
LAB WHITEBOARD
自分の言葉で説明してみよう
「WebSocketがブラウザとサーバーの接続を開いたまま双方向に送る仕組みであること、HTTPとの違い、使われる場面と注意点を説明できるようになる。」を、いまの自分の言葉で一文にしてみてください。途中の説明でも大丈夫です。
