Base de datos en tiempo real

12 min

cómo usar parse server live query introducción las consultas en vivo están destinadas a ser utilizadas en aplicaciones reactivas en tiempo real , donde solo usar el paradigma de consulta tradicional podría causar varios problemas, como un aumento en el tiempo de respuesta y un alto uso de red y servidor las consultas en vivo deben usarse en casos donde necesite actualizar continuamente una página con datos frescos provenientes de la base de datos, lo que a menudo ocurre en (pero no se limita a) juegos en línea, clientes de mensajería y listas de tareas compartidas esta sección explica cómo usar live query de back4app en un entorno de javascript a través de back4app para este tutorial, como ejemplo, construirás una lista de tareas en línea , utilizando consultas en vivo, como se muestra a continuación ver la lista completa de todo online list proyecto en proyecto de lista de tareas en vivo https //github com/igor ribeiiro/onlinetodolist vea más sobre parse sdk en referencia de api de javascript sdk https //parseplatform org/parse sdk js/api/4 3 1/ y documentación de código abierto de parse para javascript sdk https //docs parseplatform org/js/guide/#live queries requisitos previos para completar este tutorial, necesitarás una aplicación básica de javascript conectada con back4app o el proyecto de lista de tareas en vivo https //github com/igor ribeiiro/onlinetodolist nota puedes usar la aplicación creada en nuestro tutorial de instalación de javascript parse sdk https //www back4app com/docs/javascript/parse javascript sdk o el proyecto de lista de tareas en vivo https //github com/igor ribeiiro/onlinetodolist suficiente conocimiento de consultas de javascript parse https //docs parseplatform org/js/guide/#queries (pero no es obligatorio) 1 habilitar consulta en vivo antes de comenzar a codificar, es necesario tener una clase en tu base de datos para habilitar live query para hacer eso, simplemente encuentra tu aplicación en el sitio web de back4app https //www back4app com/ , y haz clic en \tablero\ > \crear una clase\ , como se muestra a continuación nota aquí, esta clase se llamará \mensaje\ ahora, para habilitar la función live query, inicia sesión en tu cuenta en sitio web de back4app https //www back4app com/ , encuentra tu aplicación y haz clic en \ configuración de la aplicación\ > \configuración del servidor\ busca el bloque “url del servidor y live query” y haz clic en \configuraciones\ el bloque “url del servidor y live query” se ve así luego, llegarás a una página como la que se muestra a continuación en esta página necesitarás marcar la \activa tu subdominio de back4app\ opción, la \activa live query\ opción, y todas las clases en las que deseas que se active live query, como se muestra a continuación es necesario activar tu subdominio para usar live queries porque funcionará como el servidor en vivo 2 suscríbete a tu consulta para comenzar a usar livequeries, primero necesitas crear un \livequeryclient\ que gestionará las conexiones websocket por ti para hacer esto, tendrás que proporcionar el id de la aplicación, su clave de javascript para fines de verificación, y también una url de servidor que debería ser el dominio con el que hiciste la configuración en el paso anterior aquí está el código para \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(); después de seguir los pasos mencionados anteriormente, deberías crear una consulta para el tipo de objeto al que deseas suscribirte una suscripción es un event emitter, que generará eventos cuando ocurran cambios en un objeto que satisfaga tu consulta en este ejemplo, harás una consulta básica y te suscribirás a todos los cambios realizados en el \todo\ objeto consulta más sobre consultas en documentación oficial de consultas de parse https //docs parseplatform org/js/guide/#queries a continuación se muestra el código para \querysubscribe\ querysubscribe js 1 var query = new parse query('todo'); 2 query ascending('createdat') limit(5); 3 var subscription = client subscribe(query); 3 escuchar eventos con la configuración lista, es necesario codificar lo que hará tu aplicación cuando se dispare un evento en esta parte, vamos a mostrar cómo escuchar estos eventos en un ejemplo práctico el todo online list ejemplo servirá como una guía para tu proyecto porque se utiliza poco o ningún código de plantilla los dos eventos principales que vas a usar aquí son el \create\ evento y el \delete\ evento la lista completa de eventos se puede encontrar aquí http //docs parseplatform org/js/guide/#event handling 3 1 el evento de creación el \createevent\ se dispara cada vez que un \parseobject\ es creado y cumple con las restricciones de consulta que has insertado este evento devuelve el objeto creado en el todo online list ejemplo, el array de actividades se almacena en la \this todos\ variable y añadiremos los nuevos objetos de nuestra base de datos en este array, cuando ocurra un evento de creación el código para \createevent\ se muestra a continuación createevent js 1 subscription on('create', todo => { 2 this todos add(todo); 3 console log('on create event'); 4 }); 3 2 el evento de eliminación cada vez que un \parseobject\ existente que cumple con tus restricciones de consulta es eliminado de la base de datos, recibirás este evento, que devuelve el objeto eliminado en el todo online list ejemplo, tienes que eliminar un objeto de la lista cada vez que se elimina de la base de datos busca ids coincidentes entre el servidor y el código, para identificar los objetos eliminados el código para \deleteevent\ es el siguiente 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 }); ¡está hecho! en este punto, sabes cómo usar consultas en vivo para hacer aplicaciones reactivas en tiempo real también sabes cómo hacer la configuración correcta de consultas en vivo usando back4app y puedes comenzar a implementarlo en tu aplicación