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