Socket io not working on real server or hosting

[MasterProvider]

It works fine in localhost but not working in vercel.
is there any chance to support socket io in vercel or Heroku only is the way to work socket io in a real server?

"dependencies": {
"next": "13.1.2",
"react": "18.2.0",
"react-dom": "18.2.0",
"socket.io": "^4.6.0",
"socket.io-client": "^4.6.0",
},

//----server side---//
// 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'  });
  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();
}

//----clent side---//
// app/home

"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'
      });
    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>
  )
}

[darrachequesne]

Hi! Vercel is not really compatible with long-running connections, but any non-serverless platform should work well.

See also: https://vercel.com/guides/do-vercel-serverless-functions-support-websocket-connections

Reference: https://socket.io/docs/v4/troubleshooting-connection-issues/#deployment-on-a-serverless-platform

[pushkarsingh019]

Hey, Vercel does not support web sockets since it uses the server less architecture. I was facing the same problem and https://railway.app is a good option.

[TemurEShtemirov]

Railway is a free?

[mifraheem]

it was free .but now it's not free

[Jazzykhan]

@pushkarsingh019 i deployed to railway.app but its not connecting i am able to connect with localhost.

[pushkarsingh019]

Hi, it should work out of the box. They have recently changes their pricing. Is everything alright there ? Also have you made sure that you change relevant information from localhost to the cloud when you push it to railway ?

[krishnagptamcs]

We should BuyCott the vercel ,, i think they are need only huge charges from user , and not providing a hassel free experince to their user