WebSocket 基本接続 — const ws = new WebSocket(url); ws.onmessage = e => {}
WebSocket は「ブラウザとサーバーが双方向でリアルタイム通信できる仕組み」です。チャットやゲーム、株価更新など「常に最新情報をやり取りしたい」場面で使われます。初心者がまず覚えるのは「接続してメッセージを受け取る」ことです。
基本のコード例
// サーバーのURL（例: ws://localhost:8080 や wss://example.com/socket）
const ws = new WebSocket("ws://localhost:8080");
// 接続成功時
ws.onopen = () => {
console.log("接続しました");
// サーバーへメッセージ送信
ws.send("こんにちはサーバー！");
};
// メッセージ受信時
ws.onmessage = (e) => {
console.log("受信:", e.data);
};
// エラー発生時
ws.onerror = (err) => {
console.error("エラー:", err);
};
// 接続が閉じられた時
ws.onclose = () => {
console.log("接続終了");
};
new WebSocket(url): 接続開始。ws://は平文、wss://は暗号化（HTTPS相当）。- イベントハンドラ:
onopen/onmessage/onerror/oncloseを設定。 ws.send(...): サーバーへ文字列やバイナリを送信。
よく使うテンプレート集
チャット風の送受信
const ws = new WebSocket("wss://example.com/chat");
ws.onopen = () => {
console.log("チャット接続");
ws.send(JSON.stringify({ type: "join", user: "Aki" }));
};
ws.onmessage = (e) => {
const msg = JSON.parse(e.data);
console.log(`${msg.user}: ${msg.text}`);
};
定期的に心拍（ping）を送る
ws.onopen = () => {
setInterval(() => {
ws.send("ping");
}, 30000); // 30秒ごと
};
JSONデータをやり取り
ws.onmessage = (e) => {
try {
const data = JSON.parse(e.data);
console.log("受信オブジェクト:", data);
} catch {
console.log("受信テキスト:", e.data);
}
};
例題: 簡易チャットUI
<input id="msg" placeholder="メッセージ">
<button id="send">送信</button>
<ul id="log"></ul>
<script>
const ws = new WebSocket("ws://localhost:8080");
const log = document.getElementById("log");
ws.onopen = () => console.log("接続しました");
ws.onmessage = (e) => {
const li = document.createElement("li");
li.textContent = "受信: " + e.data;
log.appendChild(li);
};
document.getElementById("send").addEventListener("click", () => {
const msg = document.getElementById("msg").value;
ws.send(msg);
});
</script>
- 効果: 入力した文字をサーバーへ送信し、受信したメッセージをリストに追加。
実務でのコツ
- 接続URL: HTTPSサイトなら
wss://を使う。セキュリティ上必須。 - 再接続: ネット切断などで
oncloseが呼ばれる。必要なら再接続処理を入れる。 - JSONで統一: 複雑なデータは JSON にして送受信すると扱いやすい。
- エラーハンドリング:
onerrorでログを出す。サーバー側の状態確認にも役立つ。 - サーバー実装: Node.js なら
wsライブラリ、他言語でも WebSocket サーバーが用意されている。
ありがちなハマりポイントと対策
- 接続できない:
- 原因: URLが間違っている、サーバーがWebSocket対応していない。
- 対策: サーバー側が
Upgrade: websocketを処理しているか確認。
- 受信が文字列だけ:
- 対策: JSONを使うと構造化データを扱える。
- ブラウザで混在コンテンツエラー:
- 対策: HTTPSページでは
wss://を必ず使う。
- 対策: HTTPSページでは
練習問題（株価更新風）
<ul id="prices"></ul>
<script>
const ws = new WebSocket("wss://example.com/stocks");
const list = document.getElementById("prices");
ws.onmessage = (e) => {
const data = JSON.parse(e.data); // {symbol:"AAPL", price:123.45}
const li = document.createElement("li");
li.textContent = `${data.symbol}: ${data.price}`;
list.appendChild(li);
};
</script>
- 効果: サーバーから送られる株価をリアルタイムにリスト表示。
直感的な指針
- WebSocket = 双方向リアルタイム通信。
- 接続 → onopen、受信 → onmessage、送信 → send。
- JSONでやり取りすると拡張しやすい。
- 切断やエラーを考慮して再接続処理を入れると実用的。