WebSockets and Server-Sent Events in React

The station's radar has to show ship positions live. A regular REST API works like a letter: the client asks, the server answers and the conversation ends. To see changes, you would have to ask every second, wasting bandwidth and battery. Real-time communication flips this model: the server sends data by itself when something happens. In the browser you have two technologies for this: WebSocket and Server-Sent Events (SSE).

WebSockets - Two-Way Real-Time Communication

A WebSocket starts like a regular HTTP request, then switches to its own protocol (ws:// or the encrypted wss://). From that moment both sides can send text or binary messages at any time. It is the best choice for chat, live notifications, stock data and games, meaning anywhere the client also transmits often.

Basic WebSocket Implementation

The useWebSocket hook wraps the whole connection lifecycle: connecting, receiving, sending, disconnecting and retrying:

1// hooks/useWebSocket.js
2import { useState, useEffect, useRef, useCallback } from 'react';
3
4const useWebSocket = (url, options = {}) => {
5  const [socket, setSocket] = useState(null);
6  const [lastMessage, setLastMessage] = useState(null);
7  const [readyState, setReadyState] = useState(0);
8  const [connectionError, setConnectionError] = useState(null);
9
10  // Socket, listeners and the retry counter in refs - changing them does not trigger a render
11  const socketRef = useRef(null);
12  const messageListeners = useRef(new Set());
13  const retryTimeoutRef = useRef(null);
14  const reconnectAttemptsRef = useRef(0);
15
16  // Latest options from the last render: callbacks passed inline
17  // do not change connect, so the effect does not reconnect
18  const optionsRef = useRef(options);
19  useEffect(() => {
20    optionsRef.current = options;
21  });
22
23  const { heartbeatInterval = 30000 } = options;
24
25  // Function to create connection - depends only on url
26  const connect = useCallback(() => {
27    const { protocols, reconnectAttempts = 5, reconnectInterval = 3000 } = optionsRef.current;
28
29    try {
30      const ws = new WebSocket(url, protocols);
31      socketRef.current = ws;
32
33      ws.onopen = (event) => {
34        console.log('WebSocket connected:', url);
35        setReadyState(1); // OPEN
36        setConnectionError(null);
37        reconnectAttemptsRef.current = 0;
38        optionsRef.current.onOpen?.(event);
39      };
40
41      ws.onmessage = (event) => {
42        let parsedData;
43        try {
44          parsedData = JSON.parse(event.data);
45        } catch {
46          parsedData = event.data;
47        }
48
49        setLastMessage({
50          data: parsedData,
51          timestamp: Date.now(),
52          raw: event.data
53        });
54
55        // Call all registered listeners
56        messageListeners.current.forEach(listener => {
57          listener(parsedData, event);
58        });
59
60        optionsRef.current.onMessage?.(parsedData, event);
61      };
62
63      ws.onclose = (event) => {
64        // Ignore events of an old socket (after reconnect or unmount)
65        if (socketRef.current !== ws) return;
66
67        console.log('WebSocket disconnected:', event.code, event.reason);
68        setReadyState(3); // CLOSED
69        setSocket(null);
70        optionsRef.current.onClose?.(event);
71
72        // Automatic reconnection
73        if (!event.wasClean && reconnectAttemptsRef.current < reconnectAttempts) {
74          reconnectAttemptsRef.current++;
75          console.log(`Reconnecting (${reconnectAttemptsRef.current}/${reconnectAttempts})...`);
76
77          retryTimeoutRef.current = setTimeout(() => {
78            connect();
79          }, reconnectInterval * reconnectAttemptsRef.current);
80        }
81      };
82
83      ws.onerror = (error) => {
84        if (socketRef.current !== ws) return;
85        console.error('WebSocket error:', error);
86        setConnectionError(error);
87        optionsRef.current.onError?.(error);
88      };
89
90      setSocket(ws);
91      setReadyState(0); // CONNECTING
92
93    } catch (error) {
94      console.error('Failed to create WebSocket:', error);
95      setConnectionError(error);
96    }
97  }, [url]);
98
99  // Sending messages
100  const sendMessage = useCallback((message) => {
101    const ws = socketRef.current;
102    if (ws && ws.readyState === WebSocket.OPEN) {
103      const dataToSend = typeof message === 'string' ? message : JSON.stringify(message);
104      ws.send(dataToSend);
105      return true;
106    } else {
107      console.warn('WebSocket is not connected');
108      return false;
109    }
110  }, []);
111
112  // Adding message listener
113  const addMessageListener = useCallback((listener) => {
114    messageListeners.current.add(listener);
115    return () => messageListeners.current.delete(listener);
116  }, []);
117
118  // Manual reconnection
119  const reconnect = useCallback(() => {
120    clearTimeout(retryTimeoutRef.current);
121    socketRef.current?.close();
122    reconnectAttemptsRef.current = 0;
123    connect();
124  }, [connect]);
125
126  // Disconnect
127  const disconnect = useCallback(() => {
128    clearTimeout(retryTimeoutRef.current);
129    socketRef.current?.close(1000, 'Closed by user');
130  }, []);
131
132  // Automatic connection on mount
133  useEffect(() => {
134    connect();
135
136    return () => {
137      clearTimeout(retryTimeoutRef.current);
138      const ws = socketRef.current;
139      socketRef.current = null; // the old socket's onclose will do nothing
140      ws?.close();
141    };
142  }, [connect]);
143
144  // Heartbeat - ping/pong
145  useEffect(() => {
146    if (socket && readyState === 1 && heartbeatInterval > 0) {
147      const interval = setInterval(() => {
148        if (socket.readyState === WebSocket.OPEN) {
149          sendMessage({ type: 'ping', timestamp: Date.now() });
150        }
151      }, heartbeatInterval);
152
153      return () => clearInterval(interval);
154    }
155  }, [socket, readyState, heartbeatInterval, sendMessage]);
156
157  return {
158    socket,
159    lastMessage,
160    readyState,
161    connectionError,
162    sendMessage,
163    addMessageListener,
164    reconnect,
165    disconnect,
166    isConnecting: readyState === 0,
167    isOpen: readyState === 1,
168    isClosing: readyState === 2,
169    isClosed: readyState === 3
170  };
171};
172
173export default useWebSocket;

readyState mirrors the socket states (0 connecting, 1 open, 2 closing, 3 closed), so you get a status indicator for free. sendMessage sends only while the connection is open, and after an unclean close the hook retries with a growing delay. A heartbeat every 30 seconds sends ping, so intermediaries do not drop an idle link.

The hook avoids two traps. Callbacks such as onOpen passed inline in the chat below, and the protocols array, are new on every render, so if connect depended on them, the effect would reopen the connection after every render. That is why the hook reads the options from optionsRef, refreshed after every render, and connect depends only on url. The socket itself lives in socketRef, because otherwise the cleanup would see the socket from the render in which the effect started, which is null. The hook ignores events from an old socket, closed by reconnect or on unmount, so it will not resume the connection after you leave the chat.

Real-Time Chat

After the connection opens, ChatRoom sends a join message, and it dispatches every received message with a switch statement based on the type field:

1// components/ChatRoom.jsx
2import React, { useState, useEffect, useRef } from 'react';
3import useWebSocket from '../hooks/useWebSocket';
4
5const ChatRoom = ({ roomId, userId, userName }) => {
6  const [messages, setMessages] = useState([]);
7  const [newMessage, setNewMessage] = useState('');
8  const [typingUsers, setTypingUsers] = useState(new Set());
9  const [onlineUsers, setOnlineUsers] = useState(new Map());
10  const messagesEndRef = useRef(null);
11  const typingTimeoutRef = useRef(null);
12
13  const {
14    sendMessage,
15    lastMessage,
16    isOpen,
17    connectionError,
18    addMessageListener
19  } = useWebSocket(`ws://localhost:8080/chat/${roomId}`, {
20    onOpen: () => {
21      // Join room
22      sendMessage({
23        type: 'join',
24        roomId,
25        userId,
26        userName
27      });
28    }
29  });
30
31  // Handle received messages
32  useEffect(() => {
33    if (!lastMessage) return;
34
35    const { data } = lastMessage;
36
37    switch (data.type) {
38      case 'message':
39        setMessages(prev => [...prev, {
40          id: data.id,
41          text: data.text,
42          userId: data.userId,
43          userName: data.userName,
44          timestamp: data.timestamp
45        }]);
46        break;
47
48      case 'typing':
49        setTypingUsers(prev => {
50          const newSet = new Set(prev);
51          if (data.isTyping && data.userId !== userId) {
52            newSet.add(data.userName);
53          } else {
54            newSet.delete(data.userName);
55          }
56          return newSet;
57        });
58        break;
59
60      case 'userJoined':
61        setOnlineUsers(prev => new Map(prev).set(data.userId, data.userName));
62        setMessages(prev => [...prev, {
63          id: `system-${Date.now()}`,
64          text: `${data.userName} joined the chat`,
65          type: 'system',
66          timestamp: Date.now()
67        }]);
68        break;
69
70      case 'userLeft':
71        setOnlineUsers(prev => {
72          const newMap = new Map(prev);
73          newMap.delete(data.userId);
74          return newMap;
75        });
76        setMessages(prev => [...prev, {
77          id: `system-${Date.now()}`,
78          text: `${data.userName} left the chat`,
79          type: 'system',
80          timestamp: Date.now()
81        }]);
82        break;
83
84      case 'messageDeleted':
85        setMessages(prev => prev.filter(msg => msg.id !== data.messageId));
86        break;
87
88      case 'messageEdited':
89        setMessages(prev => prev.map(msg =>
90          msg.id === data.messageId
91            ? { ...msg, text: data.newText, edited: true }
92            : msg
93        ));
94        break;
95    }
96  }, [lastMessage, userId]);
97
98  // Auto-scroll to latest message
99  useEffect(() => {
100    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
101  }, [messages]);
102
103  // Sending messages
104  const handleSendMessage = (e) => {
105    e.preventDefault();
106
107    if (newMessage.trim() && isOpen) {
108      sendMessage({
109        type: 'message',
110        text: newMessage.trim(),
111        roomId,
112        userId,
113        userName
114      });
115
116      setNewMessage('');
117      handleStopTyping();
118    }
119  };
120
121  // Typing handler
122  const handleTyping = (e) => {
123    setNewMessage(e.target.value);
124
125    if (!typingTimeoutRef.current) {
126      sendMessage({
127        type: 'typing',
128        isTyping: true,
129        userId,
130        userName,
131        roomId
132      });
133    }
134
135    clearTimeout(typingTimeoutRef.current);
136    typingTimeoutRef.current = setTimeout(() => {
137      handleStopTyping();
138    }, 2000);
139  };
140
141  const handleStopTyping = () => {
142    if (typingTimeoutRef.current) {
143      clearTimeout(typingTimeoutRef.current);
144      typingTimeoutRef.current = null;
145
146      sendMessage({
147        type: 'typing',
148        isTyping: false,
149        userId,
150        userName,
151        roomId
152      });
153    }
154  };
155
156  // Delete message
157  const handleDeleteMessage = (messageId) => {
158    sendMessage({
159      type: 'deleteMessage',
160      messageId,
161      userId
162    });
163  };
164
165  if (connectionError) {
166    return (
167      <div className="chat-error">
168        <h3>Chat connection error</h3>
169        <p>{connectionError.message}</p>
170        <button onClick={() => window.location.reload()}>
171          Try again
172        </button>
173      </div>
174    );
175  }
176
177  return (
178    <div className="chat-room">
179      <div className="chat-header">
180        <h2>Room: {roomId}</h2>
181        <div className="online-users">
182          Online ({onlineUsers.size}): {Array.from(onlineUsers.values()).join(', ')}
183        </div>
184        <div className="connection-status">
185          Status: {isOpen ? 'Connected' : 'Disconnected'}
186        </div>
187      </div>
188
189      <div className="chat-messages">
190        {messages.map(message => (
191          <div
192            key={message.id}
193            className={`message ${message.type === 'system' ? 'system' : ''} ${message.userId === userId ? 'own' : ''}`}
194          >
195            {message.type !== 'system' && (
196              <div className="message-header">
197                <span className="username">{message.userName}</span>
198                <span className="timestamp">
199                  {new Date(message.timestamp).toLocaleTimeString()}
200                </span>
201                {message.userId === userId && (
202                  <button
203                    onClick={() => handleDeleteMessage(message.id)}
204                    className="delete-btn"
205                  >
206                    Delete
207                  </button>
208                )}
209              </div>
210            )}
211            <div className="message-text">
212              {message.text}
213              {message.edited && <span className="edited"> (edited)</span>}
214            </div>
215          </div>
216        ))}
217
218        {typingUsers.size > 0 && (
219          <div className="typing-indicator">
220            {Array.from(typingUsers).join(', ')} is typing...
221          </div>
222        )}
223
224        <div ref={messagesEndRef} />
225      </div>
226
227      <form onSubmit={handleSendMessage} className="chat-input">
228        <input
229          type="text"
230          value={newMessage}
231          onChange={handleTyping}
232          onBlur={handleStopTyping}
233            disabled={!isOpen}
234          maxLength={500}
235        />
236        <button type="submit" disabled={!isOpen || !newMessage.trim()}>
237          Send
238        </button>
239      </form>
240    </div>
241  );
242};
243
244export default ChatRoom;

The typing, userJoined and messageEdited types are a protocol agreed with the server, not part of the WebSocket standard. The typing indicator sends isTyping: false after two seconds of silence, so it does not flood the server with messages.

Middleware and Authorization

As the chat grows, so do the rules for messages. WebSocketMiddleware passes them through a chain of functions, like a customs officer at the airlock:

1// utils/websocketMiddleware.js
2class WebSocketMiddleware {
3  constructor() {
4    this.middlewares = [];
5  }
6
7  use(middleware) {
8    this.middlewares.push(middleware);
9  }
10
11  async processIncoming(message, socket) {
12    let processedMessage = message;
13
14    for (const middleware of this.middlewares) {
15      try {
16        processedMessage = await middleware.incoming(processedMessage, socket);
17        if (!processedMessage) break; // Middleware can stop processing
18      } catch (error) {
19        console.error('Middleware error (incoming):', error);
20        break;
21      }
22    }
23
24    return processedMessage;
25  }
26
27  async processOutgoing(message, socket) {
28    let processedMessage = message;
29
30    for (const middleware of this.middlewares) {
31      try {
32        processedMessage = await middleware.outgoing(processedMessage, socket);
33        if (!processedMessage) break;
34      } catch (error) {
35        console.error('Middleware error (outgoing):', error);
36        break;
37      }
38    }
39
40    return processedMessage;
41  }
42}
43
44// Authentication middleware
45const authMiddleware = {
46  incoming: async (message, socket) => {
47    if (message.type === 'auth') {
48      const token = message.token;
49      const isValid = await validateToken(token);
50
51      if (isValid) {
52        socket.isAuthenticated = true;
53        socket.userId = getUserIdFromToken(token);
54        return { type: 'authSuccess', userId: socket.userId };
55      } else {
56        socket.close(4001, 'Unauthorized');
57        return null;
58      }
59    }
60
61    if (!socket.isAuthenticated && message.type !== 'auth') {
62      socket.send(JSON.stringify({
63        type: 'error',
64        message: 'Authentication required'
65      }));
66      return null;
67    }
68
69    return message;
70  },
71
72  outgoing: async (message, socket) => {
73    if (!socket.isAuthenticated && message.type !== 'authRequired') {
74      return null;
75    }
76    return message;
77  }
78};
79
80// Rate limiting middleware
81const rateLimitMiddleware = {
82  incoming: async (message, socket) => {
83    if (!socket.messageCount) {
84      socket.messageCount = 0;
85      socket.lastReset = Date.now();
86    }
87
88    const now = Date.now();
89    const timePassed = now - socket.lastReset;
90
91    // Reset every minute
92    if (timePassed > 60000) {
93      socket.messageCount = 0;
94      socket.lastReset = now;
95    }
96
97    socket.messageCount++;
98
99    // Maximum 100 messages per minute
100    if (socket.messageCount > 100) {
101      socket.send(JSON.stringify({
102        type: 'error',
103        message: 'Rate limit exceeded'
104      }));
105      return null;
106    }
107
108    return message;
109  },
110
111  outgoing: async (message, socket) => message
112};
113
114// Hook with middleware
115const useAdvancedWebSocket = (url, options = {}) => {
116  // Register the middleware once, on the first render (StrictMode would run an effect twice)
117  const middleware = useRef(null);
118  if (middleware.current === null) {
119    middleware.current = new WebSocketMiddleware();
120    middleware.current.use(authMiddleware);
121    middleware.current.use(rateLimitMiddleware);
122  }
123
124  const { sendMessage: baseSendMessage, socket, ...rest } = useWebSocket(url, {
125    ...options,
126    onMessage: async (data, event) => {
127      const processed = await middleware.current.processIncoming(data, event.target);
128      if (processed) {
129        options.onMessage?.(processed, event);
130      }
131    }
132  });
133
134  const sendMessage = useCallback(async (message) => {
135    if (socket) {
136      const processed = await middleware.current.processOutgoing(message, socket);
137      if (processed) {
138        return baseSendMessage(processed);
139      }
140    }
141    return false;
142  }, [socket, baseSendMessage]);
143
144  return {
145    ...rest,
146    sendMessage,
147    socket
148  };
149};

A middleware that returns null stops the message. useAdvancedWebSocket registers the middleware once, on the first render, and takes the socket from useWebSocket. Real authorization and rate limiting must still run on the server, though, because the user can change code in the browser, and on the client side such middleware only keeps traffic tidy.

Server-Sent Events (SSE) - One-Way Communication

SSE is a regular HTTP response with the text/event-stream type, which the server does not close, but keeps appending new events to. Data flows only from the server to the client, and only as text. In return, the browser's EventSource resumes a dropped connection by itself and sends the Last-Event-ID header, so no events are lost. The useServerSentEvents hook wraps it and handles named events:

1// hooks/useServerSentEvents.js
2import { useState, useEffect, useRef, useCallback } from 'react';
3
4const useServerSentEvents = (url, options = {}) => {
5  const [data, setData] = useState(null);
6  const [readyState, setReadyState] = useState(0);
7  const [error, setError] = useState(null);
8  const eventSourceRef = useRef(null);
9  const listenersRef = useRef(new Map());
10
11  // Latest options without reconnecting, as in useWebSocket
12  const optionsRef = useRef(options);
13  useEffect(() => {
14    optionsRef.current = options;
15  });
16
17  const { withCredentials = false } = options;
18
19  const connect = useCallback(() => {
20    try {
21      const eventSource = new EventSource(url, { withCredentials });
22      eventSourceRef.current = eventSource;
23
24      eventSource.onopen = (event) => {
25        console.log('SSE connected:', url);
26        setReadyState(1); // OPEN
27        setError(null);
28        optionsRef.current.onOpen?.(event);
29      };
30
31      eventSource.onmessage = (event) => {
32        let parsedData;
33        try {
34          parsedData = JSON.parse(event.data);
35        } catch {
36          parsedData = event.data;
37        }
38
39        setData({
40          data: parsedData,
41          timestamp: Date.now(),
42          id: event.lastEventId,
43          type: event.type
44        });
45
46        optionsRef.current.onMessage?.(parsedData, event);
47      };
48
49      eventSource.onerror = (event) => {
50        console.error('SSE error:', event);
51        setReadyState(eventSource.readyState); // 0 = the browser is reconnecting, 2 = closed
52        setError(event);
53        optionsRef.current.onError?.(event);
54      };
55
56      // Add custom event listeners
57      listenersRef.current.forEach((listener, eventType) => {
58        eventSource.addEventListener(eventType, listener);
59      });
60
61    } catch (err) {
62      console.error('Failed to create EventSource:', err);
63      setError(err);
64    }
65  }, [url, withCredentials]);
66
67  const addEventListener = useCallback((eventType, listener) => {
68    listenersRef.current.set(eventType, listener);
69
70    if (eventSourceRef.current) {
71      eventSourceRef.current.addEventListener(eventType, listener);
72    }
73
74    return () => {
75      listenersRef.current.delete(eventType);
76      if (eventSourceRef.current) {
77        eventSourceRef.current.removeEventListener(eventType, listener);
78      }
79    };
80  }, []);
81
82  const close = useCallback(() => {
83    if (eventSourceRef.current) {
84      eventSourceRef.current.close();
85      eventSourceRef.current = null;
86      setReadyState(2);
87    }
88  }, []);
89
90  useEffect(() => {
91    connect();
92
93    return () => {
94      close();
95    };
96  }, [connect, close]);
97
98  return {
99    data,
100    readyState,
101    error,
102    addEventListener,
103    close,
104    reconnect: connect,
105    isConnecting: readyState === 0,
106    isOpen: readyState === 1,
107    isClosed: readyState === 2
108  };
109};
110
111export default useServerSentEvents;

onmessage catches unnamed events, and addEventListener('metrics', ...) the ones with the event: metrics field. In onerror the hook stores eventSource.readyState: 0 means the browser is reconnecting by itself, and 2 that the connection was closed for good. Retries are decided by the browser and the retry: field sent by the server, so the hook does not count attempts itself. It reads the options from optionsRef, just like useWebSocket, so an onMessage passed inline does not reopen the connection on every render.

LiveDashboard listens for four named events: metrics, notifications, status and alerts:

1// components/LiveDashboard.jsx
2import React, { useState, useEffect } from 'react';
3import useServerSentEvents from '../hooks/useServerSentEvents';
4
5const LiveDashboard = () => {
6  const [metrics, setMetrics] = useState({
7    activeUsers: 0,
8    serverLoad: 0,
9    memoryUsage: 0,
10    requestsPerSecond: 0
11  });
12
13  const [notifications, setNotifications] = useState([]);
14  const [systemStatus, setSystemStatus] = useState('healthy');
15  const [lastUpdate, setLastUpdate] = useState(null);
16
17  const { data, isOpen, error, addEventListener } = useServerSentEvents(
18    '/api/dashboard/stream',
19    {
20      onMessage: (data) => {
21        setLastUpdate(new Date());
22      }
23    }
24  );
25
26  // Handler for different event types
27  useEffect(() => {
28    const removeMetricsListener = addEventListener('metrics', (event) => {
29      const metricsData = JSON.parse(event.data);
30      setMetrics(metricsData);
31    });
32
33    const removeNotificationListener = addEventListener('notification', (event) => {
34      const notification = JSON.parse(event.data);
35      setNotifications(prev => [notification, ...prev.slice(0, 9)]); // Maximum 10 notifications
36    });
37
38    const removeStatusListener = addEventListener('status', (event) => {
39      const status = JSON.parse(event.data);
40      setSystemStatus(status.level);
41    });
42
43    const removeAlertListener = addEventListener('alert', (event) => {
44      const alert = JSON.parse(event.data);
45
46      // Show alert as browser notification
47      if (Notification.permission === 'granted') {
48        new Notification(`System Alert: ${alert.type}`, {
49          body: alert.message,
50          icon: '/icons/alert.png'
51        });
52      }
53
54      setNotifications(prev => [{
55        ...alert,
56        type: 'alert',
57        timestamp: Date.now()
58      }, ...prev.slice(0, 9)]);
59    });
60
61    return () => {
62      removeMetricsListener();
63      removeNotificationListener();
64      removeStatusListener();
65      removeAlertListener();
66    };
67  }, [addEventListener]);
68
69  // Ask for permission after a click: Firefox and Safari ignore a request without a user gesture
70  const [notificationPermission, setNotificationPermission] = useState(Notification.permission);
71
72  const requestNotifications = async () => {
73    setNotificationPermission(await Notification.requestPermission());
74  };
75
76  const getStatusColor = (status) => {
77    switch (status) {
78      case 'healthy': return '#4CAF50';
79      case 'warning': return '#FF9800';
80      case 'critical': return '#F44336';
81      default: return '#9E9E9E';
82    }
83  };
84
85  const getMetricColor = (value, thresholds) => {
86    if (value >= thresholds.critical) return '#F44336';
87    if (value >= thresholds.warning) return '#FF9800';
88    return '#4CAF50';
89  };
90
91  if (error) {
92    return (
93      <div className="dashboard-error">
94        <h2>Dashboard connection error</h2>
95        <p>Unable to establish connection to the monitoring server.</p>
96        <button onClick={() => window.location.reload()}>
97          Refresh page
98        </button>
99      </div>
100    );
101  }
102
103  return (
104    <div className="live-dashboard">
105      <header className="dashboard-header">
106        <h1>Live Dashboard</h1>
107        <div className="connection-info">
108          <span
109            className={`status-indicator ${isOpen ? 'connected' : 'disconnected'}`}
110            style={{ backgroundColor: isOpen ? '#4CAF50' : '#F44336' }}
111          />
112          {isOpen ? 'Connected' : 'Disconnected'}
113          {lastUpdate && (
114            <span className="last-update">
115              Last update: {lastUpdate.toLocaleTimeString()}
116            </span>
117          )}
118        </div>
119        {notificationPermission === 'default' && (
120          <button onClick={requestNotifications}>Enable notifications</button>
121        )}
122      </header>
123
124      <div className="metrics-grid">
125        <div className="metric-card">
126          <h3>Active Users</h3>
127          <div
128            className="metric-value"
129            style={{ color: getMetricColor(metrics.activeUsers, { warning: 1000, critical: 1500 }) }}
130          >
131            {metrics.activeUsers.toLocaleString()}
132          </div>
133        </div>
134
135        <div className="metric-card">
136          <h3>Server Load</h3>
137          <div
138            className="metric-value"
139            style={{ color: getMetricColor(metrics.serverLoad, { warning: 70, critical: 90 }) }}
140          >
141            {metrics.serverLoad}%
142          </div>
143          <div className="progress-bar">
144            <div
145              className="progress-fill"
146              style={{
147                width: `${metrics.serverLoad}%`,
148                backgroundColor: getMetricColor(metrics.serverLoad, { warning: 70, critical: 90 })
149              }}
150            />
151          </div>
152        </div>
153
154        <div className="metric-card">
155          <h3>Memory Usage</h3>
156          <div
157            className="metric-value"
158            style={{ color: getMetricColor(metrics.memoryUsage, { warning: 80, critical: 95 }) }}
159          >
160            {metrics.memoryUsage}%
161          </div>
162          <div className="progress-bar">
163            <div
164              className="progress-fill"
165              style={{
166                width: `${metrics.memoryUsage}%`,
167                backgroundColor: getMetricColor(metrics.memoryUsage, { warning: 80, critical: 95 })
168              }}
169            />
170          </div>
171        </div>
172
173        <div className="metric-card">
174          <h3>Requests/sec</h3>
175          <div
176            className="metric-value"
177            style={{ color: getMetricColor(metrics.requestsPerSecond, { warning: 1000, critical: 2000 }) }}
178          >
179            {metrics.requestsPerSecond}
180          </div>
181        </div>
182      </div>
183
184      <div className="system-status">
185        <h3>System Status</h3>
186        <div
187          className="status-badge"
188          style={{
189            backgroundColor: getStatusColor(systemStatus),
190            color: 'white',
191            padding: '8px 16px',
192            borderRadius: '20px',
193            display: 'inline-block'
194          }}
195        >
196          {systemStatus.toUpperCase()}
197        </div>
198      </div>
199
200      <div className="notifications-panel">
201        <h3>Notifications ({notifications.length})</h3>
202        <div className="notifications-list">
203          {notifications.map((notification, index) => (
204            <div
205              key={index}
206              className={`notification ${notification.type || 'info'}`}
207            >
208              <div className="notification-content">
209                <strong>{notification.title || notification.type}</strong>
210                <p>{notification.message}</p>
211              </div>
212              <div className="notification-time">
213                {new Date(notification.timestamp).toLocaleTimeString()}
214              </div>
215            </div>
216          ))}
217        </div>
218      </div>
219    </div>
220  );
221};
222
223export default LiveDashboard;

Each listener returns a cleanup function, so the effect's cleanup detaches them all. An alert also goes to a system notification, if the user has agreed to them beforehand. A button asks for the permission, because Firefox and Safari ignore a permission request that does not come from a user gesture.

Choosing Between WebSockets and SSE

When to Use WebSockets

A collaborative editor is the textbook WebSocket case: every user transmits text changes and cursor movements, and at the same time receives everyone else's:

1// Example: Real-time collaboration application
2const CollaborativeEditor = () => {
3  const { sendMessage, lastMessage, isOpen } = useWebSocket('/ws/document/123');
4  const [documentContent, setDocumentContent] = useState('');
5  const [cursors, setCursors] = useState(new Map());
6
7  const handleTextChange = (newContent, position) => {
8    setDocumentContent(newContent);
9
10    // Send change to other users
11    sendMessage({
12      type: 'content_change',
13      content: newContent,
14      position,
15      userId: currentUser.id
16    });
17  };
18
19  const handleCursorMove = (position) => {
20    sendMessage({
21      type: 'cursor_move',
22      position,
23      userId: currentUser.id
24    });
25  };
26
27  useEffect(() => {
28    if (lastMessage) {
29      switch (lastMessage.data.type) {
30        case 'content_change':
31          setDocumentContent(lastMessage.data.content);
32          break;
33        case 'cursor_move':
34          setCursors(prev => new Map(prev).set(
35            lastMessage.data.userId,
36            lastMessage.data.position
37          ));
38          break;
39      }
40    }
41  }, [lastMessage]);
42
43  return (
44    <div className="collaborative-editor">
45      {/* Editor with real-time collaboration */}
46    </div>
47  );
48};