function setupServerSentEvents(eventSourceUrl) {
  if (typeof EventSource === 'undefined') {
    console.error('EventSource is not supported by this browser.');
    return;
  }

  const eventSource = new EventSource(eventSourceUrl);

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

  // Listen for generic 'message' events
  eventSource.onmessage = (event) => {
    console.log('Received generic message:', event.data);
    try {
      const data = JSON.parse(event.data);
      // Process your generic data here
      console.log('Parsed generic data:', data);
    } catch (e) {
      console.error('Failed to parse generic message JSON:', e);
    }
  };

  // Listen for custom named events (if your server sends them, e.g., event: 'user_update')
  eventSource.addEventListener('user_update', (event) => {
    console.log('Received user_update event:', event.data);
    try {
      const userData = JSON.parse(event.data);
      // Update UI with user data
      console.log('User updated:', userData);
    } catch (e) {
      console.error('Failed to parse user_update JSON:', e);
    }
  });

  eventSource.onerror = (error) => {
    console.error('SSE Error:', error);
    // You might want to attempt to reconnect here
    if (eventSource.readyState === EventSource.CLOSED) {
      console.log('SSE connection closed. Attempting to reconnect in 5 seconds...');
      setTimeout(() => setupServerSentEvents(eventSourceUrl), 5000);
    }
  };

  eventSource.onclose = () => {
    console.log('SSE connection explicitly closed.');
  };

  // To explicitly close the connection later:
  // eventSource.close();
}

// Usage example:
// Assuming your server exposes an SSE endpoint at '/events'
// setupServerSentEvents('/events');