发送 15 条消息后，带有套接字的 React 聊天应用程序变慢

Question

我是一名新开发人员，正在尝试制作一个相当强大的 React 项目，在这个项目/网站中，有一个带有一些自定义选项卡的页面，其中一个选项卡是聊天。此聊天使用套接字与服务器进行通信。问题是在发送了大约 15-20 条消息后，任何收到聊天消息的客户端都会冻结很长一段时间。这是我在我的反应客户端中实现套接字的方式。

我有一个名为 socket.js 的实用程序文件：

import io from "socket.io-client";
const SOCKET_URL = "http://localhost:3001";
export const socket = io(SOCKET_URL, { transports : ['websocket'] });

在使用套接字的反应组件内部：

import {socket} from "../../utils/socket";

// This code runs (I think) only when the chat state variable changes or when I receive a socket update from the server
useEffect(()=>{
    socket.on("chat msg sent",(chatObj)=>{
        setChat([...chat,chatObj])
    })
},[socket,chat])

// This code is being run when someone sends a chat
const sendChat = (msg) => {
    const socketObj = {name:props.userState.username, content:msg, id,}
    console.log(socketObj);
    socket.emit("sending chat msg",socketObj)
    const clientObj = {name:props.userState.username, content:msg}
    setChat([...chat,clientObj]);
}

这是这个反应组件返回的内容：

return (
    <div className="container-fluid p-0 m-0 border border-3 border-danger">
        <div className="row p-0 m-0">
            <div className="col-3 border border-primary border-4"><h1></h1></div>
            <div className="col-7 border border-info border-4"></div>
            <div className="col-2 border border-success border-4">
                <div className="tab">
                    <button className="tablinks" onClick={()=>setTab('chat')}>Chat</button>
                    <button className="tablinks" onClick={()=>setTab('characters')}>Char</button>
                    <button className="tablinks" onClick={()=>setTab('compendium')}>Comp</button>
                    <button className="tablinks" onClick={()=>setTab('settings')}>Sett</button>
                </div>
                <div className="tab-content">
                    {tabContent}
                </div>
            </div>
        </div>
        <Character/>
    </div>
    );

选择聊天选项卡时，TabContent状态变量设置为此：

setTabContent(
    <div>
        <ul className="chat">
            {chat.map((entry)=>{
                return(
                    <li>
                        <h6>{entry.name}</h6>
                        <p>{entry.content}</p>
                    </li>
                )
            })}
        </ul>
        <form onSubmit={(e)=>{
            e.preventDefault();
            sendChat(chatInput);
            setChatInput('');
        }}>
            <input className="" value={chatInput} onChange={(e)=>setChatInput(e.target.value)}/>
        </form>
    </div>
)

在后端，我有一个名为 socketServer.js 的文件，该文件包含任何套接字连接，它只是一个导出到主服务器文件的函数。 socketServer.js：

exports = module.exports = function (io) {
    io.on('connection', function (socket) {
        io.emit('greeting', 'welcome to our site!');

        socket.on('join campaign room',(id)=>{
            socket.join(id);
            console.log("joining the campaign room", id);
        });
        
        socket.on('sending chat msg', (socketObj)=>{
            console.log("cool beans", socketObj);
            const chatObj = {name:socketObj.name, content:socketObj.content}
            socket.broadcast.to(socketObj.id).emit('chat msg sent',chatObj);
        });
    });
}

总体而言，这一直有效，直到发送了太多消息，然后对于任何接收消息的人来说都会变得非常慢。我不认为这是后端的问题，我认为这与通过套接字更新的反应状态变量有关，但我可能是错的。

Answer 1

每次您获得由setChat() 设置的新chat 变量时，您的useEffect 都会建立与socket.io 的新连接。因此，在 15 条消息之后，您已经为套接字事件 sending chat msg 设置了 15 个侦听器。同时你不会在 useEffect 的清理中移除之前的监听器。

你可以试试这个，只为套接字事件设置一个监听器

import {socket} from "../../utils/socket";

// This code runs (I think) only when the chat state variable changes or when I receive a socket update from the server
useEffect(()=>{
    const setChat = (chatObj) => {
        setChat(oldChat => [...oldChat, chatObj])
    }

    socket.on("chat msg sent", setChat)

    return () => soket.removeListener("chat msg sent", setChat)
},[socket])