0

Este é o cenário: Tenho um usuário central, o gerente de um hotel que vai ficar monitorando 24 hs o status dos quartos em tempo real. Os quartos possuem 3 status: 1-Em uso. 2-Em manutenção (limpeza). 3-Disponível.

A atualização desse status pode vir de um ou vários usuários, por exemplo serventes que acabaram de entrar no quarto para iniciar uma limpeza.

O gerente precisa saber o que está acontecendo com os quartos em tempo real.

Para isso bastaria fazer o refresh da página do Gerente, cada vez que um servente inserisse algum registro no banco de dados (como acontece com o facebook por exemplo). Caso nada seja inserido no banco de dados, a pagina não precisa se atualizar.

Tudo que tenho em mente é o refresh automático da página, mas ele acontecerá a cada segundo estipulado, haja inserção no BD ou náo. Para isso eu faria:

1 - dentro do <head></head>, usar a seguinte tag Meta

<Meta http-equiv="refresh" content="x" />

Onde "x" é o tempo. expl x=1 (1s).

2 - Poderia usar javascript setTimeout() para a página chamar a si mesma a cada x segundos.

3 - poderia fazer uma combinação de setTimeout() com ajax.

Acho que existem técnicas mais modernas para alcançar o mesmo objetivo, se não me engano.

Como sou novato no nodeJS gostaria de saber se seria mais apropriado usar o nodeJs nesse cenário, em detrimento das técnicas citadas anteriormente e que já domino, e se for o caso de usar o node, como implementaria o código para atualizar a pagina do gerente respondendo ao evento insert no banco de dados feito por outro usuário?

4
  • não sou desenvolvedor web, então não posso responder com autoridade,mas acho que é irrelevante se vai usar node.js ou qualquer outra tecnologia no servidor, o importante é qual tecnologia real time você vai usar, se long polling, server sent events, websockets, etc
    – zentrunix
    8/10/2016 às 3:48
  • na verdade as minhas abordagens (1, 2 ou 3) resolvem o problema. Porém fazer o refresh da pagina mesmo se nada foi modificado no bd, eu acho isso meio gambiarra. Queria saber se nodeJs é a alternativa correta sem gambiarra, e como seria essa implementação.
    – IgorAlves
    8/10/2016 às 3:58
  • 1
    Refresh é gambiarra de qualquer maneira, não importa o que use no servidor. Monitorar pelo navegador não deixa de ser "gambiarra" também, apesar de estar na moda. Se mesmo assim quer fazer pelo navegador, é exatamente o que o @JoséX. afirmou, o lado do servidor não faz diferença, o problema é a tecnologia do lado cliente, e ele listou as alternativas no comment acima. Ideal mesmo seria uma aplicação nativa.
    – Largato
    8/10/2016 às 6:38
  • Boas não uso o node.js mas tive um projeto no trabalho mais ou menos nessa características e o que eu fiz foi usei php criei as queries que queria e sim também usei meta para fazer o refresh, talvez fosse mais eficaz e facil só usares php embutido no html
    – luis lota
    8/10/2016 às 19:14

3 Respostas 3

3

Tive que passar uns dias estudando para achar a resposta correta. Poder usar uma técnica ou outra não quer dizer que ela deva ser utilizada. Depende da situação. No meu caso específico eu poderia usar polling, ou long polling, ou outras. Mas eu queria saber qual a abordagem adequada e por quê.

Então vou fazer um resumo do que li, e justificar o pq da escolha do SSE e não as outras sugestões.

Desde o seu início, as aplicações web foram criadas numa lógica de cliente/servidor, onde o cliente SEMPRE INICIA o processo enviando uma requisição para o servidor e este retorna uma resposta para o cliente (Note que a resposta pode ser um conjunto vazio. Exemplo: um cliente pergunta por algum dado novo no banco de dados e o servidor responde dizendo que não houve nenhuma alteração no BD desde a última requisição).

Seguindo essa lógica, não havia alguma maneira do servidor enviar as novas alterações para o cliente de modo INDEPENDENTE, ou seja, sem que este tenha requisitado primeiro essa ação.

