Socket io not working on real server or hosting #4629

MasterProvider · 2023-02-17T10:34:45Z

MasterProvider
Feb 17, 2023

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>
  )
}