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

【问题标题】：React - socket.io on() does not seem to do anythingReact - socket.io on() 似乎没有做任何事情
【发布时间】：2019-12-08 21:11:00
【问题描述】：

所以我有这个反应组件，它连接到端口 3000 上的快速服务器。快速服务器确实工作并在它们加载到大厅组件时记录“有人连接”和“用户断开连接”。但是，客户端的 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;

server.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');
    });
});

【问题讨论】：

标签： reactjs express socket.io

【解决方案1】：

初始化时必须从前到后连接：

const socket = io.connect(process.env.REACT_APP_SOCKET_HOST, {
  forceNew: true,
});

【讨论】：

所以这真的没关系。因为useEffect() 是功能组件生命周期的“替换”。所以它是连接的。将lobby.on('chat message') 移到on('connection') 之外，如果我将其发送给所有人，我确实会收到消息。我应该期望on('connection') 在连接时触发吗？因为现在不是。但是它确实会收到消息。用有点作用的代码更新了我的问题。
我想通了......我应该使用的客户端 on() 是：'connect' 而不是 'connection'

【解决方案2】：

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

应该是：

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

不是：

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

【讨论】：