每次调用套接字事件时如何获取相同的数据

Question

我是网络套接字的新手（也是 socket.io）。我为实验目的编写了一个简单的应用程序。而且，我不明白为什么我的事件没有在每次单击按钮时触发。

我在 nodejs 中的后端

io.on("connect", (socket) => {
    console.log(socket.id);

    const data = {
        name: "pikachu",
    };

    socket.emit("receive_message", data);

    socket.on("disconnect", () => {
        console.log("user disconnected");
    });
});

和 reactjs 中的前端

function App() {
  useEffect(() => {
    socket.on("receive_message", (data) => {
      console.log(data, "zulu");
    });
  }, [socket]);

  const getRandomHero = () => {
    socket.on("connect", () => {
      console.log("connected");
    });
  };

  return (
    <div className="App">
      <button onClick={getRandomHero}>Get random hero!</button>
    </div>
  );
}

Object data 每次页面刷新时我都会得到。每次点击按钮时如何获取这些数据？

Answer 1

您需要 emit 来自函数 getRandomHero 的事件，然后在服务器上侦听该事件和 return 一些东西。像这样：

Front-end:

const getRandomHero = () => {
    socket.emit('get_hero')
}

后端：

io.on("connect", (socket) => {
    console.log(socket.id);
    socket.on('get_hero', () => {
        socket.emit('receive_message', data);
    }
}

每次调用套接字事件时如何获取相同的数据

How to get same data each time socket event is called

socket.io

reactjs