Question

因此，我有此React组件，该组件在端口3000上连接到Express服务器。ExpressServer确实工作，并且在大厅组件中加载“有人连接”和“用户断开连接”时记录了日志。但是，客户端的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');
    });
});

Answer 1

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

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

Answer 2

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

应该是：

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

不是：

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

反应-socket.io on（）似乎没有任何作用

2 个答案: