feat(ui): implement new event stream connection logic

Added a new event stream connection method to enhance the handling of
server events. This includes a reconnect mechanism for improved reliability
in case of connection errors. The configuration now allows toggling the
new event stream feature via `devNewEventStream`. Additionally, tests
were added to ensure the new functionality works as expected, including
reconnection behavior after an error.

Signed-off-by: Deluan <deluan@navidrome.org>

ui/src/eventStream.js

@@ -12,6 +12,49 @@ const newEventStream = async () => {
   return new EventSource(url)
 }
 
+let eventStream
+let reconnectTimer
+const RECONNECT_DELAY = 5000
+
+const setupHandlers = (stream, dispatchFn) => {
+  stream.addEventListener('serverStart', eventHandler(dispatchFn))
+  stream.addEventListener('scanStatus', throttledEventHandler(dispatchFn))
+  stream.addEventListener('refreshResource', eventHandler(dispatchFn))
+  if (config.enableNowPlaying) {
+    stream.addEventListener('nowPlayingCount', eventHandler(dispatchFn))
+  }
+  stream.addEventListener('keepAlive', eventHandler(dispatchFn))
+  stream.onerror = (e) => {
+    // eslint-disable-next-line no-console
+    console.log('EventStream error', e)
+    dispatchFn(serverDown())
+    if (stream) stream.close()
+    scheduleReconnect(dispatchFn)
+  }
+}
+
+const scheduleReconnect = (dispatchFn) => {
+  if (!reconnectTimer) {
+    reconnectTimer = setTimeout(() => {
+      reconnectTimer = null
+      connect(dispatchFn)
+    }, RECONNECT_DELAY)
+  }
+}
+
+const connect = async (dispatchFn) => {
+  try {
+    const stream = await newEventStream()
+    eventStream = stream
+    setupHandlers(stream, dispatchFn)
+    return stream
+  } catch (e) {
+    // eslint-disable-next-line no-console
+    console.log(`Error connecting to server:`, e)
+    scheduleReconnect(dispatchFn)
+  }
+}
+
 const eventHandler = (dispatchFn) => (event) => {
   const data = JSON.parse(event.data)
   if (event.type !== 'keepAlive') {
@@ -22,10 +65,7 @@ const eventHandler = (dispatchFn) => (event) => {
 const throttledEventHandler = (dispatchFn) =>
   throttle(eventHandler(dispatchFn), 100, { trailing: true })
 
-const startEventStream = async (dispatchFn) => {
-  if (!localStorage.getItem('is-authenticated')) {
-    return Promise.resolve()
-  }
+const startEventStreamLegacy = async (dispatchFn) => {
   return newEventStream()
     .then((newStream) => {
       newStream.addEventListener('serverStart', eventHandler(dispatchFn))
@@ -51,4 +91,22 @@ const startEventStream = async (dispatchFn) => {
     })
 }
 
+const startEventStreamNew = async (dispatchFn) => {
+  if (eventStream) {
+    eventStream.close()
+    eventStream = null
+  }
+  return connect(dispatchFn)
+}
+
+const startEventStream = async (dispatchFn) => {
+  if (!localStorage.getItem('is-authenticated')) {
+    return Promise.resolve()
+  }
+  if (config.devNewEventStream) {
+    return startEventStreamNew(dispatchFn)
+  }
+  return startEventStreamLegacy(dispatchFn)
+}
+
 export { startEventStream }