io.on 在使用 socket.io 建立连接时无法正常工作

Question

我在连接 io.on 函数时遇到问题（非常沮丧）。我正在关注 youtube 教程 (https://www.youtube.com/watch?v=3QNBVG2yqKA)，其中使用节点 js 和套接字 io 制作了一个聊天应用程序。教程中的代码和我的完全匹配（检查了100次），但我的代码不起作用。

服务器端代码

//Node server
const io=require('socket.io')(3000);

const users={};
io.on('connection', socket=>{
    console.log("hi");
    socket.on("new-user-joined",name=>{
        console.log("name",name);
        users[socket.id]=name;
        socket.broadcast.emit("user-joined",name);
    });
    socket.on("send",message=>{
        socket.broadcast.emit("receive",{message: message, name:users[socket.id]});
    });
});

客户端代码

const socket=io.connect("http://localhost:3000");
const form=document.getElementById("sendContainer");
const msg=document.getElementById("messageInp");
const msgContainer=document.querySelector(".container");

const append=(message,position)=>{
    const messageEle=document.createElement("div");
    messageEle.innerText=message;
    messageEle.classList.add("message");
    messageEle.classList.add(position);
    msgContainer.append(messageEle);
}

const name1=prompt("Enter your name to join");
socket.emit("new-user-joined", name1);

socket.on("user-joined", name=>{
    append(`${name} joined the chat`, "right");
})

服务器端代码不运行超出 const users={} 对象，我使用控制台日志进行测试

并且在浏览器控制台中显示此错误

Error Image

请帮我解决这个问题。

Answer 1

需要在初始化socket的时候添加cors对象，否则会阻塞请求。

cors: {
    origins: [],
  },

您可以在此处查看套接字文档以了解如何处理 cors :https://socket.io/docs/v4/handling-cors/

io.on 在使用 socket.io 建立连接时无法正常工作

io.on is not working while making connection using socket.io

javascript

websocket

node.js

socket.io

web

服务器端代码

客户端代码