JavaScript | Web API：通信・ネットワーク系 － WebSocket の概要

WebSocket は「つなぎっぱなしでしゃべり続けられる通信」

まずイメージからいきます。
ふつうの HTTP（fetch など）は「用があるときだけノックして、用が済んだらすぐ帰る」通信です。
リクエストを 1 回送って、レスポンスを 1 回受け取ったら、その接続は終わりです。

一方 WebSocket は、「一度つないだら、その線をつなぎっぱなしにして、両方向から何度でもしゃべれる」 通信です。
チャット、リアルタイム通知、ゲーム、株価のリアルタイム更新など、「サーバーからもどんどん話しかけてほしい」場面で使われます。

HTTP が「手紙のやり取り」だとしたら、
WebSocket は「電話をつなぎっぱなしにしておく」イメージです。

HTTP と WebSocket の一番大きな違い

HTTP は「クライアントからしか話しかけられない」

fetch を思い出してください。
必ず「クライアント（ブラウザ）がリクエストを送る」ことから始まります。

クライアントが「ください」と言わない限り、
サーバーから勝手に「これどうぞ」と送ることはできません。

だから、リアルタイム通知を HTTP だけでやろうとすると、

数秒おきに「何か新しいのある？」と聞き続ける（ポーリング）
サーバーから見れば「まだ？ まだ？」とずっと聞かれている状態

になってしまい、効率が悪くなります。

WebSocket は「サーバーからも自由に話しかけられる」

WebSocket では、一度接続を張ったあと、
クライアントからもサーバーからも、好きなタイミングでメッセージを送れます。

クライアントが「接続開始」のリクエストを送る
接続が確立したら、その線は開きっぱなし
サーバーは「新しいメッセージが来たよ」と即座に送れる

これによって、

チャットの新着メッセージ
ゲームの相手プレイヤーの動き
株価やセンサー値のリアルタイム更新

などを「ほぼリアルタイム」で届けられるようになります。

JavaScript からの WebSocket の基本的な使い方

接続を張る：new WebSocket(url)

ブラウザの JavaScript では、WebSocket クラスを使います。

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

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

ここでのポイントは、URL のスキームが ws:// または wss:// になることです。
wss:// は HTTPS に相当する「暗号化された WebSocket」です（基本こちらを使う）。

この時点では、まだ接続中です。
接続が開いたり、メッセージを受け取ったりするタイミングを、イベントで受け取ります。

イベントで状態を受け取る（open / message / close / error）

WebSocket には、いくつかの重要なイベントがあります。

socket.addEventListener("open", () => {
  console.log("接続が開きました");
  socket.send("こんにちは！");
});

socket.addEventListener("message", (event) => {
  console.log("サーバーからのメッセージ:", event.data);
});

socket.addEventListener("close", () => {
  console.log("接続が閉じられました");
});

socket.addEventListener("error", (error) => {
  console.error("エラーが発生しました", error);
});

socket.addEventListener("open", () => {
  console.log("接続が開きました");
  socket.send("こんにちは！");
});

socket.addEventListener("message", (event) => {
  console.log("サーバーからのメッセージ:", event.data);
});

socket.addEventListener("close", () => {
  console.log("接続が閉じられました");
});

socket.addEventListener("error", (error) => {
  console.error("エラーが発生しました", error);
});

open
接続が確立したタイミング。ここから send でメッセージを送れる。

message
サーバーからメッセージを受け取ったときに呼ばれる。event.data に中身が入っている。

close
接続が閉じられたとき（サーバー側・クライアント側どちらでも）。

error
エラーが起きたとき。

このイベントたちを使って、
「いつ送るか」「いつ表示を更新するか」を決めていきます。

メッセージを送る：socket.send(…)

接続が開いたら、send でメッセージを送れます。

socket.send("Hello WebSocket!");

socket.send("Hello WebSocket!");

文字列だけでなく、ArrayBuffer や Blob などのバイナリも送れますが、
初心者のうちは「文字列を送る」と思っておけば十分です。

実用的には「JSON を文字列として送る」が定番

JSON でメッセージの意味を表現する

チャットやゲームなど、少し複雑な情報をやり取りするときは、
JSON を文字列にして送る のが定番です。

例えば、チャットメッセージを送るとき。

const message = {
  type: "chat",
  user: "taro",
  text: "こんにちは！",
};

socket.send(JSON.stringify(message));

const message = {
  type: "chat",
  user: "taro",
  text: "こんにちは！",
};

socket.send(JSON.stringify(message));

サーバー側はこれを JSON としてパースして、
type や user を見て処理を分けます。

逆に、サーバーからも JSON が送られてくるとします。

socket.addEventListener("message", (event) => {
  const data = JSON.parse(event.data);

  if (data.type === "chat") {
    console.log(`${data.user}: ${data.text}`);
  } else if (data.type === "system") {
    console.log(`[SYSTEM] ${data.message}`);
  }
});

socket.addEventListener("message", (event) => {
  const data = JSON.parse(event.data);

  if (data.type === "chat") {
    console.log(`${data.user}: ${data.text}`);
  } else if (data.type === "system") {
    console.log(`[SYSTEM] ${data.message}`);
  }
});

