Socket io not working on vercel (Update: socket.io is now supported in Vercel)

[MasterProvider]

It works fine in localhost but not working in hosting

"dependencies": {
  "next": "^13.4.6",
  "eslint-config-next": "^13.4.3",
  "react": "18.2.0",
  "react-dom": "18.2.0",
  "socket.io": "^4.6.2",
  "socket.io-client": "^4.6.2",
  },

// page/api/socket

import { Server } from "socket.io";

export default function SocketHandler(req, res) {
  if (res.socket.server.io) {
     console.log("Already set up");
     res.end();
     return;
  }

  const io = new Server(res.socket.server,{ path: '/api/socket',addTrailingSlash: false });
  res.socket.server.io = io;

  io.on("connection", (socket) => {
    socket.on("send-message", (obj) => {
        io.emit("receive-message", obj);
    });
  });
  console.log("Setting up socket");
  res.end();
}

// Client side

"use client";
import React, {useEffect, useState} from 'react';
import {io} from 'socket.io-client';



function useSocket(){
  const [socketIo,setSocketIo]= useState(null);
  useEffect(() => {
    const  socket = io(process.env.HOST_URL, {
        path:'/api/socket',
       // transports: ["websocket"]
      });
    setSocketIo(socket)
    return () => {
      socket.disconnect();
    };
  }, []);
  return socketIo;

}


export default function Home() {
  const [message, setMessage] = useState("");;
  const [username, setUsername] = useState("");
  const [allMessages, setAllMessages] = useState([]);

  const socket = useSocket();

  useEffect(() => {
    if(socket) {
      socket.on('connect', () => {
        console.log('connect');
      });
      socket.on('disconnect', () => {
        console.log('disconnect');
      });
      socket.on("receive-message", (data) => {
        setAllMessages((pre) => [...pre, data]);
      });
    }
    
  }, [socket]);


 
 
  function handleSubmit(e) {
    e.preventDefault();
    console.log("emitted");
    socket.emit("send-message", {
      username,
      message
    });
    setMessage("");
  }
 
  return (
    <div>
      <input type="text" value={username} onChange={(e)=> setUsername(e.target.value)} /> 
      <input type="text" value={message} onChange={(e)=> setMessage(e.target.value)} /> 
      <button  onClick={handleSubmit}>Send massage </button  >
      <p>UserName {username}</p>
      {allMessages.map(({ username, message },index)=>(
        <li key={index}>{`${username}: ${message}`}</li>
      ))}
    </div>
  )
}

//updated
socket.io in now working in vercel

[darrachequesne]

Hi! Is there any error in the console?

You can also check our troubleshooting guide: https://socket.io/docs/v4/troubleshooting-connection-issues/

[MasterProvider]

Still not working
WebSocket connection to 'wss://www.example.com/api/socket/?EIO=4&transport=websocket' failed:

UPDATE:
it always polling but there is no data to fetch
XHR finished loading: GET "https://www.example.com/api/socket?EIO=4&t=OQ5FFNF&transport=polling"

[darrachequesne]

@MasterProvider I see you are using Next.js, are you deploying on Vercel? Because it does not support WebSockets: https://vercel.com/guides/do-vercel-serverless-functions-support-websocket-connections

[MasterProvider]

const io = new Server(res.socket.server,{ path: '/api/socket',addTrailingSlash: false });
res.socket.server.io = io;

by addTrailingSlash: false
socket.io in now working in vercel

[autumn31]

Cool, it's working for me as well

[Msantanna10]

How? Does Socket.io work with Vercel or not? You guys said it worked but others say it doesnt. My chat works locally but not on production, it's not listening to changes. What did you do?

You have your frontend on Vercel and your Socket.io server elsewhere? That's what I have but it's not listening.

[darrachequesne]

For future readers:

Socket.IO can indeed be used in conjunction with Next.js: https://socket.io/how-to/use-with-nextjs

However, a Socket.IO application cannot be deployed on Vercel, as it is not suitable for long-running connections, like HTTP long-polling or WebSockets: https://vercel.com/guides/do-vercel-serverless-functions-support-websocket-connections

[MasterProvider]

Yes right, That`s why I use VPS instead of Vercel also currently NextJS no Longer support Websocket in API Route you need to create Custom Server instead to run the socket.io perfectly.

Big Thanks to Socket.io community specially to @darrachequesne