6

Estou querendo atualizar uma div que contém os créditos de um cliente, assim que atualizar no Banco a quantidade de créditos dele e estou usando o setInterval:

setInterval(function(){
    ver_creditos();
}, 60000);

Então vi a função do HTML5, o EventSource (SSE) e fiz um teste, e pelo console vi que ele faz requisições de 5 em 5 segundos.

Nessa minha questão, queria saber qual dessas suas funções seria melhor para a minha utilidade, e qual delas usaria menos o servidor?

2 Respostas 2

9

O Ajax é uma requisição HTTP normal, mas que roda em background, o Ajax é para ser mais exato é uma "maneira" de se usar a API XmlHttpRequest de modo assíncrono, mas de qualquer forma a requisição é uma requisição normal HTTP, ele requisita uma vez recebe a resposta e fecha o pedido, mais detalhes em:

O server-sent events (SSE) é diferente, ele é mais semelhante ao WebSocket, todavia diferente do WebSocket, o SSE pode funcionar em um servidor HTTP normal, como deve saber o PHP, asp.net-mvc e outros tecnologias web rodam no lado do servidor e só lhe enviam a resposta quando você solicita/requisita, então quando você faz isto:

var evtSource = new EventSource("api.php");

Você estará em uma especie de conexão persistente, ou seja o api.php pode ficar em um loop infinito, sem nunca terminar, ao invés de você pegar a resposta é como se o PHP lhe enviasse a resposta a hora que ele deseja-se, por exemplo:

date_default_timezone_set("America/Sao_Paulo");
header("Content-Type: text/event-stream\n\n");

$counter = rand(1, 10);

while (1) {  
  echo "event: ping\n";
  $curDate = date(DATE_ISO8601);
  echo 'data: ' . $curDate;
  echo "\n\n";
        
  $counter--;
  
  if (!$counter) {
    echo 'data: This is a message at time ' . $curDate . "\n\n";
    $counter = rand(1, 10);
  }
  
  ob_end_flush();
  flush();
  sleep(1);
}

A cada segundo é o PHP "quem vai enviar uma requisição" (relativamente falando) para o client-side, e você vai ficar observando com:

evtSource.onmessage = function(e) {
      console.log(e.data); //Pega a resposta do PHP
}

Formato SSE

O sse tem um formato um pouco padrão, primeiro é necessário passar o Content-Type: text/event-stream nos headers, e então o que seria equivalente ao body deve conter estes campos (não todos ao mesmo tempo, depende muito do que deseja fazer):

  • event:

    Se especificado um evento será disparado na janela/aba que foi iniciado o SSE, o evento irá chamar um evento adicionado com addEventListener ao próprio new EventSource, caso não tenha um evento nomeado será disparado o onmessage

  • data

    Envia uma "string" para o onmessage, se necessitar de multiplas linhas será necessário que todas comecem com data:, o EventSource receberá todas linhas concactenadas, quebras de linha serão removidas

  • id

    É usado para identificar o evento, claro que pode alterar, creio ser mais para uso de saber quem esta chamando o que.

  • retry

    Define o tempo para se reconectar ao tentar enviar um evento, se o script no lado servidor não estiver em loop o EventSource finaliza sozinho e tenta novamente após o último tempo definido em retry (se definido), caso contrário creio que usa o tempo padrão, aparentemente ele também tenta conectar novamente se tiver problemas com conexão.

Suporte

Conforme o caniuse os navegadores que suportam o SSE são:

  • Chorme 6
  • Firefox 6
  • Safari 5
  • Browser nativo do Android 4.4

Nota: Internet Explorer e Microsoft Edge não suportam SSE, o Edge esta em construção, talvez logo tenha suporte

Alguns BUGs ou detalhes sobre suporte relatados:

  • CORS em EventSource só é suportado a partir do Firefox 10+, Opera 12+, Chrome 26+ e Safari 7.0+.

  • Até a versão 36 do Firefox havia um bug, acaso houve-se perda de conexão o próprio EventSource não tentava reconectar, apesar do que foi dito pelo caniuse é possivel você contornar isto usado a propriedade evtSource.readystate para checar qual o estado:

    • Retorna 0 se estiver conectando ainda
    • Retorna 1 se estiver aberto
    • Retorna 2 se estiver fechado, ou seja, você pode adicionar um setTimeout para ficar checando e se for 2 você mesmo pode tentar reabrir.
  • Até Firefox 52 não havia suporte para EventSource em web/shared workers

  • Eventualmente programas de Antivirus software talvez possam bloquear ou causar algum conflito (não sei bem como ocorre, se achar algo sobre isto irei editar a resposta).