O tempo passou e junto com os dispositivos móveis, o HTML5 e a internet de alta velocidade, veio também o aparecimento da web real time, que é um conjunto de técnicas e tecnologias que permitem com que os usuários troquem (enviem e recebam) informações em tempo real. Informações que podem ser dos mais diversos tipos, partindo desde pequenas strings como "Oi tudo bem?", passando por jogos real time, chegando até uma streaming de vídeo 4k ou broadcasting bi-direcional e eté mesmo aplicações real time como SAP-HANA com IoT, entre outras necessidades de cominicação bi-direcional ou não.

O fato é que a natureza da web é uni-direcional e as necessidades hoje(2016) são outras. Precisamos de uma comunicação bi-direcional e em real time, sem ter que usar códigos para fazer automaticamente requisições periódicas ao servidor.

Como a solução ainda não estava na mão, apareceram várias técnicas para tentar SIMULAR um canal aberto, bi-direcional onde uma requisição possa ser feita pelo cliente ou uma resposta possa ser enviada pelo servidor, assim que estiver disponível. Um exemplo claro é o facebook ou twitter onde a primeira requisição é feita pelo cliente quando ganhamos acesso à nossa página e depois de lagum tempo de inatividade recebemos notificações de que novas mensagens estão disponíveis, sem que para isso tenhamos solicitados nada a mais.

Vamos ver algumas (não todas) técnicas disponíveis para alcançarmos essa tarefa. Vale notar que um assunto puxa o outro e aqui neste ponto onde se tenta SIMULAR um canal aberto de comunicaçõ bi-direcional com o servidor as primeiras técnicas, ou a maioria delas, passam a usar requisições periódicas aos servidores e com isso apareceu um novo problema precisando desde já de uma solução - a sobrecarga dos servidores com requisições bloqueantes de I/O devido às características de processos multi threads. A solução veio com o NODEJS onde tenta fazer o I/O de maneira diferente tenatndo não bloquear o processo. Além disso temos a ajuda do balanceamento de carags com o proxi reverso do NGINX para dar suporte nessa batalha da comunicação bi-direcional cliente/servidor. Esse não é o assunto mas aqui tem um bom vídeo em português falando um pouco de teoria do NODEJS

Então vamos às nossas alternativas de se manter uma conexão bi-direcional com o servidor:

  1. Usar a tag meta com o http-equiv igual a refresh <meta http-equiv='refresh' content='5'> . Essa técnica permite recarregar a página a cada período especificado no atributo content. No exemplo o refresh será feito a cada 5 segundos. Embora seja fácil e uma possível solução para um problema específico, vale lembrar que os principais motores de pesquisa penalizam páginas com http-equiv='refresh' colocando-as na lista negra pois são consideradas práticas anti-éticas de SEO. Doorway page.

    Leitura: Link

  2. Aprimeira alternativa ao http-equiv='refresh' é o uso do javascript - AJAX. XMLHttpRequest (XHR) deu a primeira ilusão de que estava se ENVIANDO dados do servidor para o cliente através de uma conexão (cliente<-->servidor) HTTP persistente ou duradora, mas este não foi o caso. Pois os dados não estavam sendo enviados e sim puxados do servidor. Com o XHR a solicitação é feita pelo cliente de maneira que o usuário não opera nenhum evento explicitamente. O XHR tbm inaugurou o modelo Comet com suas diferentes abordagens (Hidden iframe, XHR polling, XHR long polling e Script tag long polling). Em geral essas técnicas tbm podem ser classificadas como AJAX REVERSO pois tentam mimetizar uma pseudo autonomia do servidor para enviar dados para o cliente. Mas são todas técnicas iniciadas pelo cliente. Essas técnicas podem representar a solução ideal para algumas situações, mas possuem alguns efeitos colaterais, tais como sobrecarga no servidor (e ai vem o NODEJS e NGINX para amenizar o problema) devido a requisições programáticas desnecessátias. Imagina um servidor com 100 mil clientes conectados e fazendo polling a cada 5s onde 30%s desses recebem respostas vazias do servidor (exemplo citado anteriormente no início do texto). O threads foram carregados e I/Os foram bloqueados desnecessariamente. Nem precisa analisar muito para perceber a ineficiência e a dificuldade da escalabilidade.

