WebSocketの切断後に再接続するにはどうすればいい？基本の実装方法を解説

WebSocketに再接続する基本的な考え方

WebSocketの接続を再確立する最もシンプルな方法は、ソケットオブジェクトを再作成することです。そもそもWebSocketは、一度確立した接続を長時間維持し続けることを前提に設計されたプロトコルです。しかし、ネットワークの不安定さやサーバーのメンテナンスなどにより、接続が切断されることは避けられません。

oncloseイベントを活用した自動再接続

実用的なのが、サーバー側から接続を閉じる方式です。この方法を使うと、クライアント側のWebSocketで onclose イベントが発生します。このイベントをフックして新しいWebSocketインスタンスを生成すれば、切断後も自動的に接続を試み続ける仕組みを作れます。

そして、サーバー側が再びリスン状態になれば、接続は自動的に再確立されます。ユーザーは何も意識することなく、通信を継続できるのです。

実装例

以下のコードを実行すると、WebSocketへの自動再接続の動きを確認できます。

// ソケット変数の宣言
var mySocket;
const socketMessageListener = (event) => {
    console.log(event.data);
};

// 接続確立時
const socketOpenListener = (event) => {
    console.log('Connected');
    mySocket.send('hello');
};

// 切断時
const socketCloseListener = (event) => {
    if (mySocket) {
        console.error('Disconnected.');
    }
    // 新しいソケットを再作成して再接続
    mySocket = new WebSocket('ws://localhost:8080');
    mySocket.addEventListener('open', socketOpenListener);
    mySocket.addEventListener('message', socketMessageListener);
    mySocket.addEventListener('close', socketCloseListener);
};
socketCloseListener();

実装時のポイント

上記のコードでは、close イベントのリスナー内で再度 new WebSocket() を呼び出すことで、無限に再接続を繰り返す構造になっています。実際のプロダクトに組み込む場合は、以下の点にも注意しましょう。

• リトライ間隔の制御： 接続失敗が連続する場合、一定時間待機してから再接続する（いわゆる「指数バックオフ」）と、サーバーへの負荷を軽減できます。
• 最大リトライ回数の設定： 無期限に再接続を試みると無駄な通信が発生するため、上限を設けるのも有効です。
• UIへのフィードバック： 再接続中であることをユーザーに表示すると、アプリケーションの信頼性が向上します。

このような自動再接続の仕組みを実装しておけば、リアルタイム通信アプリにおいて安定したユーザー体験を提供できます。