Websocket を自動で再接続したい
この記事を作った動機 Websocket を使ったフロントエンドで、自動的に接続が途切れたら再接続するコードを書くときに躓いたので、その記録をする。 Websocket の接続に関するエラーハンドリング Websocket が接続失敗したときに、やらせたい処理がある場合は、try-catch は使えない。接続に関する問題に対処するには、コールバック関数として、“error"イベントが発火されたときに処理を登録する必要がある。 Websocket は、非同期で実行されるため try-catch では接続できなかったときのエラーを拾えないようである。 うまくいかない例 // この例だと、reconnect 関数が実行されることはない。この形だと、WebScoket クラスに渡したパラメータ異常しか拾えない。 const setWebsocket = useDatabaseStore.setState; try{ const websocket = new WebSocket("ws://localhost:50097") setWebsocket({ websocket: websocket }) }catch(e){ console.log(e) reconnect() } うまくいく例 const setWebsocket = useDatabaseStore.setState; const websocket = new WebSocket("ws://localhost:50097") websocket.onerror = () => { reconnect() } setWebsocket({ websocket: websocket }) const setWebsocket = useDatabaseStore.setState; const websocket = new WebSocket("ws://localhost:50097") websocket.addEventListener("error",reconnect) setWebsocket({ websocket: websocket }) 参考にしたサイトとか ChatGPT https://chatgpt.com/ (2025年9月29日) WebSocket: close イベント - Web API | MDN https://developer.mozilla.org/ja/docs/Web/API/WebSocket/close_event (2025年9月29日) WebSocket: error イベント - Web API | MDN https://developer.mozilla.org/ja/docs/Web/API/WebSocket/error_event (2025年9月29日) WebSocket: WebSocket() コンストラクター - Web API | MDN https://developer.mozilla.org/ja/docs/Web/API/WebSocket/WebSocket (2025年9月29日)