Using WebSockets with Node.js and React for Real-Time Features

In today's connected world, real-time apps are more common than ever. From chat apps to live dashboards, users expect instant updates. If you're a self-taught developer or diving into the MERN stack, learning how to implement real-time features using WebSockets is a game-changer. This guide will walk you through the essentials of integrating WebSockets into your Node.js and React applications using socket.io.

This post is for junior developers looking to level up their full stack skills and understand how real-time communication works under the hood.

🔍 What Are WebSockets?

WebSockets are a communication protocol that allows for two-way, persistent communication between client and server. Unlike traditional HTTP requests, WebSockets maintain an open connection so data can flow in real-time—no refreshing or polling required.

📌 Why Use WebSockets?

• Build instant messaging apps
• Update data across clients in real-time (like dashboards)
• Enable real-time notifications or status updates
• Reduce latency and overhead from repeated HTTP requests

🛠️ Setting Up WebSockets in Node.js

We'll use socket.io for both backend and frontend. It's a popular library that simplifies WebSocket implementation.

Step 1: Backend Setup (Node.js + Express)

Install dependencies:

npm install express socket.io

Then, set up your server:

// server.js
const express = require('express');
const http = require('http');
const { Server } = require('socket.io');
const app = express();
const server = http.createServer(app);
const io = new Server(server, {
  cors: {
    origin: "http://localhost:3000", // React app
    methods: ["GET", "POST"]
  }
});

io.on('connection', (socket) => {
  console.log('A user connected:', socket.id);

  socket.on('send_message', (message) => {
    console.log('Message received:', message);
    io.emit('receive_message', message); // Broadcast to all clients
  });

  socket.on('disconnect', () => {
    console.log('User disconnected:', socket.id);
  });
});

server.listen(4000, () => {
  console.log('Server is running on port 4000');
});

Step 2: Frontend Setup (React)

Install the client library:

npm install socket.io-client

Connect from your React component:

// App.js
import React, { useEffect, useState } from 'react';
import { io } from 'socket.io-client';

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

function App() {
  const [message, setMessage] = useState('');
  const [messages, setMessages] = useState([]);

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

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

  const sendMessage = () => {
    socket.emit('send_message', message);
    setMessage('');
  };

  return (
    <div>
      <h2>Real-Time Chat</h2>
      <input value={message} onChange={(e) => setMessage(e.target.value)} />
      <button onClick={sendMessage}>Send</button>
      <ul>
        {messages.map((msg, idx) => (
          <li key={idx}>{msg}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

🔗 Related Blog Post

If you're just getting started with Express or want to build your own backend API, check out my tutorial: Build and Host a Free API with Express.

🧰 Recommended Tools & Libraries

• Socket.io – Core WebSocket library
• Postman – Test your APIs
• Ngrok – Expose localhost for testing sockets online

✅ Conclusion

Real-time apps can be a huge upgrade for your user experience—and with socket.io, they're not as difficult as they seem. Whether you're building a simple chat app or a collaborative tool, learning WebSockets gives you the power to go beyond CRUD and HTTP.

🔔 Try adding WebSockets to your next project, and see the difference it makes!

💬 Have thoughts, questions, or use cases? Drop a comment below or share how you used WebSockets in your app!

💖

Enjoyed the Post?

If my blog helped you, please consider supporting me!

Support Me 💖