node.js - 使用 React 和 Socket.io 的聊天应用程序在发送过多消息后挂起

Question

我的基本聊天应用程序在发送大约 7 条消息后变得非常慢，尽管它在只发送几条消息时确实有效。

我在返回的组件中放置了一条打印语句。我注意到每次提交聊天消息时，打印语句的调用次数都是以前的两倍。我假设我的应用程序变慢了，因为随着我发送更多消息，不得不以指数方式多次重新渲染 DOM。

有人知道为什么会这样吗？

这是我的 React 应用

import React from 'react';
import io from "socket.io-client";
let socket = io.connect("localhost:8080");

function App() {
  const [curMessage, setMessage] = React.useState({name: "", message: ""});
  const [messageList, setList] = React.useState([]);

  socket.on("receiveMsg", message => {
    setList([...messageList, message]);
  });

  function handleTyping(e) {
    let target = e.target;
    if (target.id === "name") {
      setMessage({...curMessage, name: target.value});
    } else {
      setMessage({...curMessage, message: target.value});
    }
  }

  function handleSubmit(e) {
    e.preventDefault();
    setList([...messageList, curMessage]);
    setMessage({name: "", message: ""});
    socket.emit("message", curMessage);
  }



  return (
    <div>
      <form onSubmit={handleSubmit}>
        <input id="name" onChange={handleTyping} value={curMessage.name}></input>
        <input id="message" onChange={handleTyping} value={curMessage.message}></input>
        <button>Send Message</button>
      </form>
      <ul>
        {messageList.map(msg => {
          return <li> {msg.name} {msg.message} </li>
        })}
        {console.log("test")}
      </ul>
    </div>
  );
}

export default App;

这是我的服务器端代码(虽然我认为这段代码没问题)

const express = require("express");
const app = express();
const http = require("http").createServer(app);
const io = require("socket.io")(http);

http.listen(8080, () => console.log("Connected to Server"));

io.on("connection", socket => {
  console.log("User has connected " + socket.id);
  socket.on("message", data => {
    socket.broadcast.emit("receiveMsg", data);
  });
});

Answer 1

尝试将您的 socket.on(..) 放在 useEffect 中。也许在渲染中执行 setState 是速度变慢的原因。

useEffect(() => {
  socket.on("receiveMsg", (message) => {
    setList([...messageList, message]);
  });

  return () => {
    socket.off("receiveMsg");
  };
}, [messageList]);