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

Posted 2023-02-22

【中文标题】React - socket.io on() 似乎没有做任何事情

【英文标题】：React - socket.io on() does not seem to do anything

【发布时间】：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');
    );
);

【参考方案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: ');
);