实时聊天应用消息接收异常及用户加入通知失效求助

问题1：发送消息时对方无法接收 #

原因分析 #

1. Socket.IO v3+ 默认启用CORS跨域保护，未配置的话客户端与服务端无法正常通信
2. 服务端disconnect事件存在参数错误，可能导致用户状态管理异常

修复步骤 #

1. 服务端添加CORS配置：修改server.js中创建IO实例的代码，允许客户端域名跨域访问
2. 修复disconnect事件逻辑：移除多余参数，添加用户存在性判断，避免发送无效数据

修改后的server.js代码：

const io = require("socket.io")(8000, {
  cors: {
    origin: "http://localhost:5500", // 替换为你的客户端实际运行端口（比如Live Server默认5500）
    methods: ["GET", "POST"]
  }
});

const users = {};

io.on("connection", (socket) => {
  // 新用户加入处理
  socket.on("new-user-joined", (userName) => {
    users[socket.id] = userName;
    socket.broadcast.emit("user-joined", userName);
  });

  // 消息广播处理
  socket.on("send", (message) => {
    socket.broadcast.emit("receive", {
      message: message,
      name: users[socket.id],
    });
  });

  // 用户断开连接处理
  socket.on("disconnect", () => {
    const userName = users[socket.id];
    if (userName) {
      socket.broadcast.emit("left", userName);
      delete users[socket.id];
    }
  });
});

问题2：socket.emit("new-user-joined", name)中name被标记为废弃，用户加入通知异常 #

原因分析 #

变量名name与浏览器全局属性window.name冲突，该全局属性已被标记为废弃，导致编辑器提示异常，同时可能引发潜在的变量覆盖问题

修复步骤 #

将客户端的name变量重命名为非全局保留名（如userName），避免冲突

修改后的client.js完整代码：

const socket = io("http://localhost:8000");

// Get DOM elements in respective Js variables
const form = document.getElementById("send-container");
const messageInput = document.getElementById("messageInp");
const messageContainer = document.querySelector(".container");

// Audio that will play on receiving messages
var audio = new Audio("sound.mp3");

// Function which will append event info to the container
const append = (message, position) => {
  const messageElement = document.createElement("div");
  messageElement.innerText = message;
  messageElement.classList.add("message");
  messageElement.classList.add(position);
  messageContainer.append(messageElement);
  if (position == "left") {
    audio.play();
  }
};

// Ask new user for his/her name and let the server know
const userName = prompt("Enter your name to join");
socket.emit("new-user-joined", userName);

// If a new user joins, receive his/her name from the server
socket.on("user-joined", (name) => {
  append(`${name} joined the chat`, "right");
});

// If server sends a message, receive it
socket.on("receive", (data) => {
  append(`${data.name}: ${data.message}`, "left");
});

// If a user leaves the chat, append the info to the container
socket.on("left", (name) => {
  append(`${name} left the chat`, "right");
});

// If the form gets submitted, send server the message
form.addEventListener("submit", (e) => {
  e.preventDefault();
  const message = messageInput.value;
  append(`You: ${message}`, "right");
  socket.emit("send", message);
  messageInput.value = "";
});

内容的提问来源于stack exchange，提问作者hassle