Pelanggan Firestore dalam apl React tidak menggunakan Websockets tetapi membuat ratusan permintaan POST

Question

Saya baru menggunakan React dan Firestore (versi 9).

Saya mengikuti tutorial dan mencipta pendengar mudah untuk membaca dan memaparkan koleksi. Saya mahu Firestore membuka Websocket secara lalai dan memastikan dokumen disegerakkan melaluinya. Ternyata ia menghantar 发出多次 POST 请求https://firestore.googleapis.com/google.firestore.v1.Firestore/Listen/channel?VER=8&database=... ke titik akhir setiap saat

Saya tidak menggunakan VPN dan tembok api saya tidak sepatutnya menyekat Websocket.

Perlukah saya risau tentang jumlah permintaan yang begitu banyak? Bolehkah saya memaksa FS untuk menggunakan Websockets?

Saya membaca Firebase.INTERNAL.forceWebSockets(); tetapi ia nampaknya tidak boleh diakses dalam Typescript.

Komponen saya:

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>
    );
}

Konfigurasi Firestore saya:

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

Soalan:

Sebab anda mendapat berbilang permintaan siaran sesaat adalah kerana useEffect anda tidak mempunyai sebarang tatasusunan kebergantungan dan

(Bahagian yang diserlahkan ialah mengubah keadaan anjing anda yang menyebabkan pemaparan semula yang memanggil kaedah berhenti melanggan dan selepas useEffect pemaparan semula dimasukkan semula dan gelung tak terhingga muncul)

Menambah tatasusunan kosong harus menyelesaikan masalah (ya, anda harus bimbang dan mengelakkan perkara ini kerana ia boleh menyebabkan masalah bahagian hadapan dan bahagian belakang seperti prestasi, pegun, ranap sistem dan mungkin juga menyebabkan anda membayar beberapa bil Firestore). p>

Cara membetulkannya:

Cuba tukar useEffect kepada

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();
    },[]); // 
Jika anda menyediakan selebihnya dengan betul, menambah tatasusunan kebergantungan kosong (jadi hanya melanggan apabila komponen dipasang) harus memastikan data anda segerak (tidak perlu Firebase.INTERNAL.forceWebSockets(); atau apa-apa seperti itu)