WebSocketとは？HTTPとの違いとリアルタイム通信の仕組みを初心者向けに解説

こんにちは、InfraAcademyというインフラ学習サイトを運営しているryuです。

チャット画面を開いていると、ページを更新していないのに新しいメッセージが表示されます。オンラインゲームでも、ほかのプレイヤーの動きがほぼリアルタイムで画面へ反映されます。

なぜ、ブラウザは新しい情報が届いたことをすぐに知れるのでしょうか。

このようなリアルタイム通信で使われる代表的な仕組みが、WebSocket（ウェブソケット）です。

WebSocketは、Webサーバーとクライアントの間で接続を維持し、双方からデータを送れるようにする通信プロトコルです。ただし、HTTPを完全に置き換えるものではなく、用途に合わせて使い分けます。

この記事では、WebSocketの仕組み、HTTPとの違い、利用される場面、JavaScriptでの基本的な使い方まで、IT初心者にもわかるように解説します。

WebSocketとは双方向の通信を可能にするためのプロトコル¶

WebSocketとは、双方向の通信を可能にするためのプロトコルです。

WebSocketを使用すると、クライアント（通常はウェブブラウザ）とサーバーが持続的な接続を確立し、リアルタイムでデータの送受信を行うことができます。

ここでいう双方向通信とは、クライアントからサーバーへ送るだけでなく、サーバー側からも必要なタイミングでデータを送れるという意味です。

WebSocketのイメージ図¶

WebSocketのイメージはこちらになります。

HTTPとは異なり、WebSocketはクライアントとサーバーの間で双方向の通信を可能にします。これにより、サーバーはクライアントからのリクエストを待つことなくデータを送信できます。

一度接続した後は、同じ通信経路を使って何度もデータをやり取りできます。電話をつないだまま、お互いが必要なときに話せる状態をイメージするとわかりやすいでしょう。

ただし、接続が永久に続くわけではありません。ブラウザを閉じる、ネットワークが切れる、サーバーが再起動するといった理由で接続は終了します。

通常の通信との違い¶

通常、クライアントからWebサーバーはアクセスする際は、HTTP通信をおこないます。URLに「http://www.test.com」と入力すると、Webサイトが表示されます。

これは、クライアントから、Webサーバーに対してリクエスト(要求)を投げて、レスポンスとしてWebサイトの情報を受け取っています。

HTTPはクライアントがリクエストを送信し、サーバーがそれに応答するという単方向の通信モデルです。クライアントが新しいデータを取得するには、再度リクエストを送信する必要があります

WebSocketはリクエストなしにサーバーがデータを送信できる¶

通常のHTTP通信と違い、サーバーはクライアントからのリクエストを待つことなく、必要に応じてデータをプッシュ送信できます。

では、WebSocketはどのような場面で使われるのでしょうか？具体的な実例がわかるとWebSocketのイメージが湧くと思います。

厳密には、HTTPそのものが単方向というわけではありません。HTTPでもレスポンスとしてサーバーからデータを返せますが、基本はクライアントのリクエストを起点に通信が始まります。

一方、WebSocketでは接続確立後に、どちら側からでもメッセージを送れます。この違いが、更新をすぐに届けたいサービスで役立ちます。

【関連記事】プロトコルとは？初心者向けに役割を解説

WebSocketとHTTPの違いを整理する¶

WebSocketとHTTPは、どちらもWebサービスで使われます。

どちらが優れているという話ではなく、データの更新頻度や通信の目的に合わせて選ぶことが大切です。

通常のWebページや、数分に1回データを取得すればよい画面では、HTTPで十分です。

数秒間に何度も更新が発生し、その内容をすぐ画面へ反映したい場合は、WebSocketが選択肢になります。

WebSocketも最初はHTTPで接続を開始する¶

WebSocketは、最初から独立した通信を突然始めるわけではありません。

ブラウザは最初にHTTPを使い、WebSocketへ通信方式を切り替えたいとサーバーへ伝えます。このやり取りをハンドシェイクと呼びます。

代表的なリクエストには、次のようなヘッダーが含まれます。

GET /chat HTTP/1.1
Host: example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: example-key
Sec-WebSocket-Version: 13

サーバーが対応していれば、通信方式の切り替えを受け入れます。

HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade

この後は、HTTPのリクエストとレスポンスを繰り返すのではなく、WebSocketのフレームを使ってデータを送受信します。

