リアルタイム双方向通信用WebSocketサポート

WebSocket検出

WebSocketは単一のTCP接続上で永続的なフルデュプレックス通信チャネルを提供し、ブラウザとサーバー間のリアルタイムデータ交換を可能にします。

検出

const hasWebSocket = typeof WebSocket !== 'undefined';

接続ライフサイクル

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

ws.onopen = () => {
  console.log('接続完了');
  ws.send('Hello');
};

ws.onmessage = (event) => {
  console.log('受信:', event.data);
};

ws.onclose = (event) => {
  console.log('切断:', event.code, event.reason);
};

ws.onerror = (error) => {
  console.error('エラー:', error);
};

バイナリデータ

ws.binaryType = 'arraybuffer'; // or 'blob'
ws.send(new Uint8Array([1, 2, 3, 4]));

再接続戦略

function createReconnectingWS(url) {
  let ws;
  let retries = 0;
  const maxRetries = 10;

  function connect() {
    ws = new WebSocket(url);
    ws.onopen = () => { retries = 0; };
    ws.onclose = () => {
      if (retries < maxRetries) {
        const delay = Math.min(1000 * 2 ** retries, 30000);
        setTimeout(connect, delay);
        retries++;
      }
    };
  }

  connect();
  return { send: (d) => ws?.send(d) };
}

WebSocket vs 代替手段

機能	WebSocket	SSE	HTTP/2 Push	ロングポーリング
双方向	はい	いいえ（サーバーのみ）	いいえ	シミュレート
バイナリデータ	はい	いいえ	はい	はい
オーバーヘッド	低	低	低	高
プロキシフレンドリー	時々	はい	はい	はい