こうやって、

「メッセージの種類（type）」
「中身（text や user）」

を JSON で表現することで、
一つの WebSocket 接続でいろいろな種類の情報をやり取りできます。

具体例：超シンプルなチャットクライアントのイメージ

HTML 側

<input id="msg" placeholder="メッセージを入力" />
<button id="send">送信</button>
<ul id="log"></ul>

JavaScript 側

const socket = new WebSocket("wss://example.com/chat");
const input = document.querySelector("#msg");
const button = document.querySelector("#send");
const log = document.querySelector("#log");

socket.addEventListener("open", () => {
  addLog("接続しました");
});

socket.addEventListener("message", (event) => {
  const data = JSON.parse(event.data);
  addLog(`${data.user}: ${data.text}`);
});

socket.addEventListener("close", () => {
  addLog("接続が閉じられました");
});

socket.addEventListener("error", () => {
  addLog("エラーが発生しました");
});

button.addEventListener("click", () => {
  const text = input.value;
  if (!text) return;

  const message = { type: "chat", user: "me", text };
  socket.send(JSON.stringify(message));
  input.value = "";
});

function addLog(text) {
  const li = document.createElement("li");
  li.textContent = text;
  log.appendChild(li);
}

const socket = new WebSocket("wss://example.com/chat");
const input = document.querySelector("#msg");
const button = document.querySelector("#send");
const log = document.querySelector("#log");

socket.addEventListener("open", () => {
  addLog("接続しました");
});

socket.addEventListener("message", (event) => {
  const data = JSON.parse(event.data);
  addLog(`${data.user}: ${data.text}`);
});

socket.addEventListener("close", () => {
  addLog("接続が閉じられました");
});

socket.addEventListener("error", () => {
  addLog("エラーが発生しました");
});

button.addEventListener("click", () => {
  const text = input.value;
  if (!text) return;

  const message = { type: "chat", user: "me", text };
  socket.send(JSON.stringify(message));
  input.value = "";
});

function addLog(text) {
  const li = document.createElement("li");
  li.textContent = text;
  log.appendChild(li);
}

ここでやっていることはシンプルです。

接続が開いたらログに表示
サーバーからメッセージが来たら JSON として解釈して表示
ボタンが押されたら、自分のメッセージを JSON にして送信

これだけで、「最低限のリアルタイムチャット」が成立します。

WebSocket を使うときに意識しておきたいポイント

接続のライフサイクルをちゃんと意識する

WebSocket は「つなぎっぱなし」なので、
「いつ接続して、いつ切るか」 を設計する必要があります。

ページを開いたら接続する
ページを閉じるときに socket.close() する
一定時間何もしていなければ切断する（サーバー側のポリシー）

などです。

接続が切れたときに自動で再接続するロジックを入れることも多いです。

function createSocket() {
  const socket = new WebSocket("wss://example.com/chat");

  socket.addEventListener("close", () => {
    console.log("切断されました。数秒後に再接続します。");
    setTimeout(createSocket, 3000);
  });

  return socket;
}

let socket = createSocket();

function createSocket() {
  const socket = new WebSocket("wss://example.com/chat");

  socket.addEventListener("close", () => {
    console.log("切断されました。数秒後に再接続します。");
    setTimeout(createSocket, 3000);
  });

  return socket;
}

let socket = createSocket();

こういう「落ちたときどうするか」を考えるのも、
リアルタイム通信の大事な部分です。

HTTP と WebSocket をどう使い分けるか

全部 WebSocket にすればいい、という話ではありません。

ユーザー情報の取得
設定画面の保存
一覧の初回ロード

のような「1 回取って終わり」の処理は、
fetch（HTTP）で十分です。

一方で、

チャットの新着メッセージ
ゲームの状態更新
リアルタイム通知

のような「サーバーからのプッシュが欲しい」部分だけ、
WebSocket を使うのが現実的です。

つまり、

「常に変化し続けるもの」 → WebSocket 向き
「たまに取ればいいもの」 → HTTP 向き

というイメージで分けると、設計しやすくなります。

初心者として WebSocket で本当に掴んでほしいこと

WebSocket は「一度つないだら、両方向から何度でもしゃべれる線」
HTTP と違って、サーバーからも自由にメッセージを送れるので、リアルタイム性が高い
JavaScript では new WebSocket(url) で接続し、open / message / close / error イベントで状態を扱う
実用的には「JSON を文字列にして送る」のが定番で、type などでメッセージの種類を分ける
接続が切れたときの再接続や、「どこまでを WebSocket にするか」の設計も重要

もし一歩踏み出すなら、
「サーバーは既にある WebSocket エコーサービス（送ったものをそのまま返すやつ）」を使って、
ブラウザから send → message で返ってくる、という小さな実験をしてみてください。

「自分が送った文字列が、サーバー経由でリアルタイムに返ってくる」
その感覚を一度味わうと、
「Web でもここまで“生きてる感じ”のある通信ができるんだ」と、ちょっとワクワクしてくるはずです。