反应不响应从服务器发出 [Socket IO]

Question

好吧，我对 Socket IO 没有先验知识，所以如果我的问题真的很愚蠢，请多多包涵 ;-;非常感谢任何帮助。

基本上我想做的是让我的 React 前端从服务器获取 'signal'。所以我有一个 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');
}

我猜我所知道的东西正在起作用：

当我们加载到本地主机和页面关闭时，服务器会适当地记录 'a user connected' 和 'user disconnected'。
在 'submitNewTaskHander' 中，console.log() 与 Socket.emit('task-data')
我知道上面的事情，因为服务器能够获得 'task-data' 信号，然后正确记录 'got task-data on the backend'。

问题在于服务器端的 socket.emit('task-data-changed') 和 Socket.on('task-data-changed') 似乎无法正常工作。

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

Answer 1

您在 front-end 套接字上设置事件侦听器的代码似乎没问题：

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() 是一个监听器。在您的例子中，它会监听 'task-data-changed'。一旦你告诉它开始听，它就会一直听下去。因此，您应该只使用 Socket.on() 设置一次侦听器，并且通常在初始化 Socket 时立即执行此操作。只需执行一次，它将保持监听并运行您的回调函数。

反应不响应从服务器发出 [Socket IO]

React not responding to emit from server [Socket IO]

sockets

io

node.js

socket.io

reactjs