Socket.io 客户端从一次发出多次重复事件操作

Question

我正在使用套接字创建一个简单的 diffie hellman 演示，似乎每当我的服务器发出任何事件时，客户端都会重复多次。

例如：在客户端，每当我添加一条消息时，我都会像这样向服务器发送这条新消息。

  const addMessage = (text) => {
    var newMessage = {
      id: nextID,
      from: name,
      message: text
    }
    socket.emit("send-message", newMessage);
    setNextID(nextID + 1);    
    setMessages([...messages, newMessage]);
  }

然后在服务器端，我将该消息添加到消息中，并将新的消息库发送给其他客户端。

    // Send message to other person
    socket.on("send-message", (message) => {    
        messages = [...messages, message];
        console.log(messages, "Newline\n");
        
        socket.broadcast.emit("receive-message", messages);
    })

客户收到它并更新他们的消息库。我console.log这些动作。

    socket.on("receive-message", (receivedMessages) => {
      console.log("receieved messages");
      setMessages(receivedMessages);
    });

但是当我发送消息时 console.log它会重复 100 次？？

我的许多其他客户端事件处理程序都会发生这种情况，从服务器发出的一个事件中重复一个动作不止一次。

为什么会发生这种情况，我该如何阻止它？

Answer 1

试着改成这样：

client-side:

socket.emit(“your event name”, “msg”)

server-side:

var io = new require(“socket-io”)()
io.on(“connection”, (socket) => {
    socket.on(“your event name”, (msg) => {
        io.emit(“your event name”, msg)
    })
})

试试看，会更好:D

Answer 2

刚刚发送新消息

客户

socket.on("receive-message", (receivedMessages) => {
  console.log("receieved messages");
  setMessages(prevMessage => [...prevMessage, receivedMessages]);
});

服务器

socket.on("send-message", message => {    
    messages = [...messages, message];
    console.log(messages, "Newline\n");
        
    socket.broadcast.emit("receive-message", message);
})

Answer 3

如果您正在使用 ReactJs，请注意，如果您在组件中添加侦听器，则每当组件更新时，它都会添加一个新的套接字侦听器，例如在第二次渲染时，您会得到 2 console.log 秒。因此，您必须在 useEffect 挂钩中添加侦听器（componentDidMount in class 组件案例）。

并考虑到即使您的组件也可以被查看几次，因此侦听器将被复制。因此，您必须关闭 useEffect 的 return（class 组件案例中的 componentWillUnmount）

的监听器

所以它一定是这样的：

useEffect(() => {
    socket.on("receive-message", (receivedMessages) => {
      console.log("receieved messages");
      setMessages(receivedMessages);
    });

    return () => {
      socket.off("receive-message");
    };
}, []);

Socket.io 客户端从一次发出多次重复事件操作

Socket.io Client repeats event action multiple times from one emit

javascript

socket.io

reactjs