How to Integrate Next.js with Socket.IO?

1    npx create-next-app@latest my-nextjs-socketio-app
2    cd my-nextjs-socketio-app
3

1    npm install socket.io
2

1    import { Server } from 'socket.io';
2
3    export default function handler(req, res) {
4      if (!res.socket.server.io) {
5        const io = new Server(res.socket.server);
6        res.socket.server.io = io;
7
8        io.on('connection', (socket) => {
9          console.log('New client connected');
10          socket.on('disconnect', () => {
11            console.log('Client disconnected');
12          });
13        });
14      }
15      res.end();
16    }
17

1    npm run dev
2

1    io.on('connection', (socket) => {
2      console.log('New client connected');
3      socket.on('message', (msg) => {
4        io.emit('message', msg);
5      });
6      socket.on('disconnect', () => {
7        console.log('Client disconnected');
8      });
9    });
10

1    import { useState, useEffect } from 'react';
2    import io from 'socket.io-client';
3
4    const socket = io();
5
6    export default function Chat() {
7      const [message, setMessage] = useState('');
8      const [messages, setMessages] = useState([]);
9
10      useEffect(() => {
11        socket.on('message', (msg) => {
12          setMessages((prevMessages) => [...prevMessages, msg]);
13        });
14        return () => {
15          socket.off('message');
16        };
17      }, []);
18
19      const sendMessage = () => {
20        socket.emit('message', message);
21        setMessage('');
22      };
23
24      return (
25        <div>
26          <ul>
27            {messages.map((msg, index) => (
28              <li key={index}>{msg}</li>
29            ))}
30          </ul>
31          <input
32            type="text"
33            value={message}
34            onChange={(e) => setMessage(e.target.value)}
35          />
36          <button onClick={sendMessage}>Send</button>
37        </div>
38      );
39    }
40

1    io.emit('message', msg);
2

1    socket.on('message', (msg) => {
2      setMessages((prevMessages) => [...prevMessages, msg]);
3    });
4