React 没有响应从服务器发出的 [Socket IO]

Question

好的，所以我没有关于 Socket IO 的先验知识，所以如果我的问题真的很愚蠢，请多多包涵；-;任何帮助都将不胜感激。

基本上我要做的是让我的 React 前端从服务器获取“信号”。所以我在前端有一个 socket.emit('task-data-changed') 服务器端和一个 'io.on('task-data-changed)' 但这似乎没有任何作用，我不知道为什么。

这是我的服务器端代码：

const app = express();
const http = require('http').createServer(app);
const io = require('socket.io')(http);
io.origins('*:*');

io.on('connection', socket => {
  console.log('a user connected');
  socket.on("task-data", () => {
    console.log('got task-data signal on the backend');
    socket.emit("task-data-changed", 'everyone');
  });
  
  socket.on('disconnect', () => {
    console.log('user disconnected');
  });
});

这是我的 React 代码：

useEffect(()=> {
    Socket.on("task-data-changed",() => {
      console.log('task data was changed on the backend');
    });

    return () => Socket.off("task-data-changed");
  },[]);

const submitNewTaskHandler = () => {
   console.log('trying to emit  task-data');
      Socket.emit('task-data');
}

我猜我知道的事情正在发挥作用：

1. 当我们加载到 localhost 和页面关闭时，服务器会适当地记录“用户已连接”和“用户已断开连接”。
2. 在“submitNewTaskHander”内部，console.log() 和 Socket.emit('task-data') 运行正常
3. 我知道上述情况是因为服务器能够获取“任务数据”信号，然后正确记录“后端获取任务数据”。

问题在于服务器端的 socket.emit('task-data-changed') 和 Socket.on('task-data-changed') 似乎不起作用。

感谢您到目前为止的阅读，如果我使用了错误的术语，我们深表歉意。

Answer 1

您在前端套接字上设置事件侦听器的代码看起来不错：

useEffect(()=> {
    Socket.on("task-data-changed",() => {
      console.log('task data was changed on the backend');
    });

    return () => Socket.off("task-data-changed");
  },[]);

但是，我的问题是，为什么代码在 useEffect() 中？你应该把它放在你最初制作 Socket 的地方。或者，您可以在Socket.emit('task-data');之前将其放在行中

为了给出一些解释，Socket.on() 是一个监听器。在您的情况下，它会侦听“任务数据更改”。一旦你告诉它开始听，它就会一直听下去。因此，您应该只使用 Socket.on() 设置一次侦听器，并且通常在初始化 Socket 时正确执行此操作。只需执行一次，它就会一直监听并运行您的回调函数。