Der Firestore-Client in der React-App verwendet keine Websockets, sondern stellt Hunderte von POST-Anfragen

Question

Ich bin neu bei React und Firestore (Version 9).

Ich habe das Tutorial befolgt und einen einfachen Listener erstellt, um die Sammlung zu lesen und anzuzeigen. Ich möchte, dass Firestore Websocket standardmäßig öffnet und die Dokumente darüber synchron hält. Es stellt sich heraus, dass jede Sekunde 发出多次 POST 请求https://firestore.googleapis.com/google.firestore.v1.Firestore/Listen/channel?VER=8&database=... an den Endpunkt gesendet wird

Ich bin nicht in einem VPN und meine Firewall sollte Websockets nicht blockieren.

Muss ich mir über so viele Anfragen Sorgen machen? Kann ich FS irgendwie zwingen, Websockets zu verwenden?

Ich habe Firebase.INTERNAL.forceWebSockets(); gelesen, aber es scheint in Typescript nicht zugänglich zu sein.

Meine Komponenten:

export default function App() {
    const dogsCol = collection(firestore, 'dogs');

    const [dogs, setDogs] = React.useState<Dog[]>([]);

    useEffect(() => {
        const unSubscribe = onSnapshot(dogsCol, dogsSnap => {
            const dogsArray = dogsSnap.docs.map(dogSnap => {
                const dog = dogSnap.data() as Dog;
                dog.id = dogSnap.id;
                return dog;
            });
            setDogs(dogsArray);
        });

        return () => unSubscribe();
    });

    return (
        <Container maxWidth="sm">
            <Box sx={{ my: 4 }}>
                {dogs.map(dog => <div key={dog.id}>{dog.name}</div>)}
            </Box>
        </Container>
    );
}

Meine Firestore-Konfiguration:

const firebaseConfig = {
    apiKey: "...",
    // etc
};
const app = initializeApp(firebaseConfig);


export const auth = getAuth(app);
export const firestore = getFirestore(app);

const provider = new GoogleAuthProvider();
provider.setCustomParameters({
  prompt: 'select_account'
});

export const signInWithGoogle = () => signInWithPopup(auth, provider)

Answer 1

问题：

您每秒多次收到 post 请求的原因是因为您的 useEffect 没有任何依赖项数组并且

（突出显示的部分正在更改您的狗的状态，这会导致重新渲染，从而调用取消订阅方法，并且在重新渲染后再次输入 useEffect 并出现无限循环）

添加一个空数组应该可以解决该问题（是的，您应该担心并避免这种情况，因为它可能会导致前端和后端问题，例如性能、冻结、崩溃，并且还可能导致您需要支付一些 Firestore 账单）。 p>

如何修复它：

尝试将 useEffect 更改为

useEffect(() => {
        const unSubscribe = onSnapshot(dogsCol, dogsSnap => {
            const dogsArray = dogsSnap.docs.map(dogSnap => {
                const dog = dogSnap.data() as Dog;
                dog.id = dogSnap.id;
                return dog;
            });
            setDogs(dogsArray);
        });

        return () => unSubscribe();
    },[]); // 
如果您正确设置其余部分，添加空依赖项数组（因此仅在组件安装时订阅）应该使您的数据保持同步（不需要 Firebase.INTERNAL.forceWebSockets(); 或类似的东西）