wsとwssの違い¶

WebSocketのURLには、ws://とwss://があります。

wss://は通信をTLSで暗号化したWebSocketです。HTTPに対するHTTPSと同じ関係だと考えるとわかりやすいでしょう。

ws://example.com/socket
wss://example.com/socket

インターネット上でログイン情報やチャット内容を扱うなら、基本的にはwss://を使用します。

HTTPSのページから安全でないws://へ接続しようとすると、ブラウザに拒否されることもあります。

WebSocketはどのような場面で使われるのか？¶

WebSocketはリアルタイム通信が必要とされるさまざまなアプリケーションで実装されています。

たとえば、以下のようなアプリです。

• チャットアプリ
• オンラインゲーム
• コラボレーションツール

それぞれについて詳しく解説します。

チャットアプリ¶

チャットアプリは、SlackやDiscord、LINEなどお互いでメッセージをやり取りするアプリのことです。

チャットアプリでは、ユーザー同士のメッセージをリアルタイムで送受信する必要があります。WebSocketは低遅延で双方向通信が可能なため、即時性が求められるチャットに使われます。

たとえば、Aさんがメッセージを送ったとき、サーバーはそのメッセージをBさんの接続へすぐに配信できます。

既読状態、入力中の表示、オンライン状態なども、リアルタイム通信と相性のよい機能です。

オンラインゲーム¶

オンラインゲームは、FortniteやPUBGなど、オンライン上で遊べるゲームです。

オンラインゲームでは、プレイヤーのアクションやゲームの状態をリアルタイムで同期させる必要があります。

WebSocketを使用することで、プレイヤー間の情報を迅速に共有し、スムーズなゲームプレイを実現します。

ただし、非常に細かい位置情報を高速で送り続けるゲームでは、WebSocket以外の通信方式が使われることもあります。ゲームだから必ずWebSocketというわけではありません。

コラボレーションツール¶

コラボレーションツールとは、Google Sheets, Microsoft Office Onlineなどのツールです。

ドキュメントやスプレッドシートの共同編集では、ユーザーが行った変更を即座に他のユーザーに反映させる必要があります。WebSocketはこれをリアルタイムで実現します。

このように、様々なアプリでWebSocketが使われています。

ほかにも、株価や為替レートの表示、配送状況、サーバー監視画面、管理画面の通知などで利用されます。

私もWebシステムを開発・運用してきた中で、処理状況を画面へ反映したい場面に何度も出会いました。更新頻度が高い機能ほど、何秒おきにHTTPで問い合わせるより、接続を維持して必要な更新だけ送る設計がわかりやすくなります。

WebSocketをJavaScriptから使う基本例¶

ブラウザには、WebSocketへ接続するためのAPIが用意されています。

最小限の例を見ると、接続、送信、受信、切断という流れを理解しやすくなります。

const socket = new WebSocket("wss://example.com/socket");

socket.addEventListener("open", () => {
  console.log("接続しました");
  socket.send(JSON.stringify({
    type: "message",
    text: "こんにちは"
  }));
});

socket.addEventListener("message", (event) => {
  const data = JSON.parse(event.data);
  console.log("受信:", data);
});

socket.addEventListener("close", () => {
  console.log("切断されました");
});

socket.addEventListener("error", (error) => {
  console.error("通信エラー:", error);
});

new WebSocket()を実行すると、指定したサーバーへの接続が始まります。

接続が完了するとopen、データを受信するとmessage、切断されるとclose、エラー時にはerrorのイベントが発生します。

WebSocketはJSONだけを送る仕組みではない¶

サンプルではJSONを使っていますが、WebSocketがJSON専用というわけではありません。

テキストデータとバイナリデータを送れます。アプリ側で、どのような形式のデータを送るかを決めます。

JSONを使う場合は、メッセージの種類を示すtypeを入れておくと処理しやすくなります。

{
  "type": "notification",
  "message": "新しいお知らせがあります"
}

受信側はtypeを確認し、チャット、通知、状態更新などに処理を分けられます。

WebSocketのメリット¶

ここまで、WebSocketの概要や具体的な事例を解説しました。

WebSocketを使うとどのようなメリットがあるのかをさらに詳しく解説します。

WebSocketのメリット1:持続的接続¶

WebSocketのメリットの1つ目は「持続的接続」です。

