套接字 IO 发出两次事件

Question

情况：

我正在使用 socket.io 设置快速服务器和使用 ReactJS 的客户端。这是我的服务器：

//... another requirement
const socket = require("./socket");

const app = express();
const server = http.createServer(app);
const port = process.env.PORT || 3000;

//... some parsers ...

routes(app);
socket(server);

server.listen(port);
console.log("Server started on: " + port);

这是我的插座：

const socketIO = require("socket.io");

const socket = server => {
  const io = socketIO(server);
  const chat = io.of("/chat");
  chat.on("connection", client => {
    console.log("User started chat!");
    client.on("disconnect", () => {
      console.log("User left chat!");
    });

    client.on("sendMessage", msg => {
      const { id, text } = msg;
      console.log(id + " says: " + text);
      client.broadcast.emit("incomingMessage", {
        //... response data
      });
    });
  });
};

在客户端，聊天页面组件将处理向套接字发送消息和从套接字接收消息：

//_ChatBox in Chat Page
const _ChatBox = (/*props*/) => {
  const chat = io("http://localhost" + ":3000/chat");

  chat.on("incomingMessage", message => {
    console.log("Receive message");
    //...handle income message
  });

  const sendMessageToSocket = (data) => {
    chat.emit("sendMessage", data);
  };

  return ( /*JSX*/);
};

问题：

每次用户访问聊天页面，socket都会收到connect事件并记录User started chat!到控制台一次，但实际上已经记录了两次，这意味着socket已经处理了两次connect事件。

当_ChatBox收到消息时，它会记录Receive message并显示该消息，但它所做的是记录两次并显示两次消息，这也意味着套接字发出了两次incomeMessage事件。

我想要什么：我希望套接字只处理一次这些事件。

Answer 1

看起来你的组件渲染了两次，所以调用const chat = io("http://localhost" + ":3000/chat");两次，给出两条连接消息。

您可以使用useEffect()钩子仅在第一个渲染上连接。传入一个空数组作为第二个参数意味着效果只会被调用一次：

const _ChatBox = (/*props*/) => {

  useEffect(()=>{
     const chat = io("http://localhost" + ":3000/chat");

    chat.on("incomingMessage", message => {
      console.log("Receive message");
      //...handle income message
     });

     const sendMessageToSocket = (data) => {
      chat.emit("sendMessage", data);
     };
   }, []);


  return ( /*JSX*/);
};