← カテゴリ一覧に戻る

WebSocket（リアルタイム通信）

WebSocket onmessage send

WebSocketはサーバーとブラウザ間で双方向のリアルタイム通信を実現するプロトコルです。チャット・通知・ゲームなどに活用されます。

デモ：WebSocket チャット（シミュレーション）

未接続

接続するとメッセージが表示されます

コード例

js
// WebSocket 接続
const ws = new WebSocket('wss://echo.websocket.org');
// wss:// = TLS暗号化、ws:// = 非暗号化

// 接続成功時
ws.addEventListener('open', () => {
  console.log('接続完了');
  ws.send('こんにちは！');              // テキスト送信
  ws.send(JSON.stringify({ type: 'join', room: 'general' })); // JSON
});

// メッセージ受信時
ws.addEventListener('message', (e) => {
  const data = JSON.parse(e.data);
  console.log('受信:', data);
});

// エラー時
ws.addEventListener('error', (e) => {
  console.error('エラー:', e);
});

// 切断時
ws.addEventListener('close', (e) => {
  console.log('切断:', e.code, e.reason);
  // 自動再接続（指数バックオフ）
  setTimeout(reconnect, 1000);
});

// 切断
ws.close();
ws.close(1000, '正常終了'); // コードと理由

// 接続状態
ws.readyState; // 0=CONNECTING, 1=OPEN, 2=CLOSING, 3=CLOSED

比較：リアルタイム通信の手法

手法方向遅延用途
WebSocket双方向最小チャット、ゲーム、コラボ
SSE（EventSource）サーバー→クライアント小通知、ストリーミング、AI回答
Long Pollingサーバー→クライアント大対応が難しいサーバーへのフォールバック

NEWServer-Sent Events（EventSource）- AI チャットに最適

サーバーからクライアントへの一方向ストリーミング。ChatGPTのようなAI回答のストリーミング表示に使われます。

js
// クライアント（EventSource）
const sse = new EventSource('/api/stream');

sse.onmessage = (e) => {
  console.log('受信:', e.data);
  responseEl.textContent += e.data; // ストリーミング追記
};

sse.onerror = () => sse.close();

// サーバー側（Node.js）
// Content-Type: text/event-stream
res.write('data: こんにちは\n\n');
res.write('data: 世界！\n\n');
res.write('event: done\ndata: {}\n\n');

// fetch でストリーミング受信（AI APIで使われる方式）
const res = await fetch('/api/ai', { method: 'POST', body: prompt });
const reader = res.body.getReader();
const decoder = new TextDecoder();
while (true) {
  const { done, value } = await reader.read();
  if (done) break;
  output += decoder.decode(value);
}

🤖 AIプロンプトテンプレート

以下のようなWebSocket APIを使ったリアルタイム双方向通信のサンプルコードを生成してください：
- new WebSocket('wss://...')で接続し、open / message / close / errorイベントを処理する基本実装
- ws.send()でテキストとJSON.stringify()したオブジェクトを送信する方法
- ws.readyStateでCONNECTING / OPEN / CLOSING / CLOSEDの接続状態を確認する方法
- closeイベントで指数バックオフを使った自動再接続の実装パターン
- EventSource（SSE）を使ったサーバーからのストリーミング受信とAI応答表示への応用

⚠️ このプロンプトはあくまでたたき台です。AIの回答はモデルやバージョン、会話の文脈によって毎回異なります。意図通りに動かない場合は、条件を追記・修正してお使いください。

このサイトについて使用ライブラリ一覧☕ Buy Me a Coffee
© UI Memo