Node.js使用Socket实现事件连接与实时消息展示问题求助

现有代码核心问题 #

• server.js 中message事件监听缺少参数接收用户发送的消息，且硬编码返回Hello word而非用户提交的实际内容
• client.js 错误将点击事件绑定到了展示消息的#add容器，而非触发提交的#send_data按钮；未监听服务端广播的message事件，无法接收其他用户发送的消息；重复声明socket变量冗余；直接覆盖#add容器内容导致历史消息丢失
• index.html 未引入Socket.IO客户端依赖和自定义的client.js，无法触发Socket逻辑

修正后完整代码 #

index.html #

<div class="row">
    <div class="col-md-6">
            <p><input class="form-control" id="element" type="text" value="Les parties"></p>
    </div>
    <div class="col-md-6">
        <button class="btn btn-primary" id="send_data">Ajouter</button>
    </div>
</div>
</div>
<div class="row">
<div class="col-md-8">
    <div id="add"></div>
</div>
<!-- 新增依赖引入 -->
<script src="/socket.io/socket.io.js"></script>
<script src="client.js"></script>

server.js #

const express = require('express');
const app = express();
const http = require('http');
const server = http.createServer(app);
const { Server } = require("socket.io");
const io = new Server(server);

app.use(express.static(__dirname + '/public'));

app.get('/', (req, res) => {
  res.sendFile(__dirname + '/index.html');
});

io.on('connection', (socket) => {
  // 新增参数接收用户提交的消息
  socket.on('message', (msg) => {
    // 广播实际收到的用户消息
    io.emit('message', msg);
    console.log('displaying message')
  });
});

server.listen(3000, () => {
  console.log('listening on *:3000');
});

client.js #

const socket = io();
const add = document.getElementById("add");
const element = document.getElementById("element");
const sendBtn = document.getElementById("send_data");

// 绑定提交按钮点击事件
sendBtn.addEventListener('click', () => {
  const msg = element.value.trim();
  if (msg) {
    socket.emit('message', msg);
    element.value = ''; // 发送后清空输入框
  }
})

// 监听服务端广播的消息，追加到展示区
socket.on('message', (msg) => {
  const msgEl = document.createElement('p');
  msgEl.textContent = msg;
  add.appendChild(msgEl);
})

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