Next.js Discord

Discord Forum

Socket IO integration

Unanswered
Terrier Brasileiro posted this in #help-forum
Open in Discord
Terrier BrasileiroOP
Hello, I've ran into an issue. I'm trying to write a Socket.IO API route, but ran into an issue. I'm using app/api, but I have an pages/api example, how do I convert it?

This is the SockerProvider:
"use client";

import React, { createContext, useContext, useEffect, useState } from "react";
import { io as ClientIO } from "socket.io-client";

type SocketContextType = {
    socket: any | null;
    isConnected: boolean;
};

const SocketContext = createContext<SocketContextType>({
    socket: null,
    isConnected: false
});

export const useSocket = () => {
    return useContext(SocketContext);
};

export const SocketProvider = ({ children }: { children: React.ReactNode }) => {
    const [socket, setSocket] = useState(null);
    const [isConnected, setIsConnected] = useState<boolean>(false);

    useEffect(() => {
        const socketInstance = new (ClientIO as any)(process.env.NEXT_PUBLIC_SITE_URL!, {
            path: "/api/socket",
            addTrailingSlash: false
        });

        socketInstance.on("connect", () => {
            setIsConnected(true);
        });

        socketInstance.on("disconnect", () => {
            setIsConnected(false);
        });

        setSocket(socketInstance);

        return () => {
            socketInstance.disconnect();
        };
    }, []);

    return (
        <SocketContext.Provider value={{ socket, isConnected }}>
            {children}
        </SocketContext.Provider>
    )
};

16 Replies

Terrier BrasileiroOP
api/socket/route.ts:

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

const ioHandler = (req: NextApiRequest, res: NextApiResponseServerIo) => {
    if (!res.socket.server.io) {
        const path = '/api/socket/io';
        const httpServer: NetServer = res.socket.server as any;
        const io = new ServerIO(httpServer, {
            path: path,
            addTrailingSlash: false
        });
        res.socket.server.io = io;
    }
    res.end();
};

export default ioHandler;
How do I convert this pages/api into app/api route?
James4u
well you can simply migrate. copy paste the pages/api into app/api
the difference is that in page/api req, res types are nextApiRequest and nextApiResponse
and in app/api req, res types are NextResponse, NextRequest which are extension of native Response, Request
Terrier BrasileiroOP
If I do it that way, then I don't get the same res as in pages/api
James4u
how's that different? any examples?
Terrier BrasileiroOP
res in app/api returns searchParams
James4u
? searchParams? what do you mean? you return searchParams?
@James4u ? searchParams? what do you mean? you return searchParams?
Terrier BrasileiroOP
No, if I copy paste it, (req: NextApiRequest, res: any) res returns searchParams
Okay, so pages/api -> res returns a big ServerResponse:

ServerResponse {
  _events: [Object: null prototype] {
    finish: [Function: bound resOnFinish],
    error: [Function (anonymous)],
    close: [
      [Function],
      [Function: reqCallback],
      [Function],
      [Function: reqCallback]
    ],
    pipe: [Function: bound onceWrapper] { listener: [Function (anonymous)] }
  },
  _eventsCount: 4
...
And the app/api -> res returns:

{ params: undefined }
import { NextRequest, NextResponse } from 'next/server';

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

const ioHandler = (req: NextRequest, res: NextResponse) => {
    console.log(res);
    return NextResponse.json(null, { status: 200 })
};


export { ioHandler as GET };
Any ideas what's wrong here, maybe I have to get the ServerResponse some other way here?