Socket.io and Next.Js

Question

I am working on a project for an interview and have been asked to create a NextJS app using Socket.io for realtime chat. I have the chat functionality working, but one of my requirements is to have an area where a user can see a list of current users. While I've found examples for Express servers, I cannot seem to work out how to do this using Next's API system. I have two connected issues:

Maintaining a list of users with chosen display names (not just the socket id)
Accessing and returning a current user list whenever a user joins or leaves.

I haven't had any luck scanning the docs.

Here is the server function:

import { NextApiRequest } from 'next';
import { NextApiResponseServerIO } from '../../types/next';
import { Server as ServerIO } from 'socket.io';
import { Server as NetServer } from 'http';

export const config = {
    api: {
        bodyParser: false
    }
}

export default async (req: NextApiRequest, res: NextApiResponseServerIO) => {
    if (!res.socket.server.io) {
        console.log("** New Socket.io server **")
        // adapts the Next net server to http server
        const httpServer: NetServer = res.socket.server as any;
        const io = new ServerIO(httpServer, {
            path: '/api/socketio'
        })

        io.on('connect', async (socket) => {
           socket.join('main')
           // where I plan to put the code to send a current list
        })

        io.on('disconnect', socket => {
            socket.leave('main')
        })

        res.socket.server.io = io;
    }
    res.end();
}

And the related client code:

useEffect((): any => {
    const url = process.env.NEXT_BASE_URL as string | "";
    // connect to socket server
    const socket = io(url, {
      path: "/api/socketio",
    });

    // log socket connection
    socket.on("connect", () => {
      dispatch(connect(socket.id));
      dispatch(updateId(socket.id))
    });
    
    //updates chat on message dispatch
    socket.on("message", (message: IMsg) => {
      dispatch(receive(message));
    });

    socket.on('updateUsersList', (users) => {
      console.log("Is this the users", users)
    })

    //server disconnect on unmount
    if (socket) return () => dispatch(disconnect(socket));
  }, []);

Socket.io and Next.Js

0 Answers