Close Menu
    DevStackTipsDevStackTips
    • Home
    • News & Updates
      1. Tech & Work
      2. View All

      Web Components: Working With Shadow DOM

      July 28, 2025

      Google’s new Opal tool allows users to create mini AI apps with no coding required

      July 28, 2025

      Designing Better UX For Left-Handed People

      July 25, 2025

      This week in AI dev tools: Gemini 2.5 Flash-Lite, GitLab Duo Agent Platform beta, and more (July 25, 2025)

      July 25, 2025

      Microsoft wants you to chat with its browser now – but can you trust this Copilot?

      July 28, 2025

      I tested the Dell XPS’ successor – here are the biggest upgrades (and what’s the same)

      July 28, 2025

      I’m a Linux pro – here are my top 5 command line backup tools for desktops and servers

      July 28, 2025

      Should you buy a refurbished iPad? I tried one from Back Market and here’s my verdict

      July 28, 2025
    • Development
      1. Algorithms & Data Structures
      2. Artificial Intelligence
      3. Back-End Development
      4. Databases
      5. Front-End Development
      6. Libraries & Frameworks
      7. Machine Learning
      8. Security
      9. Software Engineering
      10. Tools & IDEs
      11. Web Design
      12. Web Development
      13. Web Security
      14. Programming Languages
        • PHP
        • JavaScript
      Featured

      elegantweb/sanitizer

      July 28, 2025
      Recent

      elegantweb/sanitizer

      July 28, 2025

      Streamlined String Encryption with Laravel’s Fluent Methods

      July 28, 2025

      Resume PHP

      July 28, 2025
    • Operating Systems
      1. Windows
      2. Linux
      3. macOS
      Featured

      Gamers bypass UK age verification with Death Stranding — no real face or VPN required

      July 28, 2025
      Recent

      Gamers bypass UK age verification with Death Stranding — no real face or VPN required

      July 28, 2025

      New Xbox games launching this week, from July 28 through August 3 — Grounded 2 arrives on Xbox Game Pass

      July 28, 2025

      TikTok’s owner forked Microsoft’s Visual Studio Code and concerns have been raised — reports suggest it’s resource heavy and never stops ‘phoning home’

      July 28, 2025
    • Learning Resources
      • Books
      • Cheatsheets
      • Tutorials & Guides
    Home»Development»Real-Time Communication in Next.js Using Socket.IO: A Beginner’s Guide

    Real-Time Communication in Next.js Using Socket.IO: A Beginner’s Guide

    June 9, 2025

    In today’s web landscape, users expect instant feedback-whether it’s receiving a new chat message, seeing a real-time stock price update, or getting notified when someone comments on a post. This shift has made real-time communication essential for modern applications.

    In this beginner-friendly tutorial, we’ll explore how to build real-time features in a Next.js app using Socket.IO. You’ll understand the fundamentals, build a simple real-time chat, and learn how to integrate Socket.IO cleanly into a Next.js environment.

    What Is Socket.IO?

    Socket.IO is a JavaScript library that facilitates real-time, bi-directional communication between web clients and servers. It uses WebSockets under the hood but adds many improvements:

    • Fallback mechanisms: Works even when WebSockets aren’t supported (e.g., via long-polling)
    • Event-based communication model
    • Automatic reconnection
    • Broadcasting support

    This makes it ideal for applications like:

    • Chat systems
    • Live notifications
    • Multiplayer games
    • Online collaboration tools
    • Real-time analytics dashboards

    Why Use Socket.IO with Next.js?

    Next.js, as a full-stack React framework, offers static and server-side rendering, routing, API routes, and more. But real-time communication isn’t built-in. That’s where Socket.IO fits perfectly.

    Benefits of using Socket.IO with Next.js:

    • Easily integrates with custom Express servers
    • Allows you to build both the frontend and backend in one unified project
    • Provides a seamless developer experience with React

    Project Setup: A Real-Time Chat App

    Let’s build a basic chat app to demonstrate real-time messaging

    Step 1: Create a New Next.js App

    Let’s start with a fresh project. Open your terminal and run:

    npx create-next-app@latest nextjs-socketio-chat
    cd nextjs-socketio-chat
    

    Step 2: Install Required Packages

    We need socket.io for the server and socket.io-client for the frontend. We’ll also use Express to create a custom server:

    npm install express socket.io socket.io-client

    Step 3: Setup a Custom Express Server

    Next.js supports custom servers for extending its capabilities. Here’s how to create one with Express and integrate Socket.IO.
    Create a file called server.js:

    const express = require('express');
    const next = require('next');
    const { createServer } = require('http');
    const { Server } = require('socket.io');
    const dev = process.env.NODE_ENV !== 'production';
    const app = next({ dev });
    const handle = app.getRequestHandler();
    
    app.prepare().then(() => {
    const expressApp = express();
    const server = createServer(expressApp);
    const io = new Server(server);
            // Real-time communication logic
            io.on('connection', (socket) => {
                    console.log('A user connected:', socket.id);
                socket.on('chat-message', (msg) => {
                         io.emit('chat-message', msg); // broadcast to all clients including sender (if you want to broadcast to all client excluding sender, you have to call socket.emit function instead of io.emit function)
                 });
    
                 socket.on('disconnect', () => {
                        console.log('User disconnected:', socket.id);
                 });
            });
    
            expressApp.all('*', (req, res) => handle(req, res));
    server.listen(3000, () => {
                    console.log('> Server running on http://localhost:3000');
            });
    });
    

    Step 4: Modify package.json Scripts

    Update your package.json to use your custom server:

    "scripts":  {
         "dev": "node server.js",       …
    }
    

     

    Run the development server:

    npm run dev

    Step 5: Build the Frontend Chat Component

    Create a file: src/components/Chat.tsx

    "use client";
    import { useEffect, useState } from "react";
    import { io } from "socket.io-client";
    
    const socket = io();
    
    export default function Chat() {
    const [message, setMessage] = useState("");
    const [chatLog, setChatLog] = useState< {
    message: string;
    timeStamp: number
    }[]
                                 >([]);
    
            useEffect(() => {
                    socket.on("chat-message", (messages) => {
                        setChatLog((prev) => [...prev, messages]);
    });
    
                    return () => {
                        socket.off("chat-message");
                 };
            }, []);
    
            
    const handleSend = () => {
    if (message.trim().length > 0) {
        const timeStamp = Date.now();
    socket.emit("chat-message", { message, timeStamp });   // you can add username or token also with this object after adding authentication flow
                        setMessage("");
                } else {
                        alert("Please enter message");
                }
            };
    
            return (
                    <div style={{ padding: "20px", maxWidth: "600px", margin: "auto" }}>
                        <h2>Real-Time Chat</h2>
                        <div style={{ display: "flex", gap: "10px" }}>
    <input
              value={message}
              onChange={(e) => setMessage(e.target.value)}
              placeholder="Type your message"
              style={{
                flex: 1,
                padding: "10px",
                border: "1px solid #ccc",
                borderRadius: 5,
              }}
    />
                            <button onClick={handleSend}>Send</button>
                        </div>
                        <ul style={{ marginTop: "20px", listStyle: "none" }}>
    {chatLog.map((chat, i) => (
    <li
    key={i}
    style={{
                  padding: 10,
                  border: "1px solid #ccc",
                  borderRadius: 5,
                  marginTop: 15,
    }}
                                    >
                                        {chat.message}
                                            <span style={{ display: "block", fontSize: 12, color: "#ccc" }}>- {new Date(chat.timeStamp).toLocaleString()}</span>
                                    </li>
    ))}
    </ul>
                    </div>
             );
    }
    

    Step 6: Load the Chat Component in a Page

    Update src/app/page.tsx:

    import Chat from "@/components/Chat";
    
    export default function Home() {
    return (
    <div>
                        <Chat />
    </div>
    );
    }
    

    Step 7: Test the Application

    Start the server:

    npm run dev

    Open http://localhost:3000 in two tabs or two different browsers.

    Send a message in one tab and it will instantly appear in the other.

    Output:

    Congratulations! You now have a working real-time chat app using Socket.IO and Next.js.

    How Socket.IO Works Under the Hood

    Socket.IO uses a publish/subscribe (pub-sub) pattern. Events like ‘chat-message’ act as channels that clients and servers subscribe to or emit.

    Key Concepts:

    • Socket: A persistent connection between the client and server
    • Events: Custom named messages exchanged (chat-message, user-joined)
    • Broadcasting: Send data to multiple clients at once

    Unlike HTTP requests which are client-initiated, sockets keep the connection open both ways.

    Advanced Socket.IO Features to Explore Later

    • Rooms: Group sockets together to send targeted messages
    • Namespaces: Create separate channels for different purposes
    • Middleware: Add authentication before accepting socket connections
    • Scaling: Use Redis adapter to scale Socket.IO across multiple servers

    Common Use Cases in Next.js Projects

    • Chat Applications: Support group or private messaging
    • Live Notifications: Show instant updates like “New order placed”
    • Collaborative Tools: Real-time whiteboards or documents
    • Live Dashboards: Auto-updating sales, user, or stock data
    • Gaming: Multiplayer games using sockets for live sync

    Conclusion

    Adding real-time features like chat, notifications, or live dashboards is easy and efficient when using Socket.IO with Next.js. With a custom server, dynamic client components, and event-driven messaging, you’re equipped to build responsive and interactive apps that users love.

    Socket.IO’s ease of use, power, and flexibility make it a go-to solution for real-time web communication.

    Source: Read More 

    Facebook Twitter Reddit Email Copy Link
    Previous ArticleUnderstanding Accessibility, Inclusive Design, and Universal Design
    Next Article Beginner’s Guide to Playwright Testing in Next.js

    Related Posts

    Development

    elegantweb/sanitizer

    July 28, 2025
    Development

    Streamlined String Encryption with Laravel’s Fluent Methods

    July 28, 2025
    Leave A Reply Cancel Reply

    For security, use of Google's reCAPTCHA service is required which is subject to the Google Privacy Policy and Terms of Use.

    Continue Reading

    Generate user-personalized communication with Amazon Personalize and Amazon Bedrock

    Generate user-personalized communication with Amazon Personalize and Amazon Bedrock

    Machine Learning

    Exploring GitHub CLI: How to interact with GitHub’s GraphQL API endpoint

    News & Updates

    CVE-2025-5137 – DedeCMS Distant Code Injection Vulnerability

    Common Vulnerabilities and Exposures (CVEs)

    CISA Warns of Active Exploitation of Linux Kernel Privilege Escalation Vulnerability

    Development

    Highlights

    CVE-2025-6122 – Code-projects Restaurant Order System SQL Injection

    June 16, 2025

    CVE ID : CVE-2025-6122

    Published : June 16, 2025, 1:15 p.m. | 1 hour, 5 minutes ago

    Description : A vulnerability, which was classified as critical, was found in code-projects Restaurant Order System 1.0. This affects an unknown part of the file /table.php. The manipulation of the argument ID leads to sql injection. It is possible to initiate the attack remotely. The exploit has been disclosed to the public and may be used.

    Severity: 6.3 | MEDIUM

    Visit the link for more details, such as CVSS details, affected products, timeline, and more…

    CVE-2025-4707 – Campcodes Sales and Inventory System SQL Injection Vulnerability

    May 15, 2025

    Why ads are coming to your favorite AI bots and you’ve only got yourself to blame

    June 13, 2025

    Liquid Glass

    June 13, 2025
    © DevStackTips 2025. All rights reserved.
    • Contact
    • Privacy Policy

    Type above and press Enter to search. Press Esc to cancel.