React - socket.io on() 似乎没有做任何事情

Question

所以我有这个反应组件，它连接到端口 3000 上的 Express 服务器。 Express 服务器确实工作，并在加载到大厅组件时记录“有人已连接”和“用户已断开连接”。然而，客户端的 on() 位似乎没有做任何事情。我从未收到“已连接到后端”消息来登录客户端控制台。据我所见，我没有收到错误，并且它确实连接到正确的名称空间（来自快速日志）。不知道为什么这不起作用。

import React, { useEffect } from 'react';
import io from 'socket.io-client';
import "./LobbyComponent.css";

function Lobby() {   

    useEffect(() => {
        handleSocket();
    }, []);

    const handleSocket = () => {
        const lobby = io('http://localhost:3000/lobby');
        lobby.on('connection', function (socket){
            console.log('connected to backend');

            socket.on('disconnect', function(){
                console.log('disconnected: ', socket);
            });   

        });  
        lobby.on('chat message', function(msg){
            console.log('message: ', msg);
        });

    };   

    return (
        <div>

        </div>
    )

}

export default Lobby;

服务器.js 文件

let express = require("express");
let app = express();
let server = require('http').Server(app);

server.listen(PORT, () => {
    console.log("Listening at:", PORT);
});


let io = require("socket.io").listen(server);

const chatNameSpace = io.of('/lobby');

chatNameSpace.on('connection', function(socket){
    socket.emit('chat message', 'everyone');

    console.log('someone connected');
    socket.on('disconnect', function(){
        console.log('user disconnected');
    });
});

Answer 1

这是一个愚蠢的错误。客户端和服务器端对事件使用两个不同的名称，这让我有点恼火。如果还有人和我一样盲目的话我就离开这个。

它应该是：

lobby.on('connect', function (){
    console.log('connected: ');
});

不是：

lobby.on('connection', function (){
    console.log('connected: ');
});