Frontend Academy · レッスン

WebSocket API：open・message・close・error

WebSocket接続を作成し、messageイベントハンドラーでメッセージを送受信して、接続エラーと正常な切断を処理します。

「WebSocket API：open・message・close・error」はCoddyKit上の無料Frontend Academyレッスンです。これはレッスン1/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはFrontend Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Frontend Academyコースには全4レッスンが含まれています。

WebSocketを使う理由

HTTPはリクエストとレスポンスの方式です。リアルタイムアプリ（チャット、マルチプレイヤーゲーム、ライブ更新）では、持続的な双方向通信が必要です。WebSocketを使うと、開いたまま維持される単一のTCP接続を確立でき、双方がいつでもメッセージを送信できます。

WebSocketの作成

ws://またはwss://のURLを指定してWebSocketを作成します。アップグレードハンドシェイクはブラウザが処理します。

const ws = new WebSocket('wss://api.example.com/realtime');

// Always use wss:// (secure) in production

4つのイベント

WebSocketには4種類のイベントがあります。open（接続完了）、message（データ受信）、close（接続終了）、error（問題）です。

ws.addEventListener('open', () => {
  console.log('Connected');
  ws.send(JSON.stringify({ type: 'subscribe', channel: 'updates' }));
});

ws.addEventListener('message', (event) => {
  const data = JSON.parse(event.data);
  console.log('Received:', data);
});

ws.addEventListener('close', (event) => {
  console.log('Closed:', event.code, event.reason);
});

ws.addEventListener('error', (event) => {
  console.error('Error:', event);
});

メッセージの送信

ws.send()を使用します。文字列、ArrayBuffers、Blobs、またはArrayBufferViewを受け取ります。構造化データを送る場合は、先にJSON.stringifyを実行してください。

ws.send('hello');
ws.send(JSON.stringify({ type: 'chat', text: 'Hi' }));

// Binary:
const buffer = new ArrayBuffer(8);
ws.send(buffer);

メッセージの受信

event.dataを確認します。型はサーバーが送信したデータに対応します。オブジェクト形式のペイロードにはJSON.parseを使用してください。

ws.addEventListener('message', (event) => {
  // typeof event.data: string | ArrayBuffer | Blob
  if (typeof event.data === 'string') {
    const msg = JSON.parse(event.data);
    handleMessage(msg);
  }
});

接続状態（readyState）

ws.readyStateを確認します。CONNECTING=0、OPEN=1、CLOSING=2、CLOSED=3です。OPENになる前に送信しないでください。

if (ws.readyState === WebSocket.OPEN) {
  ws.send(message);
} else {
  console.warn('Not connected yet');
}

正常な切断

ws.close(code, reason)を呼び出します。標準の切断コードは、1000（正常終了）、1001（離脱）、1008（ポリシー違反）、1011（サーバーエラー）です。

ws.close(1000, 'User logged out');

再接続戦略

WebSocketは、ネットワークの変更やサーバーの再起動などによって切断されます。指数バックオフを使った再接続を実装してください。

let reconnectDelay = 1000;

function connect() {
  const ws = new WebSocket('wss://api/realtime');
  ws.addEventListener('open', () => { reconnectDelay = 1000; });
  ws.addEventListener('close', () => {
    setTimeout(connect, reconnectDelay);
    reconnectDelay = Math.min(reconnectDelay * 2, 30000);
  });
  return ws;
}

ハートビート／キープアライブ

アイドル状態のWebSocketは、約60秒後にプロキシやロードバランサーによって切断されます。接続を維持するため、25～30秒ごとにpingを送信してください。

let pingInterval;
ws.addEventListener('open', () => {
  pingInterval = setInterval(() => {
    if (ws.readyState === WebSocket.OPEN) {
      ws.send(JSON.stringify({ type: 'ping' }));
    }
  }, 25000);
});
ws.addEventListener('close', () => clearInterval(pingInterval));

認証

WebSocketはカスタムヘッダーをサポートしていません。選択肢は次のとおりです。1）WS URLのクエリ文字列トークン（?token=jwt）で認証する。2）接続後に認証メッセージを送信する。3）Cookieを使用する（同一オリジンなら自動的に機能します）。

// Query string:
const ws = new WebSocket(`wss://api/realtime?token=${jwt}`);

// Auth message:
ws.addEventListener('open', () => {
  ws.send(JSON.stringify({ type: 'auth', token: jwt }));
});

WebSocket用のReactフック

接続をリークさせないよう、WSのライフサイクルをカスタムフックにカプセル化します。

function useWebSocket(url) {
  const [messages, setMessages] = useState([]);
  const wsRef = useRef(null);

  useEffect(() => {
    const ws = new WebSocket(url);
    wsRef.current = ws;
    ws.addEventListener('message', (e) => {
      setMessages(m => [...m, JSON.parse(e.data)]);
    });
    return () => ws.close();
  }, [url]);

  return { messages, send: (msg) => wsRef.current?.send(JSON.stringify(msg)) };
}

WebSocketとHTTP/2とSSEの比較

WebSocket：全二重通信で、双方が送信できます。HTTP/2サーバープッシュ：非推奨です。Server-Sent Events：サーバーからクライアントへの一方向通信で、よりシンプルで自動再接続にも対応します。クライアントからも送信する必要がある場合（チャット）はWS、一方向の通知にはSSEを選択してください。

確認問題

正常かつ意図的な切断（ユーザーのログアウトなど）に使う標準のWebSocket切断コードは何ですか？

まとめ：WebSocket API

new WebSocket('wss://...')で接続を開始します。イベントはopen、message、close、errorの4種類です。send()はstring/ArrayBuffer/Blobを受け付け、オブジェクトにはJSON.stringifyを使用します。送信前にreadyStateを確認してください。正常な切断にはclose(1000)を使用します。指数バックオフで再接続し、接続維持のため25秒ごとにハートビートを送信します。認証にはクエリ文字列または認証メッセージを使用します。Reactではフックにまとめてください。

よくある質問

「WebSocket API：open・message・close・error」レッスンは無料ですか？

はい。「WebSocket API：open・message・close・error」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Frontend Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Frontend Academyコースには全4レッスンが含まれています。

「WebSocket API：open・message・close・error」で何を学びますか？

WebSocket接続を作成し、messageイベントハンドラーでメッセージを送受信して、接続エラーと正常な切断を処理します。ブラウザで直接実行するハンズオンコードでFrontend Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Frontend Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのFrontend Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン1/4です。

「WebSocket API：open・message・close・error」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このFrontend Academyレッスンでコードを書いて実行できますか？

はい。すべてのFrontend Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← Frontend Academyに戻る