Socket.io服务端与客户端连接异常：新用户加入事件无响应求助

问题详情 #

使用Node.js与Socket.io开发实时聊天应用，客户端通过const socket = io('http://localhost:8000')与服务端建立连接，通过prompt获取用户名后触发new-user-joined事件并传入用户名，但服务端对应的监听回调未执行，终端未打印新用户加入的相关信息。

相关代码片段 #

Client.js #

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

const form = document.getElementById("send-con");
const msginput = document.getElementById("msginp");
const msgcontainer = document.querySelector(".container");
const username = prompt("Enter Your Name to Join");
socket.emit('new-user-joined', username);

Index.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 src="http://localhost:8000/socket.io/socket.io.js"></script>
    <script src="js/client.js"></script>
    <link rel="stylesheet" href="css/style.css">
</head>

<body>
    <nav>
        <img class="logo" src="chat.jpg" alt="">
    </nav>

    <div class="container">
        <div class="message right">Hey Maan ! How are you ?</div>
        <div class="message left">I am fine! What about you dear ?</div>
    </div>

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

</html>

index.js（服务端） #

// Node server which will handle Socket io connections
const express = require('express');
const app = express();
const server = require('http').createServer(app);

// 'socket.io' server is running on port 8000. It is used to listen incoming events.

const io = require('socket.io')(8000, {
    transports: ['websocket']
});

const cors = require('cors');

app.use(cors());

// Users will be updated when someone joined the chat.
const users = {};

// io.on listen events when a connection is established & socket.on will listen a particular event
io.on('connection', socket => {
    socket.on('new-user-joined', username => {
        // console.log(`New user ${users[socket.id]} Joined the chat`);
        console.log("New user ", username, "Joined the chat");
        users[socket.id] = username;
        socket.broadcast.emit('user-joined', username);
    });

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

    socket.on('disconnect', () => {
        console.log(username, 'disconnected');
    socket.broadcast.emit('user-disconnected', user[socket.id]);
    delete users[socket.id];
    });
    });
});

问题修复方案 #

1. 修正Socket.io服务器初始化逻辑 #

你创建了Express的HTTP服务器server，但未将其传递给Socket.io，而是直接指定端口，导致Socket.io与Express服务器分离，引发连接异常。修正如下：

// 替换原io初始化代码
const io = require('socket.io')(server, {
    transports: ['websocket'],
    cors: {
        origin: "*", // 生产环境建议指定具体域名
        methods: ["GET", "POST"]
    }
});

// 添加服务器监听
server.listen(8000, () => {
    console.log("Server running on port 8000");
});

2. 修复事件嵌套与变量拼写错误 #

send事件回调中嵌套disconnect监听会导致重复绑定和作用域错误，同时存在user变量拼写错误（应为users）。修正后的服务端代码：

// Node server which will handle Socket io connections
const express = require('express');
const app = express();
const server = require('http').createServer(app);

const io = require('socket.io')(server, {
    transports: ['websocket'],
    cors: {
        origin: "*",
        methods: ["GET", "POST"]
    }
});

const cors = require('cors');
app.use(cors());

const users = {};

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

    socket.on('send', message => {
        socket.broadcast.emit('receive', { message: message, username: users[socket.id] });
    });

    // 将disconnect监听改为独立绑定
    socket.on('disconnect', () => {
        const username = users[socket.id];
        console.log(username, 'disconnected');
        socket.broadcast.emit('user-disconnected', username);
        delete users[socket.id];
    });
});

server.listen(8000, () => {
    console.log("Server running on port 8000");
});

3. 调整客户端脚本加载时机（可选） #

将客户端脚本移至<body>末尾，避免DOM未渲染完成时的潜在问题：

<!-- 移至</body>之前 -->
<script src="http://localhost:8000/socket.io/socket.io.js"></script>
<script src="js/client.js"></script>
</body>

验证步骤 #

1. 安装依赖：执行npm install express socket.io cors确保依赖齐全。
2. 启动服务端：运行node index.js，终端输出Server running on port 8000。
3. 打开客户端页面：输入用户名后，服务端终端应打印New user [用户名] Joined the chat。

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