Netlify not listening to events for a single socket

Question

Hello everyone
I'm doing a social media app , that haves a backend with a rest API and Socket.IO, and the front end is made with Next.js, everything is fine when testing in localhost so i decide to deploy my front end first to Netlify and the backend to Heroku.
So i deploy it and socket.io works good in events for all sockets , but when i do a action for a single socket for example sending a message in a chat, the rest API receives the request and emit the data to the specific socket but this socket in the client doesn't receive,this is strange because in localhost works for all and single sockets.
This is my code from the backend:

app.js

var createError = require('http-errors');
var express = require('express');
const mongoose = require('mongoose')
var cookieParser = require('cookie-parser');
var logger = require('morgan');
const dotenv = require('dotenv')
const bodyParser = require("body-parser");
var compression = require('compression');
dotenv.config()
const app = express()
const http = require('http')
const server = http.createServer(app)
const io = require('socket.io')(server,{cors:'http://localhost:3000'})
module.exports = {io}
const ioServer = require('./utils/websocket/index')
// MONGO DB CONNECTION
var dev_db_url = 'mongodb+srv://cooluser:[email protected]/local_library?retryWrites=true'
var mongoDB = process.env.MONGODB_URI || dev_db_url;
mongoose.connect(mongoDB, { useNewUrlParser: true , useUnifiedTopology: true});
var db = mongoose.connection;
db.on('error', console.error.bind(console, 'MongoDB connection error:'));

const apiRouter = require('./routes/api')
app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "http://localhost:3000");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept,Authorization");
  next();
});

app.use(logger('dev'));
app.use(express.json());
app.use(bodyParser.urlencoded({ extended: false }))
app.use(bodyParser.json())
app.use(cookieParser());
app.use(compression()); 

app.use('/api',apiRouter)

app.use(function(req, res, next) {
    next(createError(404));
  });
  
  // error handler
  app.use(function(err, req, res, next) {
    // set locals, only providing error in development
    res.locals.message = err.message;
    res.locals.error = req.app.get('env') === 'development' ? err : {};
    // render the error page
    res.status(err.status || 500);
    res.status(err.status || 500);
    res.json({
      message: err.message,
      error: err
    });  });
server.listen(process.env.PORT || 4000,() => {
  console.log('listening on port 4000')
})

I know that in the cors of socket and allow header is http://localhost:3000.

index.js

const {io} = require('../../app')
const sockets = []
io.on("connection",socket => {
    console.log("New user connected with id:",socket.id)
    socket.on("online",(data) => {
        socket.name = data._id
        sockets[data._id] = socket.id
        console.log(sockets)
    });
    socket.on('user:update',(user) => {
        console.log(user)
        socket.to(sockets[user._id]).emit("user:update:response",user)
    })
    socket.on("disconnect", reason => {
        sockets.splice(sockets.findIndex(id => id === socket._id), 1);
      });
    socket.on("chat:update",chat => {
        console.log(chat)
        console.log(chat.user1,sockets[chat.user1])
        socket.to(sockets[chat.user1]).emit("chat:update:response",chat)
        socket.to(sockets[chat.user2]).emit("chat:update:response",chat)

    })
    socket.on('chat:create',chat => {
        socket.to(sockets[chat.user1]).emit("chat:create:response",chat)
        socket.to(sockets[chat.user2]).emit("chat:create:response",chat)
    })
})
module.exports = io

Here is where i receive the events emitted from the client and sending to a single socket.
And now the client:
_app.js

useEffect(() => {
      socket.once('connect',(socket) => {
        console.log("User connected"+ socket)
      })
      socket.on('post:create',post => {
      addPost(post)
    })
    socket.on('post:update',post => {
      updatePost(post)
    })
    socket.on('user:update',user => {
      socket.emit('user:update',user)
    })
    socket.on('user:update:response',user => {
      setCurrentUser(user)
    })
    socket.on('comment:create',comment => {
      addComment(comment)
    })
    socket.on('chat:update',chat => {
      socket.emit("chat:update",chat)
    })
    socket.on('chat:update:response',chat => {
      console.log(chat)
      updateChat(chat)
    })
    socket.on('chat:create',chat => {
      socket.emit('chat:create',chat)
    })
    socket.on("chat:create:response",chat => {
      console.log(chat)
      addChat(chat)
    })
  },[])

If you want more code this are the repositories:
Client
Server
I want to clarify that this on localhost works perfectly.

Edit: in the moment i did the question it works, so i upload the backend to heroku but i encounter the same error xD