WebSocket 自動再接続をいい感じに処理する JavaScript 製ライブラリ ReconnectingWebSocket をご紹介します。

背景 WebSocket の自動再接続の実装が面倒

まず、背景として WebSocket の自動再接続処理はみんな必ず実装する処理なのに WebSocket では扱ってくれてないので独自実装しないといけません。

そこで「他の人はどうやって実装してるのかな？」と思い、Google 検索したところ joewalnes/reconnecting-websocket: A small decorator for the JavaScript WebSocket API that automatically reconnects というドンピシャなライブラリを見つけたので、早速 WebSocket の自動再接続処理を書き換えてみました。

自動再接続処理 WebSocket vs ReconnectingWebSocket

以下、WebSocket の自動再接続処理をプリミティブな WebSocketと ReconnectingWebSocket でそれぞれ実装した JavaScript サンプルコードをご紹介します。

WebSocket 自動再接続処理サンプルコード

• 参考情報: WebSocket - Web API | MDN

function connect() {
  const ws = new WebSocket('ws://localhost:8080');

  ws.onopen = () => {
    ws.send(JSON.stringify({

        //.... some message the I must send when I connect ....

    }));
  };

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

  ws.onclose = (event) => {
    console.log('Socket is closed. 3秒後に再接続します。', event.reason);
    setTimeout(() => {
      connect();
    }, 3000);
  };

  ws.onerror = (event) => {
    console.error(event.message);
    ws.close();
  };
}

connect();

ReconnectingWebSocket を使った自動再接続処理サンプルコード

function connect() {
  const ws = new ReconnectingWebSocket(
    'ws://localhost:8080',
    null,
    {
      debug: true,
      reconnectInterval: 3000
    }
  );

  ws.onopen = () => {
    ws.send(JSON.stringify({

        //.... some message the I must send when I connect ....

    }));
  };

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

  ws.onclose = (event) => {
    console.log('Socket is closed.', event.reason);
  };

  ws.onerror = (event) => {
    console.error(event.message);
  };
}

connect();

以上、WebSocket 自動再接続処理を ReconnectingWebSocket でいい感じに実装したい、現場からお送りしました。

参考情報

• WebSocket - JAVASCRIPT.INFO