Para que foram introduzidos os eventos server-sent no HTML5?

Para implementar um canal de comunicação unidirecional entre o servidor e o cliente. O servidor pode enviar dados ao cliente a qualquer momento após estabelecer a ligação.

Características e vantagens principais:

• Eficiência: Utiliza uma ligação HTTP normal, minimizando os custos em comparação com o sondagem.
• Simplicidade: A API de eventos enviados pelo servidor (SSE) é mais simples de usar do que WebSockets para comunicação unidirecional.
• Reconexão automática: O navegador tenta reconectar-se automaticamente se a ligação for interrompida.
• Suporte de tipos de dados: Envio de dados de texto no formato text/event-stream.
• Compatibilidade com navegadores: Amplamente suportado por navegadores modernos.

Aplicações:

• Atualização em tempo real de feeds de notícias.
• Notificações de eventos (por exemplo, novas mensagens).
• Monitorização de dados em tempo real (por exemplo, cotações de bolsa).
• Progresso de tarefas longas.

Isto é uma alternativa ao sondagem tradicional, onde o cliente solicita periodicamente ao servidor se há atualizações. Ao contrário do WebSockets, o SSE é unidirecional, o que simplifica a sua utilização quando os dados são transmitidos apenas do servidor para o cliente.

Exemplo do lado do cliente (JavaScript):

const eventSource = new EventSource('/events'); // URL para receber eventos do servidor

eventSource.onmessage = function(event) {
  // Processamento dos dados recebidos
  console.log('Mensagem recebida:', event.data);
};

eventSource.onerror = function(error) {
  // Tratamento de erros de ligação
  console.error('Erro em Server-Sent Events:', error);
};

eventSource.addEventListener('customEvent', function(event) {
  // Processamento de evento personalizado de tipo 'customEvent'
  console.log('Evento personalizado recebido:', event.data);
});

Exemplo do formato de dados do lado do servidor:

event: customEvent
data: {"message": "Olá!"}

data: Mensagem de texto simples

id: 123 // Identificador do evento, usado para reconexão automática

retry: 5000 // Atraso antes da próxima reconexão em milissegundos