一度接続が確立されると、WebSocketはその接続を維持し続けます。これにより、クライアントとサーバーの間で持続的な通信が可能になります。

接続が持続されるため、各リクエストごとに新たな接続を確立する必要がなく、遅延が減少します。

ただし、現在のHTTPも接続を再利用できるため、毎回必ず新しいTCP接続を作るという意味ではありません。

WebSocketの大きな特徴は、接続後にメッセージを継続して双方向に送れることです。

WebSocketのメリット2:低オーバーヘッド¶

WebSocketのメリットの2つ目は、「低オーバーヘッド」です。

「低オーバーヘッド」とは、通信プロトコルやシステムが動作する際に発生する追加の処理やデータ量が少ないことを指します。

WebSocketでは、一度接続が確立された後、データ送信に必要なプロトコルヘッダーのサイズが非常に小さいです。これに対して、HTTPでは各リクエストごとに比較的大きなヘッダーが含まれます。

例えば、HTTPリクエストには、URL、メソッド（GET, POSTなど）、ヘッダー情報（クッキー、ユーザーエージェント、認証情報など）が含まれ、これが毎回送信されます。

それに対して、WebSocketの場合、最初のハンドシェイク後は、ヘッダー情報が最小限で済み、データフレームのみが送受信されます。

短いメッセージを高頻度で送る場面では、この違いが効いてきます。

WebSocketを使う前に知っておきたい注意点¶

WebSocketは便利ですが、導入すれば自動的にリアルタイム機能が完成するわけではありません。

接続を長く維持するため、通常のHTTP APIとは異なる運用上の考慮が必要です。

切断と再接続を前提にする¶

スマートフォンの回線切り替え、Wi-Fiの不調、パソコンのスリープなどで接続は切れます。

クライアント側には、切断を検知し、時間を空けて再接続する処理が必要です。

切断直後に何度も再接続するとサーバーへ負荷がかかるため、待ち時間を少しずつ延ばす方法がよく使われます。

接続が生きているか確認する¶

通信がない状態では、途中のプロキシやロードバランサーが接続を終了することがあります。

そのため、定期的に小さなデータを送り、接続が生きているか確認する仕組みを入れます。WebSocketにはPingとPongという制御フレームもあります。

ブラウザAPIから直接Pingフレームを送る操作はできないため、アプリ独自の確認メッセージを使う構成もあります。

認証と権限確認が必要になる¶

WebSocketでも、誰が接続しているのかを確認しなければなりません。

接続時のCookieやトークンだけでなく、受信したメッセージごとに、そのユーザーが操作してよい対象かをサーバー側で確認します。

画面側でボタンを隠すだけでは、権限管理にはなりません。

リバースプロキシの設定を確認する¶

Nginxやクラウドのロードバランサーを経由する場合、WebSocketのUpgradeヘッダーやタイムアウト設定を確認します。

設定が合っていないと、開発環境では動くのに本番環境だけ接続できない、一定時間で切れるといった問題が起きます。

ネットワーク通信の基本から整理したい方は、次の記事も参考になります。

【関連記事】ネットワークの勉強は何から始める？初心者向け学習手順

WebSocket以外の方法も比較する¶

リアルタイム風の画面を作る方法は、WebSocketだけではありません。

要件によっては、一定間隔でHTTPリクエストを送るポーリングや、サーバーから一方向に更新を送るSSEの方が簡単です。

サーバーからブラウザへ通知するだけなら、双方向通信が必要ない場合もあります。

リアルタイムだからWebSocketと決めつけず、更新方向、頻度、実装と運用の複雑さを比較することが大切です。

まとめ¶

今回の記事では、WebSocketについて解説しました。

WebSocketは、クライアントとサーバーの接続を維持し、双方から必要なタイミングでデータを送るためのプロトコルです。

チャット、共同編集、通知、監視画面など、更新をすぐに反映したい機能で役立ちます。

一方で、切断後の再接続、認証、接続数、リバースプロキシのタイムアウトなども考えなければなりません。

HTTP、ポーリング、SSE、WebSocketには、それぞれ向いている場面があります。通信の仕組みを理解し、必要な機能に合った方法を選びましょう。

InfraAcademyでは、ネットワークやサーバーの基礎を、実際に手を動かしながら学べます。

ネットワーク入門講座を見る

ここまでお読みいただきありがとうございました！