Consuming Real-Time Updates with Server-Sent Events (SSE)

function setupSseConnection(sseEndpoint, onMessageCallback, onErrorCallback, onOpenCallback) {
  if (!window.EventSource) {
    console.error('Your browser does not support Server-Sent Events.');
    return;
  }

  const eventSource = new EventSource(sseEndpoint);

  eventSource.onopen = (event) => {
    console.log('SSE connection opened.', event);
    if (onOpenCallback) onOpenCallback(event);
  };

  eventSource.onmessage = (event) => {
    console.log('Received generic SSE message:', event.data);
    if (onMessageCallback) onMessageCallback(JSON.parse(event.data));
  };

  // Listen for custom event types if the API sends them
  // eventSource.addEventListener('update', (event) => {
  //   console.log('Received custom update event:', event.data);
  //   // Handle specific 'update' event data
  // });

  eventSource.onerror = (error) => {
    console.error('SSE Error:', error);
    if (onErrorCallback) onErrorCallback(error);
    // Optionally close the connection and try to reconnect
    // eventSource.close();
    // setTimeout(() => setupSseConnection(sseEndpoint, onMessageCallback, onErrorCallback, onOpenCallback), 5000);
  };

  // Function to close the connection when no longer needed
  const closeConnection = () => {
    eventSource.close();
    console.log('SSE connection closed.');
  };

  return closeConnection; // Return a function to allow external closing
}

// Usage example:
// const sseClose = setupSseConnection(
//   '/api/events',
//   (data) => {
//     console.log('Data from SSE:', data);
//     // Update UI with new data
//   },
//   (error) => {
//     console.error('SSE connection error:', error);
//   },
//   () => {
//     console.log('SSE connection successfully established!');
//   }
// );

// // To close the connection after some time or on component unmount:
// // setTimeout(() => sseClose(), 60000);