How to use Socket.io with Next.js API Routes

The trick is to plug 'socket.io' into the http server only once, so checking every access to the api. Try something like this:

./pages/api/socketio.js

import { Server } from 'socket.io'

const ioHandler = (req, res) => {
  if (!res.socket.server.io) {
    console.log('*First use, starting socket.io')

    const io = new Server(res.socket.server)

    io.on('connection', socket => {
      socket.broadcast.emit('a user connected')
      socket.on('hello', msg => {
        socket.emit('hello', 'world!')
      })
    })

    res.socket.server.io = io
  } else {
    console.log('socket.io already running')
  }
  res.end()
}

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

export default ioHandler

./pages/socketio.jsx

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

export default () => {
  useEffect(() => {
    fetch('/api/socketio').finally(() => {
      const socket = io()

      socket.on('connect', () => {
        console.log('connect')
        socket.emit('hello')
      })

      socket.on('hello', data => {
        console.log('hello', data)
      })

      socket.on('a user connected', () => {
        console.log('a user connected')
      })

      socket.on('disconnect', () => {
        console.log('disconnect')
      })
    })
  }, []) // Added [] as useEffect filter so it will be executed only once, when component is mounted

  return <h1>Socket.io</h1>
}

You have to have the /api/pusher/auth to authenticate with pusher on the frontend. Then you use the key you get from that to communicate with pusher. It's for security purposes. You can do it all through the frontend, but depending on your app, if you're saving data (such as messages, or chats) then probably should authenticate.

This helps me, first, go to cmd.

1. rmdir /s /q <folder name>\.git

2. git add <folder name>/

3. git status -- If the output is something like:

   Changes to be committed: (use "git restore --staged ..." to unstage)

Proceed to:

4. git commit -m "Add server folder"
5. git push

Then done.

I don't know why everyone overcomplicates the code examples for client sockets with Next.js or mixes up the idea that you need to run a socket server inside of Next.js when you don't. Even the socket.io documentation for Next.js is really bad, their documentation just tells you to stop using the Next.js web server with all of its great features and use a different HTTP server (very bad idea). People are looking for how to stream incoming socket data into Next.js components which they should have documentation for.

Here's a super simple client example for Next.js, it assumes you have a socket server running somewhere else which is recommended. It also assumes you have CORS configured correclty on your socket server to allow incoming connections from the Next.js server that is interacting with it. Once you set up the API, you can call that programmatically and feed data to your components however you like.

This is for the Page Router and not the App router. ChatGPT can probably give you good suggestions on how to refactor it for the AppRouter.

// src/pages/api/socketStatus.js
import { io } from "socket.io-client";

export const config = {
    api: {
      externalResolver: true,
    },
  };

export default function socketHandler() {

// my socket server is running on port 5174 with CORS configured there allowing requests from my Next.js origin of http://localhost:3000
let clientSocket = io('http://localhost:5174');

clientSocket.on("connect", () => {
  console.log(clientSocket.id) // log the socket ID to the console.
    return console.log("Connected")
})

// log all incoming socket data to a variable of 'data' from the socket topic of 'importantSocketTopic`, change this to the string name that you emit data with.
 clientSocket.on("importantSocketTopic", data => {
     console.log(data);
} )

}

Calling the socket API route from your Next.js index.tsx file as an example:

// src/pages/index.tsx
import { useEffect, useState } from 'react'

export default function Home() {
  const [mounted, setMounted] = useState(false)

    useEffect(() => {
      initialize();

      setMounted(true);

    }, []);

  async function initialize() {
    // initialize any functions or services for the web dashboard

    let socket_check = await fetch('/api/socketStatus');
    console.log(socket_check);

  }


  if (!mounted) {
    return <>Ehhh we are waiting for something to render</>
  }


  return (
    <div>
<div>Your fancy nextjs app</div>
      </div>
    </div>
  )
}

You can use custom server and attach sockets to it (just like with express) and provide needed path where socket.io will listen. How to use custom server

You can write something like this server.js

const { createServer } = require('http');
const { parse } = require('url');
const next = require('next');
const { Server } = require('socket.io');

const dev = process.env.NODE_ENV !== 'production';
const hostname = 'localhost';
const port = 3000;
// when using middleware `hostname` and `port` must be provided below
const app = next({ dev, hostname, port });
const handle = app.getRequestHandler();

app.prepare().then(() => {
    const server = createServer(async (req, res) => {
        try {
            // Be sure to pass `true` as the second argument to `url.parse`.
            // This tells it to parse the query portion of the URL.
            const parsedUrl = parse(req.url, true);
            const { pathname, query } = parsedUrl;

            if (pathname === '/a') {
                await app.render(req, res, '/a', query);
            } else if (pathname === '/b') {
                await app.render(req, res, '/b', query);
            } else {
                await handle(req, res, parsedUrl);
            }
        } catch (err) {
            console.error('Error occurred handling', req.url, err);
            res.statusCode = 500;
            res.end('internal server error');
        }
    });

    const io = new Server(server, {
        path: '/socket.io' // or any other path you need
    });

    io.on('connection', socket => {
        // your sockets here
        console.log('IO_CONNECTION');
    });

    server.listen(port, err => {
        if (err) throw err;
        console.log(`> Ready on http://${hostname}:${port}`);
    });
});

You would need to run your server using node server.js