**Short answer:** run a small [Node](/courses/nodejs) server with Socket.IO that receives chat messages and broadcasts them to a room, then connect to it from [React](/courses/reactjs) with a single `socket.io-client` instance. Subscribe to events inside `useEffect`, store messages in state, and always remove listeners in the cleanup [function](/javascript/functions-in-javascript). ## How the pieces fit together ```text React client <--WebSocket (Socket.IO)--> Node server emit("chat:message") -----------------> io.to(room).emit("chat:message") on("chat:message") <----------------- broadcast to everyone in the room ``` ## 1. The Socket.IO server ```js // server.js import { createServer } from "node:http"; import { randomUUID } from "node:crypto"; import { Server } from "socket.io"; const httpServer = createServer(); const io = new Server(httpServer, { cors: { origin: "http://localhost:5173" }, // your React dev URL }); io.on("connection", (socket) => { socket.on("chat:join", (room) => { socket.join(room); }); socket.on("chat:message", ({ room, user, text }) => { io.to(room).emit("chat:message", { id: randomUUID(), user, text, at: Date.now(), }); }); }); httpServer.listen(4000); ``` The server owns the message `id` and timestamp, so clients cannot forge them. ## 2. One shared socket on the client ```js // socket.js import { io } from "socket.io-client"; export const socket = io("http://localhost:4000", { autoConnect: false }); ``` Create the socket **once, outside any component**. If you call `io()` inside a component body, every render opens a new connection. ## 3. The chat component ```jsx import { useEffect, useState } from "react"; import { socket } from "./socket"; export default function Chat({ room, user }) { const [messages, setMessages] = useState([]); const [text, setText] = useState(""); useEffect(() => { socket.connect(); socket.emit("chat:join", room); const onMessage = (message) => { setMessages((prev) => [...prev, message]); }; socket.on("chat:message", onMessage); return () => { socket.off("chat:message", onMessage); socket.disconnect(); }; }, [room]); function send(e) { e.preventDefault(); if (!text.trim()) return; socket.emit("chat:message", { room, user, text }); setText(""); } return (

{m.user}: {m.text}

); } ``` Why it is written this way: - **`socket.off` in the cleanup** prevents duplicate handlers. Without it, [React](/courses/reactjs) Strict Mode (which mounts effects twice in development) or a room change would show every message twice. - **`setMessages((prev) => [...prev, message])`** uses the functional form so the handler never reads a stale `messages` value. - **`key={m.id}`** gives each message a stable identity. ## 4. Production checklist - **Authenticate the socket.** Pass a token in `io(url, { auth: { token } })` and verify it in a server `io.use()` middleware. Never trust a `user` field sent by the client. - **Validate and limit input.** Check message length and rate-limit each socket. - **Persist messages.** Socket.IO only delivers live events. Save messages to a database and load history over a normal API call when the chat opens. - **Handle reconnects.** Socket.IO reconnects automatically; refetch missed messages on the `connect` event. - **Scale out.** With more than one server instance you need sticky sessions plus the Redis adapter so a broadcast reaches every client. - **Lock down CORS.** Allow only your real front-end origin. ## Common mistakes - Creating the socket inside the component, so a new connection opens on every render. - Forgetting `socket.off`, which causes duplicate messages. - Putting `messages` in the effect's dependency array, which tears down and recreates the listener on every message. - Trusting the client for user identity. ## Interview-ready summary > Create one Socket.IO client outside React, connect and subscribe inside `useEffect`, update state with the functional form of `setState`, and remove the listener in the cleanup. On the server, authenticate each connection, validate messages, broadcast to rooms, and persist history in a database. ## Going further: production-grade chat features - **Load history over HTTP, push new messages over the socket.** Fetch old messages from a [REST](/courses/expressjs) endpoint when the conversation opens, then let Socket.IO deliver only new ones. Treat the socket as a delivery channel, not the database. - - **Acknowledgements.** Pass a callback to `emit` so the client knows the server saved the message: `socket.emit("chat:message", payload, (ack) => { ... })`. Use it to show Sending, Sent or Failed with a retry button. - - **Optimistic messages.** Show the sender's own message immediately with a temporary id and `status: "sending"`, then replace it with the server's copy (matching on a client-generated id) so it never appears twice. - - **Typing indicators.** Emit short-lived `typing:start` and `typing:stop` events. They are ephemeral signals and should not be stored. - - **Presence.** One disconnected socket does not mean the user is offline: they may have another tab or device. Track presence on the server per authenticated user, not per socket. - - **Read receipts.** Emit `message:read` with the conversation and message id, and let the server verify the user belongs to that conversation before updating anything. - - **Private rooms.** Never let the client join an arbitrary room. Check conversation membership on the server before calling `socket.join`. - - **Ordering and deduplication.** Use server-generated ids and timestamps so clients can sort messages and drop duplicates after a reconnect. -