Как реализовать восстановление подключения к WebSocket в React приложении?

Question

[Оля Копьёва]

Задача в том, чтобы восстанавливать подключение к WebSocket если соединение закрывается ненамеренно.
Пробовала делать так, но проблема в том, что после переоткрытия соединения сообщения приходят но webSocket.current.onmessage не работает.

export const useWebSocket = () => {
    const webSocket = useRef();

    useEffect(() => {
        webSocket.current = new WebSocket("ws://url");

        webSocket.current.onclose = event => {
            if (event.wasClean === false) webSocket.current = new WebSocket("ws://url");
        }
        webSocket.current.onmessage = event => {
            const { msg_type, data } = JSON.parse(event.data);

            switch (msg_type) {
                case "one_msg_type":
                    callOneFunction();
                    break;
                case "another_msg_type":
                    callAnotherFunction();
                    break;
            }
        };
        return () => webSocket.current.close();
    }, []);
}

Как можно это исправить? Нужно ли тут вообще использовать useRef?

Answer 1

[Robur]

if (event.wasClean === false) webSocket.current = new WebSocket("ws://url");

вы тут только создали новый сокет но больше ничего не сделали с ним. соответственно на приходящие сообщения ничего и не происходит.

надо заново присвоить onmessage (и onclose, иначе если соединение упадет еще раз, то уже ничего не произойдет)

Comments

[Оля Копьёва]

А как это можно переписать с useEffect?

[Robur]

function createMyWebSocket() {
 //.. тут создаете все точно так же, кроме onclose, onclose меняете так:
webSocket.current.onclose = event => {
            if (event.wasClean === false) createMyWebSocket()
        }
}

createMyWebSocket() 

return () => webSocket.current.close()