Platform
Comment intégrer Live Query avec Parse Server en JavaScript

12min
Comment utiliser Parse Server Live Query
Introduction
Les requêtes en direct sont destinées à être utilisées dans des applications réactives en temps réel, où l'utilisation du paradigme de requête traditionnel pourrait causer plusieurs problèmes, comme un temps de réponse accru et une utilisation élevée du réseau et du serveur. Les requêtes en direct doivent être utilisées dans les cas où vous devez mettre à jour continuellement une page avec des données fraîches provenant de la base de données, ce qui se produit souvent dans (mais n'est pas limité à) des jeux en ligne, des clients de messagerie et des listes de tâches partagées.
Cette section explique comment utiliser Live Query de Back4App dans un environnement JavaScript via Back4App.
Pour ce tutoriel, en exemple, vous allez créer une Liste de Tâches en Ligne en utilisant des requêtes en direct, comme montré ci-dessous:
﻿
Voir la liste complète des Todo Online List projet à Projet Live Query Todo List.
Voir plus sur le SDK Parse à Référence de l'API JavaScript SDK et documentation open source de Parse pour JavaScript SDK.
Prérequis
Pour compléter ce tutoriel, vous aurez besoin de :
Une application JavaScript de base connectée à Back4App ou le Projet Live Query Todo List.
Remarque : Vous pouvez utiliser l'application créée dans notre tutoriel d'installation du SDK Parse JavaScript ou le Projet Live Query Todo List.
Connaissances suffisantes en Requêtes JavaScript Parse (mais pas obligatoire).
1 - Activer Live Query
Avant de commencer à coder, il est nécessaire d'avoir une classe dans votre base de données pour activer la requête en direct. Pour ce faire, trouvez simplement votre application sur le Site Web de Back4App, et cliquez sur Tableau de bord > Créer une classe, comme montré ci-dessous : 
﻿
Remarque : Ici, cette classe sera appelée Message.
Maintenant, pour activer la fonctionnalité de requête en direct, connectez-vous à votre compte sur Site Web de Back4App, trouvez votre application, et cliquez sur Paramètres de l'application > Paramètres du serveur. Recherchez le bloc “URL du serveur et requête en direct” et cliquez sur PARAMÈTRES.
Le bloc “URL du serveur et requête en direct” ressemble à ceci :
﻿
Ensuite, vous arriverez sur une page comme celle ci-dessous. Sur cette page, vous devrez cocher l' Activer votre sous-domaine Back4App option, l' Activer Live Query option, et toutes les classes sur lesquelles vous souhaitez que Live Query soit activé, comme montré ci-dessous :
﻿
Il est nécessaire d'activer votre sous-domaine pour utiliser les Live Queries car il fonctionnera comme le serveur en direct.
2 - Abonnez-vous à votre requête
Pour commencer à utiliser les LiveQueries, vous devez d'abord créer un LiveQueryClient qui gérera les
connexions WebSocket pour vous. Pour ce faire, vous devrez fournir l'ID de l'application, sa clé JavaScript à des fins de vérification, et également une URL de serveur qui devrait être le domaine avec lequel vous avez effectué la configuration à l'étape précédente.
Voici le code pour LiveQueryClient:
liveQueryClient.js
1   var client = new Parse.LiveQueryClient({
2       applicationId: 'Your app Id here',
3       serverURL: 'wss://' + 'Your domain here', // Example: 'wss://livequerytutorial.back4app.io'
4       javascriptKey: 'Your JavaScript key here'
5   });
6   client.open();
1   var client = new Parse.LiveQueryClient({
2       applicationId: 'Your app Id here',
3       serverURL: 'wss://' + 'Your domain here', // Example: 'wss://livequerytutorial.back4app.io'
4       javascriptKey: 'Your JavaScript key here'
5   });
6   client.open();
﻿
Après avoir suivi les étapes mentionnées ci-dessus, vous devez créer une requête pour le type d'objet auquel vous souhaitez vous abonner. Une souscription est un
emetteur d'événements, qui déclenchera des événements lorsque des modifications se produisent sur un objet qui satisfait votre requête.
Dans cet exemple, vous allez effectuer une requête de base et vous abonner à toutes les modifications apportées à
the Todo objet.
Voir plus sur les requêtes à Documentation officielle des requêtes Parse.
Voici le code pour querySubscribe:
querySubscribe.js
1   var query = new Parse.Query('Todo');
2   query.ascending('createdAt').limit(5);
3   var subscription = client.subscribe(query);
1   var query = new Parse.Query('Todo');
2   query.ascending('createdAt').limit(5);
3   var subscription = client.subscribe(query);
﻿
3 - Écouter les événements
Avec la configuration prête, il est nécessaire de coder ce que votre application fera lorsque un événement se déclenche.
Dans cette partie, nous allons montrer comment écouter ces événements dans un exemple pratique.
L' Exemple de liste en ligne Todo servira de guide pour votre projet car il y a peu ou pas de code de base utilisé.
Les deux événements principaux que vous allez utiliser ici sont l' create événement et l' delete événement. La liste complète des événements peut être trouvée ici.
3.1 - L'événement de création
L' createEvent est déclenché chaque fois qu'un ParseObject est créé et remplit les contraintes de requête que vous avez insérées. Cet événement retourne l'objet créé.
Dans l'exemple de la Todo Online List, le tableau des activités est stocké dans la variable this.todos et nous ajouterons les nouveaux objets de notre base de données dans ce tableau, lorsqu'un événement de création se produit.
Le code pour createEvent est montré ci-dessous :
createEvent.js
1   subscription.on('create', todo => {
2       this.todos.add(todo);
3       console.log('On create event');
4   });
1   subscription.on('create', todo => {
2       this.todos.add(todo);
3       console.log('On create event');
4   });
﻿
3.2 - L'événement de suppression
Chaque fois qu'un ParseObject existant qui remplit vos contraintes de requête est supprimé de la base de données, vous recevrez cet événement, qui retourne l'objet supprimé.
Dans l'exemple de la Todo Online List, vous devez supprimer un objet de la liste chaque fois qu'il est supprimé de la base de données. Recherchez les ID correspondants entre le serveur et le code, pour identifier les objets supprimés.
Le code pour deleteEvent est le suivant :
deleteEvent.js
1   subscription.on('delete', todo => {
2       this.todos.forEach(t => {
3           if (t.id === todo.id) {
4               console.log('On delete event');
5               this.todos.delete(t);
6           }
7       });
8   });
1   subscription.on('delete', todo => {
2       this.todos.forEach(t => {
3           if (t.id === todo.id) {
4               console.log('On delete event');
5               this.todos.delete(t);
6           }
7       });
8   });
﻿
C'est fait !
À ce stade, vous savez comment utiliser les requêtes en direct pour créer des applications réactives en temps réel.
Vous savez également comment effectuer la configuration correcte des requêtes en direct en utilisant Back4App et pouvez commencer à l'implémenter dans votre application.
Mis à jour 27 Jan 2025
Cette page vous a-t-elle aidée?
Guide : Activer l'hébergement Web sur Back4App
Configurer la vérification par e-mail avec Parse