socket 向同一个客户端 socketio 发出多次

Question

我在单独的 NodeJS 服务器上使用 socket.io，并使用 socket.io-client 将 ReactJS 客户端连接到它。

连接运行良好，直到我向房间发送消息。

在我的服务器端我有：

const io = new Server(server, {
  cors: {
    origin: ["http://localhost:3000"],
    methods: ["GET", "POST"],
  },
});

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

  socket.join("test");
 

  socket.on("newMessage", (data) => {
    console.log("new msg");
    io.to("test).emit("message", "testing");
  });

});

在 React.js 客户端：

import React from "react";
import "./App.css";
import io from "socket.io-client";
const socket = io("http://localhost:4000");

function App() {
  const newEvent = () => {
    socket.emit("newMessage", "test");
  };
  socket.on("message", () => {
    console.log("message recieved");
  });
  return (
    <div className="App">
      <button onClick={newEvent}>Emit message</button>
      <p>test</p>
    </div>
  );
}

export default App;

当服务器发出 io.to("test).emit("message", ... ) 时，客户端的 socket.on("message") 方法会运行多次

我还没有找到解决这个重复问题的方法，有没有办法让消息只向客户端发送一次而不是多次？

Answer 1

我发现了问题。

在 client-side 上接收事件时，您应该在套接字更改时对 .on 侦听器使用 useEffect。

例如，

useEffect(() => {
     socket.on("message", () => {
          console.log("new message")
     })
},[socket])

这样做将确保侦听器为每个连接的客户端运行一次。

socket 向同一个客户端 socketio 发出多次

socket emits multiple times to same client socketio

node.js

reactjs

sockets

websocket

socket.io