Building a Real-Time Chat Application Using Next.js and WebSockets

In today’s digital landscape, real-time communication applications have become essential for businesses and developers alike. With the rise of remote work and online interactions, having a reliable chat application is crucial. In this article, we’ll walk through building a real-time chat application using Next.js and WebSockets, two powerful technologies that can help you create an engaging and responsive user experience.

What is Next.js?

Next.js is a popular React framework that enables developers to build server-rendered applications with ease. It offers features like static site generation, server-side rendering, and API routes, making it ideal for modern web applications. Whether you're building a personal project or a robust production app, Next.js simplifies the development process, allowing you to focus on building seamless user experiences.

What are WebSockets?

WebSockets are a communication protocol that provides full-duplex communication channels over a single TCP connection. This means that both the client and server can send and receive messages simultaneously, making it perfect for real-time applications like chat systems. Unlike traditional HTTP requests, WebSockets maintain a persistent connection, reducing latency and enhancing performance.

Use Cases for Real-Time Chat Applications

Real-time chat applications have a range of use cases, including:

• Customer Support: Allowing users to chat with support representatives in real time.
• Social Networking: Enabling users to communicate instantly with friends and followers.
• Team Collaboration: Facilitating communication among team members in a work environment.
• Online Gaming: Providing players with a platform to communicate during gameplay.

Prerequisites

Before we dive into the coding part, make sure you have the following:

• Basic knowledge of JavaScript and React
• Node.js and npm installed on your machine
• A code editor like Visual Studio Code

Step-by-Step Guide to Building a Real-Time Chat Application

Step 1: Set Up Your Next.js Project

First, let's create a new Next.js application. Open your terminal and run the following command:

npx create-next-app real-time-chat-app
cd real-time-chat-app

Step 2: Install Required Packages

We need to install ws, a popular WebSocket library. Run:

npm install ws

Step 3: Create the WebSocket Server

Next, create a folder named server in the root directory of your project. Inside the server folder, create a file named index.js and add the following code:

const WebSocket = require('ws');

const server = new WebSocket.Server({ port: 8080 });

server.on('connection', (socket) => {
    console.log('New client connected');

    socket.on('message', (message) => {
        console.log(`Received: ${message}`);
        // Broadcast the message to all clients
        server.clients.forEach((client) => {
            if (client.readyState === WebSocket.OPEN) {
                client.send(message);
            }
        });
    });

    socket.on('close', () => {
        console.log('Client disconnected');
    });
});

console.log('WebSocket server is running on ws://localhost:8080');

This code sets up a WebSocket server that listens for incoming connections and broadcasts messages to all connected clients.

Step 4: Create the Chat Interface

Now, let's create a simple chat interface. Open the pages/index.js file and replace its content with the following code:

import { useEffect, useState } from 'react';

export default function Home() {
    const [messages, setMessages] = useState([]);
    const [input, setInput] = useState('');
    const [socket, setSocket] = useState(null);

    useEffect(() => {
        const ws = new WebSocket('ws://localhost:8080');

        ws.onmessage = (event) => {
            setMessages((prev) => [...prev, event.data]);
        };

        setSocket(ws);

        return () => ws.close();
    }, []);

    const sendMessage = (e) => {
        e.preventDefault();
        if (input) {
            socket.send(input);
            setInput('');
        }
    };

    return (
        <div>
            <h1>Real-Time Chat Application</h1>
            <div>
                {messages.map((msg, index) => (
                    <div key={index}>{msg}</div>
                ))}
            </div>
            <form onSubmit={sendMessage}>
                <input 
                    type="text" 
                    value={input} 
                    onChange={(e) => setInput(e.target.value)} 
                    placeholder="Type your message here..." 
                />
                <button type="submit">Send</button>
            </form>
        </div>
    );
}

Step 5: Run the WebSocket Server

Open a new terminal window and navigate to the server directory. Start your WebSocket server by running:

node index.js

Step 6: Start Your Next.js Application

Navigate back to your project root and start your Next.js application:

npm run dev

Now, open your browser and go to http://localhost:3000. You should see your chat application interface.

Step 7: Testing the Chat Application

Open multiple browser tabs pointing to http://localhost:3000. Type messages in one tab and press "Send." You should see the messages appear in all open tabs in real time.

Troubleshooting Common Issues

• WebSocket Connection Error: Ensure your WebSocket server is running on the correct port (8080 in this example).
• CORS Issues: If you encounter cross-origin request issues, consider using a library such as cors in your server setup.
• Message Not Appearing: Check if the message is being sent correctly and if the event listeners are set up properly.

Conclusion

Building a real-time chat application using Next.js and WebSockets is a rewarding project that enhances your understanding of modern web development. By following the steps outlined in this article, you can create a fully functional chat application that supports real-time communication. Experiment with additional features like user authentication, message history, or even file sharing to take your application to the next level. Happy coding!