Building Real-Time Features with Socket.io and React

Real-time features can transform user experience. Here's how to implement them effectively with Socket.io.

Setting Up Socket.io

Server Setup

const io = require('socket.io')(server, {
  cors: { origin: 'http://localhost:3000' }
});

io.on('connection', (socket) => {
  console.log('User connected:', socket.id);
  
  socket.on('message', (data) => {
    io.emit('message', data);
  });
});

React Client

import { io } from 'socket.io-client';

const socket = io('http://localhost:4000');

function Chat() {
  const [messages, setMessages] = useState([]);

  useEffect(() => {
    socket.on('message', (message) => {
      setMessages((prev) => [...prev, message]);
    });

    return () => socket.off('message');
  }, []);

  const sendMessage = (text) => {
    socket.emit('message', { text, timestamp: Date.now() });
  };

  return <ChatUI messages={messages} onSend={sendMessage} />;
}

Best Practices

Real-time features add complexity but deliver incredible user experiences when done right.