EventSource

A interface EventSource √© usada para receber eventos enviados pelo servidor (server-sent events). Ele se conecta via HTTP em um servidor e recebe eventos com o formato text/event-stream. A conex√£o permanece aberta at√© ser fechada chamando EventSource.close() (en-US).

Assim que a conexão estiver aberta, mensagens recebidas do servidor são entregues para o seu código na forma de eventos message.

Ao contr√°rio dos WebSockets, server-sent events s√£o unidirecionais; ou seja, mensagens s√£o entregues em uma dire√ß√£o, do servidor para o cliente (por exemplo, um navegador web). Isso torna-os uma excelente escolha quando n√£o h√° necessidade de enviar mensagens do cliente para o servidor. Por exemplo, EventSource √© uma abordagem √ļtil para lidar com atualiza√ß√Ķes de status de m√≠dias sociais, feeds de not√≠cias, or entregar dados para um mecanismo de armazenamento do lado cliente como o IndexedDB ou o web storage.

Construtor

EventSource()
Cria um novo EventSource para receber enventos enviados pelo servidor de uma URL específica, opcionalmente no modo de credenciais.

Propriedades

 

Essa interface também herda propriedades do seu pai, EventTarget.

EventSource.readyState (en-US) Somente leitura
Um n√ļmero representando o estado da conex√£o. Valores poss√≠veis s√£o CONNECTING (0), OPEN (1), ou CLOSED (2).
EventSource.url (en-US) Somente leitura
Uma DOMString representando a URL da origem.
EventSource.withCredentials (en-US) Somente leitura
Um Boolean (en-US) indicando se a EventSource foi instanciada com credenciais cross-origin (CORS) definidas (true) ou n√£o (false, o padr√£o).

Eventos

EventSource.onerror
√Č um event handler chamado quando um erro ocorre e o evento error (en-US) √© despachado para o objeto EventSource.
EventSource.onmessage (en-US)
√Č um event handler chamado quando um evento message √© recebido, ou seja, quando uma mensagem est√° sendo recebida da origem.
EventSource.onopen (en-US)
√Č um event handler chamado quando um evento open √© recebido, ou seja, logo ap√≥s a abertura da conex√£o.

Métodos

Essa interface herda métodos de seu pai, EventTarget.

EventSource.close() (en-US)
Fecha a conexão, se houver, e define o atributo readyState como CLOSED. Se a conexão já estiver fechada, esse método não faz nada.

Exemplos

Nesse exemplo básico, um EventSource é criado para receber eventos do servidor; a página com o nome "sse.php" é responsável por gerar os eventos.

var evtSource = new EventSource('sse.php');
var eventList = document.querySelector('ul');

evtSource.onmessage = function(e) {
  var newElement = document.createElement("li");

  newElement.textContent = "message: " + e.data;
  eventList.appendChild(newElement);
}

Cada evento recebido faz com que o handler do evento onmessage no objeto EventSource seja executado. Ele, em contrapartida, cria um novo elemento <li> e escreve os dados da mensagem nele, e em seguida concatena o novo elemento na lista j√° presente no documento.

Nota: Voc√™ pode encontrar um exemplo completo no GitHub ‚ÄĒ veja Simple SSE demo using PHP.

Especifica√ß√Ķes

Especificação Status Comentário
HTML Living Standard
The definition of 'EventSource' in that specification.
Padr√£o em tempo real  

Compatibilidade com navegadores

Estamos convertendo nossos dados de compatibilidade para o formato JSON. Esta tabela de compatibilidade ainda usa o formato antigo, pois ainda não convertemos os dados que ela contém. Descubra como você pode ajudar! (en-US)
Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Suporte a EventSource 6 N√£o suportado 6.0 (6.0) N√£o suportado (Yes) 5
Disponível em workers compartilhados e dedicados[1] (Yes) Não suportado 53.0 (53.0) Não suportado (Yes) (Yes)
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Suporte a EventSource 4.4 45 N√£o suportado 12 4.1
Disponível em workers compartilhados e dedicados[1] (Yes) 53.0 (53.0) Não suportado (Yes) (Yes)

[1] Mas ainda n√£o em service workers.

 

Veja também