WebSocketとは？HTTPとの違いを初心者向けに画像多めで解説！

WebSocketは、簡単に言うと、
ブラウザとサーバーがつながったまま、リアルタイムにやり取りできる通信の仕組みだよ。

そう。
普通のWebページを見るときは、ブラウザがサーバーに「このページください」とお願いして、サーバーが返事を返す。
基本的には、リクエストして、レスポンスが返ってきたら一区切りなんだ。

ブラウザ：
ページください

サーバー：
はい、ページです

そう。
でもWebSocketは、一度つながったら、その接続を維持して、ブラウザとサーバーが何度もやり取りできる。

ブラウザ ⇄ サーバー つながったまま、何度もやり取りできる

そんな感じだよ。
WebSocketは、ブラウザとサーバーの間に通話状態を作るイメージだね。

WebSocketを一言でいうなら、こんな感じ。

ブラウザとサーバーが接続を維持したまま、双方向にリアルタイム通信する仕組み

そこが大事。
HTTPでは、基本的にブラウザがお願いして、サーバーが返す形が多いんだ。
でもWebSocketでは、サーバー側からブラウザへデータを送ることもできるよ。

HTTPは、コンビニで毎回店員さんに聞きに行く感じ。
客：お弁当ありますか？
店員：あります
客：お茶ありますか？
店員：あります

そう。
必要なときにリクエストを送って、レスポンスを受け取る。

WebSocketは、電話をつなぎっぱなしにして会話する感じ。

ブラウザ：つながったよ
サーバー：OK、これから必要な情報があったら送るね
サーバー：新しいメッセージが来たよ
ブラウザ：了解。こっちからも送るね

そう。
だからリアルタイム性が必要なサービスと相性がいい。

たとえば、こういうものだね。

そう。
「サーバー側で変化があったら、すぐブラウザに届けたい」場合に便利なんだ。

いいね。
たとえば、Bさんがチャット画面を開いているとする。

HTTPだけで新着メッセージを確認しようとすると、ブラウザが定期的にサーバーへ聞きに行くことになる。

そう。
このように、定期的に問い合わせる方法を ポーリング と呼ぶよ。

WebSocketなら、接続を維持しておいて、メッセージが来たらサーバーから送れる。

そう。
だからチャットや通知みたいなリアルタイム機能に向いているよ。

最初はHTTPで接続を始める。
そのあと、サーバーとブラウザが「WebSocket通信に切り替えよう」と合意するんだ。

最初はHTTPの仕組みを使って、途中でWebSocketに切り替える。
この切り替えを Upgrade と呼ぶことがあるよ。

この最初のやり取りを ハンドシェイク と呼ぶよ。

うん。
HTTPでは http:// や https:// を使うよね。
WebSocketでは、次のようなURLを使う。

そう考えると分かりやすいね。
実際のWebサービスでは、安全のために wss:// を使うことが多いよ。

WebSocketを使うメリットをまとめるとこんな感じだよ。

そうだね。だから、
「何か変わったらすぐ反映したい」ならWebSocketはかなり便利だね。

逆にデメリットはこんな感じだよ。

1人や2人なら問題なくても、同時接続が何万人になると、接続管理がかなり大事になる。

WebSocketでよく出てくる仕組みに、Ping/Pong っていうのがあるよ。

接続が生きているか確認するためのやり取りだよ。こんなやり取りをする。

そうだね。
接続が切れていることに気がつかないと困るから、定期的に確認することがあるんだよ

ざっくり言うと、こんな違いだよ。

Ping/Pongは「接続が生きているか」の確認
ポーリングは「新しいデータがあるか」の確認

そう同じ定期的にしていることでも、確認しているものが違うんだ。

WebSocketが向いているケースをまとめてみようか。

逆にこういうケースでは、普通のHTTPで十分なことが多いよ。

そう。
WebSocketは便利だけど、使いどころが大事だよ。

試験ではこんなキーワードが出てきたらWebSocketのことか疑うといいよ。

WebSocketとは、
ブラウザとサーバーが接続を維持したまま、双方向にリアルタイム通信するための仕組みだよ。

一言でまとめるなら、

WebSocketは、ブラウザとサーバーが電話をつなぎっぱなしにするように、リアルタイムでやり取りする仕組み

だね。