Node.js Socket.io实时聊天App：客户端与服务器连接异常求助

问题描述 #

开发实时聊天App时遇到两个问题：

• Node服务器无法正常运行
• 在Prompt输入用户名后，服务器端无任何日志输出

以下是全部代码：

HTML代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>iChat - Realtime Node Socket.io Chat App</title>
    <script defer src='http://localhost:8000/socket.io/socket.io.js'></script>
    <script defer src="js/client.js"></script>
    <link rel="stylesheet"href="css/style.css">

</head>
<body>
    <nav>
        <img class="logo"src="icon.png" alt="">
    </nav>
    <div class="container">
        <div class="message right">Ravi:Hi</div>
        <div class="message left">Sonam:Hi</div>
    </div>

    <div class="send">
        <form action="#" id="send-container">
            <input type="text" name="messageInp" id="messageInp">
            <button class="btn" type="submit">Send</button>

        </form>
    </div>
   
</body>
</html>

index.js代码 #

const { Socket } = require("socket.io");

const io = require("socket.io")(8000);

const users = {};

io.on("connection", (socket) => {
  socket.on("new-user-joined", (name) => {
    console.log("New user", name);
    users[socket.id] = name;
    socket.broadcast.emit("user-joined", name);
  });

  socket.on("send", (message) => {
    socket.broadcast.emit("receive", {
      message: message,
      name: user[socket.id],
    });
  });
});

client.js代码 #

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

const form = document.getElementById("send-container");
const messageInput = document.getElementById("messageInp");
const messageContainer = document.querySelector(".container");

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

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

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

问题修复方案 #

1. 修复服务器代码变量名错误 #

index.js的send事件处理中，错误使用了未定义的user变量，应改为定义好的users，这是导致服务器崩溃的核心原因：

// 错误代码
name: user[socket.id],

// 修正后
name: users[socket.id],

2. 确保依赖正确安装 #

执行以下命令初始化项目并安装socket.io：

# 初始化项目（未初始化过的话执行）
npm init -y

# 安装socket.io依赖
npm install socket.io

3. 验证服务器启动状态 #

添加日志输出确认服务器正常启动，修改index.js：

const io = require("socket.io")(8000, {
  cors: {
    origin: "*", // 开发环境允许所有跨域，生产环境请限制具体域名
  },
});
console.log("Server running on port 8000"); // 添加此行查看启动状态

const users = {};
// 后续代码保持不变

通过node index.js启动服务器，控制台出现Server running on port 8000即为正常启动。

4. 修正客户端Prompt文本错误 #

client.js中Prompt的文字存在语法问题，修正为：

const name = prompt("Enter your name to join");

5. 补充表单提交逻辑（可选） #

当前代码未处理表单提交，点击发送按钮会导致页面刷新，添加以下代码修复：

form.addEventListener("submit", (e) => {
  e.preventDefault();
  const message = messageInput.value;
  if (message.trim()) {
    append(`You: ${message}`, "right");
    socket.emit("send", message);
    messageInput.value = "";
  }
});

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