React项目聊天应用。需要关于设置间隔的建议

Question

下面是我的项目的主要代码，这是一个简单的开放式聊天室。这基本上是一个聊天客户端，它只能获得聊天日志和帖子聊天。要登录，我向服务器请求一个授权密钥，并使用该密钥开始聊天。

我想做的事情是每隔3秒从服务器获取一次聊天日志。因此，在它每3秒检索一次聊天记录后，页面应该会刷新新的聊天记录。然而，这对我来说似乎不是很好。

如果有一个好的反应专业谁可以为我解决这个问题，请。

import React from 'react';
import { withRouter } from 'react-router-dom';

import './Chat.css';

import InfoBar from '../InfoBar/InfoBar';
import Input from '../Input/Input';
import Messages from '../Messages/Messages';

const API_ENDPOINT = 'https://snu-web-random-chat.herokuapp.com';
let INTERVAL_ID;

const Chat = ({ token, setToken }) => {
    const [ name, setName ] = React.useState('');
    const [ message, setMessage ] = React.useState('');
    const [ messages, setMessages ] = React.useState([]);
    const [ lastEl, setLastEl ] = React.useState({});

    React.useEffect(() => {
        if (localStorage.getItem('username')) {
            setName(localStorage.getItem('username'));
        }

        window.addEventListener('scroll', listenToScroll, true);

        fetchData();

        INTERVAL_ID = setInterval(() => {
            fetchData();
        }, 3000);

        return () => {
            window.removeEventListener('scroll', listenToScroll);
            clearInterval(INTERVAL_ID);
        };
    }, []);

    const fetchData = () => {
        fetch(`${API_ENDPOINT}/chats?createdAtFrom=${lastEl.createdAt || ''}`)
            .then((res) => res.json())
            .then((msgs) => {
                const updatedMsgs = messages.concat(msgs);

                setLastEl(msgs[msgs.length - 1]);
                setMessages(updatedMsgs);
            });
    };

    const listenToScroll = (e) => {
        const div = document.getElementById('messagesContainer');
        // console.log(window.scrollY);
        // const winScroll = document.body.scrollTop || document.documentElement.scrollTop;

        // const height = document.documentElement.scrollHeight - document.documentElement.clientHeight;

        // const scrolled = winScroll / height;
    };

    const onLogin = (e) => {
        e.preventDefault();

        fetch(`${API_ENDPOINT}/login`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
            },
            body: `name=${name}`
        })
            .then((response) => response.json())
            .then(({ key }) => {
                if (key) {
                    setToken(true);
                    localStorage.setItem('__key', key);
                    localStorage.setItem('username', name);
                }
            })
            .catch((err) => console.error(err));
    };

    const sendMessage = (e) => {
        e.preventDefault();

        if (message) {
            fetch(`${API_ENDPOINT}/chats`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                    Authorization: `Key ${localStorage.getItem('__key')}`
                },
                body: `message=${message}`
            })
                .then((response) => response.json())
                .then((res) => {
                    const obj = {
                        createdAt: res.createdAt,
                        message: res.message,
                        userName: res.user.name,
                        _id: res.user._id
                    };
                    setMessages([ ...messages, obj ]);
                })
                .catch((err) => console.error(err));

            setMessage('');
        }
    };

    const logout = () => {
        localStorage.removeItem('__key');
        localStorage.removeItem('username');
        setToken(false);
    };

    const loadMessages = () => {
        fetchData();
        clearInterval(INTERVAL_ID);
    };

    return (
        <div className="outerContainer">
            <div className="innerContainer">
                <InfoBar
                    name={name}
                    token={token}
                    handleInput={(e) => setName(e.target.value)}
                    handleLogin={onLogin}
                    handleLogout={logout}
                />
                <Messages messages={messages} name={name} lastEl={lastEl} loadMore={loadMessages} />
                {token && <Input message={message} setMessage={setMessage} sendMessage={sendMessage} />}
            </div>
        </div>
    );
};

export default withRouter(Chat);

Answer 1

我可以给你一个建议，用socket.io做一个聊天应用，而不是setInterval。https://socket.io/get-started/chat