javascript - reconnect to event source when connection problem solved

Question

I have a simple server-sent-event code that sends random integers in each second, and a react app is listening the events.

When the connection is lost due to that the server stops sending events, I get the Event Source failed error.

When I start the server again, I would like React hooks app to try to reconnect to the server again then receive the events automatically.

What is the right way of doing this? Should I periodically send the connection requests when the connection is refused due to the error or is there a way to automatically detect this? I would like to use Hooks for the solution.

I am sharing the React source code snippet where event listening logic exists:

  const [listening, setListening] = useState(false);
  const [currencyList, setCurrencyList] = useState(0);

  useEffect(() => {
    if (!listening) {
        eventSource = new EventSource(currencyUrl);
        eventSource.onmessage = (event) => {
            const currencyList = JSON.parse(event.data);
            setCurrencyList(currencyList)
        }
        eventSource.onerror = (err) => {
            console.error("EventSource failed:", err);
        }
        setListening(true)
    }
    return () => {
        console.log("event closed")
    }
 }, [])

question from:https://stackoverflow.com/questions/65909627/reconnect-to-event-source-when-connection-problem-solved

Answer 1

Waitting for answers