Le client Firestore dans l'application React n'utilise pas de Websockets mais effectue des centaines de requêtes POST
P粉006847750
P粉006847750 2024-02-26 16:56:12
0
1
475

Je suis nouveau sur React et Firestore (version 9).

J'ai suivi le tutoriel et créé un simple auditeur pour lire et afficher la collection. Je souhaite que Firestore ouvre Websocket par défaut et synchronise les documents via celui-ci. Il s'avère qu'il envoie 发出多次 POST 请求https://firestore.googleapis.com/google.firestore.v1.Firestore/Listen/channel?VER=8&database=... au point final toutes les secondes

Je ne suis pas dans un VPN et mon pare-feu ne devrait pas bloquer les Websockets.

Dois-je m'inquiéter d'un si grand nombre de demandes ? Puis-je forcer FS à utiliser des Websockets ?

J'ai lu Firebase.INTERNAL.forceWebSockets(); mais il ne semble pas être accessible en Typescript.

Mes composants :

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

Ma configuration Firestore :

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)

P粉006847750
P粉006847750

répondre à tous(1)
P粉038856725

Question :

La raison pour laquelle vous recevez plusieurs demandes de publication par seconde est que votre useEffect n'a aucun tableau de dépendances et

(La partie en surbrillance change l'état de votre chien, ce qui provoque un nouveau rendu qui appelle la méthode de désabonnement et après le nouveau rendu, useEffect est à nouveau saisi et une boucle infinie apparaît)

L'ajout d'un tableau vide devrait résoudre le problème (oui, vous devez vous en inquiéter et l'éviter car cela peut entraîner des problèmes de front-end et de back-end tels que des performances, des blocages, des plantages et peut également vous obliger à payer une facture Firestore). p>

Comment y remédier :

Essayez de remplacer useEffect par

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();
    },[]); // 

Si vous configurez le reste correctement, l'ajout d'un tableau de dépendances vide (donc en vous abonnant uniquement lorsque le composant est installé) devrait garder vos données synchronisées (pas besoin de Firebase.INTERNAL.forceWebSockets(); ou quelque chose comme ça)

Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!