2.1. XHR. O browser solicita informação ao servidor após um evento iniciado pelo usuário, sem a necessidade da página ser recarregada. O servidor envia resposta vazia ou não.

2.2. XHR polling. O browser fica solicitando informação do servidor periodicamente e este continua enviando respostas vazias, até que alguma informação nova esteja disponível. Comparado com o AJAX (XHR) tradicional, o XHR polling dispensa a necessidade da ação do usuário. Ou seja, pode ser usado em situações onde uma página precise ser modificada automaticamente.

2.3. O Piggyback polling é uma derivação do XHR polling que tenta remover as requisições que originarão respostas vazias e enviar dados adicionais. Não exitem requisições intervalares. O cliente manda a requisição quando ela precisa ser enviada. A diferença é que a resposta pode ser quebrada em pedaços (resposta solicitada + outros eventos no servidor). Além de não resolver o problema de sobrecarga das requisições desnecessárias, precisa modificar o código do cliente para responder aos casos de dados adicionais eventualmente enviados.

2.4. XHR long polling. Como as novas informações são enviadas somente quando acontece inicialmente uma requisição do cliente, isso causa um atraso no recebeimento da informação pelo browser, em relação ao momento que ela estava disponível no servidor. Então a solução long polling evita requisições frequentes e favorece recebimentos quase imediatos dessas informações. O browser solicita ao servidor, mas esse só responde quando tem algo para enviar. Então o servidor deixa a requisição suspensa até que exista dados para ser enviado ao browser. Uma vez que os dados foram enviado o servidor encerra a transação, o browser recebe o resultado e inicia logo em seguida uma outra requisição. Comparado com o polling o long polling diminui o uso desnecessário dos recursos do servidor, mas não 100% pois as solicitações continuam sendo enviadas ao servidor (talvez desnecessariamente). Seguindo o exemplo acima, 100 mil requisições seriam enviadas ao servidor, ainda que nem todas tenham respostas imediatas.

Então digamos que 60% dos clientes (60 mil) só recebem atualização 3 vezes ao dia. Se eles permanecesses conectados usando o long pooling só haveria 3 + 1 transações ao dia para esses clientes. Nos modelos anteriores haveria transações a cada intervalo de tempo estabelecido. Essa é uma boa estratégia de comunicação bi-direcional e existem algumas abordagens para realizá-la ou implementá-la. São elas:

2.4.1-Forever Iframe

2.4.2-Multipart XHR

2.4.3-Script Tags com JSONP

2.4.4-Long Living XHR

Leituras:

2.5-Embora as técnicas vistas anteriormente funcionem, e elas permitam uma comunicação duplex ou bi-direcional (cliente->servidor / servidor ->Cliente), elas são apenas alterações de uma tecnologia que não foi criada para esse fim. É quando entra em cena o HTML5. Essa nova versão do HTML traz embutida em si mesmo (nativo) 2 abordagens ou tecnologias que permitem a comunicação bi-direcional ou uni-direcional (servidor -> cliente) sem ter que alterar nada. São elas:

2.5.1 - SSE -> Server-Sent Events. Consulta unidirecional (servidor->cliente). Fácil implementação. 2.5.2 - Web SOCKETS -> Full Duplex Web Sockets. Consulta bi-direcional. Implementação um pouco mais trabalhosa.

Leituras:

Fico por aqui pois o SSE responde à pergunta original do post. Eu queria uma comunicação unidirecional do servidor para o cliente. Não tem necessidade (nesse cenário) de sobrecarregar o servidor com requisições que poderiam retornar consultas vazias ou sem nenhuma alteração desde a última query.

1
  • 1
    Ainda estou tentando entender porque esta resposta não ganhou vários ups! Bom trabalho. 12/01/2017 às 19:50
0

Use o PubNub. Usei em alguns projetos e é muito rápido. Existe um SDK Javascript.

0

Olá, acredito que uma boa forma de trabalhar com operações em real time é utilizando socket.io ( para node.js ), acesso o link e bons estudos.

1
  • Bem vindo a comunidade stackoverlow em português. Faça um tour e conheça um pouco das regras e boas práticas, responda de forma como seria possível implementar este recurso. (Um Exemplo) 14/10/2016 às 18:37

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .