实时socket.io消息传递可以在本地主机测试中使用，但在部署到render.com之后就不行了

Question

我是 Web 开发新手，从 MERN 堆栈开始。我的项目的一部分包括一个消息页面，一旦用户单击它，就应该建立与 socket.io 服务器的连接。在使用本地主机进行开发期间，实时消息传递工作得很好，但是，在部署后我收到此错误：

获取http://localhost:5000/socket.io/?EIO=4&transport=polling&t=OmGJLG6 net::ERR_BLOCKED_BY_CLIENT

我使用 render.com 将后端部署为 Web 服务，将前端部署为静态站点。

这是我处理 socket.io 的后端服务器代码的一些片段：

const express = require('express')
const http = require('http')
const port = process.env.PORT || 5000
const {Server} = require("socket.io")

const cors = require('cors')
const app = express()
const server = http.createServer(app)



app.use(express.json())
app.use(express.urlencoded({extended: false}))
app.use(cors({
  methods:['GET', 'POST', 'DELETE']
}))



const io = new Server(server, {
  cors:{
    origin: 'https://m-recruitmentfrontend.onrender.com/',
    methods: ["GET", "POST"]
  }
  
})

let users = []

const addUser = (userId, socketId) => {
  !users.some(user=>user.userId === userId) && 
      users.push({userId, socketId})
}

const removeUser = (socketId) => {
  users = users.filter(user=>user.socketId !== socketId)
}

const getUser = (userId) => {
  return users.find(user=>user.userId === userId)
}

io.on('connection', (socket)=>{
  console.log('connected to socket.io')

  socket.on("addUser", userId=>{
    addUser(userId, socket.id)
    io.emit("getUsers", users)
  })

  socket.on("sendMessage", ({conversationID, sender, receiverId, text}) => {
    
    const other = getUser(receiverId)
    if(other){
      io.to(other.socketId).emit("getMessage", {
        conversationID: conversationID,
        sender: sender,
        text: text
      })
      
    }
    
  })

  socket.on("disconnect", () => {
    console.log("a user disconnect")
    removeUser(socket.id)
    io.emit("getUsers", users)
  })
})

server.listen(port, '0.0.0.0', () => console.log(`Server started on port ${port}`))

这是我的前端代码中的 useEffect，它在消息页面安装时执行：

useEffect(() => {
    socket.current = io(ENDPOINT);
    return () => {
      socket.current.disconnect();
    };
  }, []);

这可能是 https 错误吗？ 任何帮助或想法将不胜感激！

我尝试更改端口号以查看是否是导致问题的原因。最后，我最好奇的是，如果我的项目当前已部署，为什么错误会在 URL 中包含 localhost。我的代码中也没有留下任何硬编码的本地主机地址。

Answer 1

更新您的后端和前端代码并尝试以下操作：

In backend:
    const io = new Server(server, {
      cors: {
        origin: 'https://m-recruitmentfrontend.onrender.com', // Removed trailing slash
        methods: ['GET', 'POST']
      }
    });

在前端：

 const ENDPOINT = '//your-backend-url'; 
  const socket = useRef(null);

  useEffect(() => {
    socket.current = io(ENDPOINT);
    return () => {
      socket.current.disconnect();
    };
  }, [ENDPOINT]);