Testando o SSE

A MDN deixou um exemplo em PHP: https://github.com/mdn/dom-examples/tree/master/server-sent-events, todavia criei um exemplo mais simples, se estiver usando PHP, crie um script chamando chatbox.html (não precisa ser .php, mas não faz diferença neste caso) com este conteudo:

<!DOCTYPE html>
<html>
<head></head>
<body>

<button id="close">Terminar conversa</button>
<div id="chatbox"></div>

<script type="text/javascript">
var btnClose = document.getElementById("close");
var chatbox = document.getElementById("chatbox");
var evtSource = new EventSource("chat.php");

evtSource.onmessage = function(e) {
    var n = document.createElement("p");

    n.innerHTML = "message: " + e.data;
    chatbox.appendChild(n);
};

btnClose.onclick = function () {
    evtSource.close(); //Finaliza a conexão do SSE
};
</script>
</body>
</html>

E então no crie na mesma pasta um arquivo com o nome chat.php e adicione este conteúdo:

<?php
header('Content-Type: text/event-stream');

$canned = array(
    'Oi?',
    'Quer tc?',
    'você é de onde?',
    'Poderia me ajudar com uma duvida de JS?',
    'já usou o stack overflow?',
    'Vamos jogar um fut?'
);

$size = count($canned) - 1;

echo 'data: <strong>Você entrou na sala!</strong>';

echo "\n\n"; //Requer duas quebras de linha


//Loop "infinito"
while (1) {

    //Pega uma "mensagem pronta" aleatória
    $response = $canned[mt_rand(0, $size)];

    echo 'data: ', htmlentities($response);

    echo "\n\n"; //Requer duas quebras de linha

    flush();

    //Varia entre 1 e 4 segundos para que o PHP envia uma nova mensagem para o SSE
    sleep(mt_rand(1, 4));
}

Este script simula uma pessoa mandando mensagens para você, é apenas para entender o comportamento

7
  • 5
    Vamos jogar um fut? só se for agora xD!
    – gato
    Commented 7/06/2017 às 4:52
  • SSE é mais leve que Ajax para o servidor então? Commented 7/06/2017 às 10:37
  • O script PHP que fica rodando no servidor, ele é destruído automaticamente assim que a conexão é finalizada? Precisaria usar o connection_aborted () ? Commented 7/06/2017 às 13:35
  • 1
    @JeffersonQuesado Essa coisa de "leve" é muito relativa, quero dizer, o script PHP vai ficar aberto constantemente, então ele não vai precisar ficar sendo reinterpretado (php não é compilado), isto ajuda sim o servidor, mas é algo que pode ser bem relativo, depende muito do que você fez no back-end, por isto não citei questão de melhor ou pior.
    – Syzoth
    Commented 7/06/2017 às 14:38
  • 1
    @JeffersonQuesado sim basicamente é isto que ocorre com conexões persistentes geralmente, diminuir requisições HTTP ajuda muito, principalmente se for algo bem pesado do lado do back-end, mas se for uma coisa leve, talvez nem sinta muita melhora, quero dizer provavelmente haverá, mas será tão minima que você nem vai sentir, eu vou tentar confirmar os detalhes, se a conexão persistente puder ser compartilhada com todas abas ou o mesmo script que estiver rodando enviar resposta para todos SSE então creio que terá um ganho significativo. Talvez eu formule algo sobre Websocket, ajax e SSE
    – Syzoth
    Commented 7/06/2017 às 14:46
2

Um ponto importante a considerar é que o IE não suporta SSE, você deve utilizar um polyfill como esse se quiser ou uma biblioteca como a Yaffle

Server Sent Events geram menos tráfico no servidor pois cliente não precisa ficar solicitando dados ao servidor para descobrir que nada mudou, a informação é enviada somente quando estiver disponível.

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 .