How to use WebSockets with NextJS

Steps and Examples for Using WebSockets with Next.js

Step 1: Create a Next.js Application

First, ensure you have a Next.js application. If not, you can quickly create one using the following command:

bash
npx create-next-app my-next-app
cd my-next-app

Step 2: Install WebSocket Libraries

In your Next.js application, it is recommended to use libraries such as socket.io or ws to implement WebSocket functionality. For simplicity, we'll use socket.io-client on the client side.

bash
npm install socket.io-client

Step 3: Establish a WebSocket Connection

In your Next.js application, you can create and manage WebSocket connections within any component. The following is an example of establishing a WebSocket connection using socket.io-client within a component:

javascript
import { useEffect } from 'react';
import io from 'socket.io-client';

const socket = io('http://localhost:3000');  // Ensure the address matches your WebSocket server's address

function ChatComponent() {
  useEffect(() => {
    // Listen for WebSocket connection
    socket.on('connect', () => {
      console.log('WebSocket connected!');
    });

    // Receive messages from the server
    socket.on('message', message => {
      console.log('New message:', message);
    });

    // Disconnect the WebSocket connection when the component unmounts
    return () => {
      socket.off('connect');
      socket.off('message');
      socket.disconnect();
    };
  }, []);

  // Function to send messages to the server
  const sendMessage = (message) => {
    socket.emit('message', message);
  };

  return (
    <div>
      <h1>Chat</h1>
      <button onClick={() => sendMessage('Hello Server!')}>Send Message</button>
    </div>
  );
}

export default ChatComponent;

Step 4: Handle WebSocket on the Server

If you use Next.js API routes to set up WebSocket services, you can start a WebSocket server by customizing the server or leveraging Next.js capabilities. This is typically configured in the server.js file, requiring the use of Node.js's http module and socket.io:

javascript
const app = require('next')({ dev: true });
const server = require('http').createServer(app.getRequestHandler());
const io = require('socket.io')(server);

io.on('connection', socket => {
  console.log('Client connected');

  socket.on('message', (msg) => {
    console.log('Received message:', msg);
    socket.emit('message', 'Hello from Server!');
  });

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

server.listen(3000, () => {
  console.log('Server running on http://localhost:3000');
});

Summary

Using WebSockets in a Next.js application primarily involves configuring both the client and server sides. The client establishes connections, sends, and receives messages using socket.io-client, while the server receives and sends messages using socket.io. This approach enables real-time communication functionality within Next.js applications.