Banco de dados em tempo real

12 min

como usar o parse server live query introdução as consultas ao vivo são destinadas a serem usadas em aplicações reativas em tempo real , onde apenas usar o paradigma de consulta tradicional pode causar vários problemas, como aumento do tempo de resposta e alto uso de rede e servidor as consultas ao vivo devem ser usadas em casos onde você precisa atualizar continuamente uma página com dados frescos vindos do banco de dados, o que frequentemente acontece em (mas não se limita a) jogos online, clientes de mensagens e listas de tarefas compartilhadas esta seção explica como usar o live query do back4app em um ambiente javascript através do back4app para este tutorial, como exemplo, você irá construir uma lista de tarefas online , usando consultas ao vivo, conforme mostrado abaixo veja a lista completa de todo online list projeto em projeto live query todo list https //github com/igor ribeiiro/onlinetodolist veja mais sobre o parse sdk em referência da api do sdk javascript https //parseplatform org/parse sdk js/api/4 3 1/ e documentação de código aberto do parse para o sdk javascript https //docs parseplatform org/js/guide/#live queries pré requisitos para completar este tutorial, você precisará um aplicativo javascript básico conectado ao back4app ou ao projeto live query todo list https //github com/igor ribeiiro/onlinetodolist nota você pode usar o aplicativo criado em nosso tutorial de instalação do sdk parse para javascript https //www back4app com/docs/javascript/parse javascript sdk ou o projeto live query todo list https //github com/igor ribeiiro/onlinetodolist conhecimento suficiente de consultas javascript parse https //docs parseplatform org/js/guide/#queries (mas não é obrigatório) 1 ativar live query antes de começar a codificar, é necessário ter uma classe em seu banco de dados para habilitar a consulta ao vivo para fazer isso, basta encontrar seu aplicativo no site do back4app https //www back4app com/ , e clicar em \painel\ > \criar uma classe\ , conforme mostrado abaixo nota aqui, esta classe será chamada de \mensagem\ agora, para habilitar o recurso de consulta ao vivo, faça login em sua conta no site do back4app https //www back4app com/ , encontre seu aplicativo e clique em \ configurações do aplicativo\ > \configurações do servidor\ procure o bloco “url do servidor e consulta ao vivo” e clique em \configurações\ o bloco “url do servidor e consulta ao vivo” se parece com isso então, você chegará a uma página como a abaixo nesta página, você precisará marcar a \ativar seu subdomínio back4app\ opção, a \ativar live query\ opção, e todas as classes nas quais você deseja que o live query seja ativado, como mostrado abaixo é necessário ativar seu subdomínio para usar live queries porque ele funcionará como o servidor ao vivo 2 inscreva se na sua query para começar a usar livequeries, você primeiro precisa criar um \livequeryclient\ que gerenciará as conexões websocket para você para fazer isso, você terá que fornecer o id da aplicação, sua chave javascript para fins de verificação, e também uma url de servidor que deve ser o domínio com o qual você fez a configuração na etapa anterior aqui está o 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(); após seguir os passos mencionados acima, você deve criar uma consulta para o tipo de objeto que deseja assinar uma assinatura é um event emitter, que disparará eventos quando mudanças ocorrerem em um objeto que satisfaça sua consulta neste exemplo, você fará uma consulta básica e assinará todas as mudanças feitas no o \todo\ objeto veja mais sobre consultas em documentação oficial de consultas do parse https //docs parseplatform org/js/guide/#queries abaixo está o 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 ouvir eventos com a configuração pronta, é necessário codificar o que seu aplicativo fará quando um evento ocorrer nesta parte, vamos mostrar como ouvir esses eventos em um exemplo prático o todo online list exemplo servirá como um guia para seu projeto porque há pouco ou nenhum código boilerplate utilizado os dois principais eventos que você vai usar aqui são o \create\ evento e o \delete\ evento a lista completa de eventos pode ser encontrada aqui http //docs parseplatform org/js/guide/#event handling 3 1 o evento de criação o \createevent\ é disparado toda vez que um \parseobject\ é criado e atende às restrições de consulta que você inseriu este evento retorna o objeto criado no exemplo da lista online de tarefas , o array de atividades é armazenado na variável \this todos\ e adicionaremos os novos objetos do nosso banco de dados a este array, quando um evento de criação ocorrer o código para \createevent\ é mostrado abaixo createevent js 1 subscription on('create', todo => { 2 this todos add(todo); 3 console log('on create event'); 4 }); 3 2 o evento de exclusão sempre que um \parseobject\ existente que atende às suas restrições de consulta é excluído do banco de dados, você receberá este evento, que retorna o objeto excluído no exemplo da lista online de tarefas , você deve excluir um objeto da lista toda vez que ele for excluído do banco de dados procure por ids correspondentes entre o servidor e o código, para identificar os objetos excluídos o código para \deleteevent\ é o seguinte 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á feito! neste ponto, você sabe como usar consultas ao vivo para criar aplicações reativas em tempo real você também sabe como fazer a configuração correta da consulta ao vivo usando o back4app e pode começar a implementá la em seu aplicativo