HTML - Eventos Enviados pelo Servidor

Como funcionam os Server Sent Events

Server Sent Events (SSE) é uma tecnologia que permite a um servidor enviar dados para um navegador cliente em tempo real. A arquitetura do SSE é baseada em um modelo de comunicação unidirecional, onde o servidor envia dados para o cliente, mas o cliente não envia dados de volta para o servidor.

No SSE, o cliente se conecta ao servidor usando a API EventSource. O servidor mantém essa conexão aberta e envia eventos para o cliente sempre que novos dados estão disponíveis. O cliente recebe esses eventos e os processa conforme chegam, atualizando a página web ou acionando outras ações conforme necessário.

A comunicação entre o cliente e o servidor no SSE é feita por meio de uma conexão HTTP padrão. O servidor envia eventos como um fluxo de dados de texto, com cada evento separado por uma linha em branco. O cliente usa a API EventSource para ouvir esses eventos e tratá-los adequadamente.

const eventSource = new EventSource('http://example.com/sse');

eventSource.onmessage = function(event) {
    console.log(event.data);
};

Uma diferença fundamental entre SSE e WebSockets é o modelo de comunicação. Enquanto o SSE é unidirecional, com o servidor enviando dados para o cliente, os WebSockets permitem comunicação bidirecional, onde tanto o cliente quanto o servidor podem enviar dados um para o outro.

const socket = new WebSocket('ws://example.com/ws');

socket.onopen = function(event) {
    socket.send('Hello Server!');
};

socket.onmessage = function(event) {
    console.log(event.data);
};

Outra diferença é o formato da mensagem. No SSE, as mensagens são enviadas como texto simples, com cada mensagem consistindo em uma ou mais linhas de dados de texto. Por outro lado, os WebSockets usam um formato de mensagem binário, que pode ser mais eficiente para enviar grandes quantidades de dados.

Apesar dessas diferenças, tanto SSE quanto WebSockets têm seu lugar no desenvolvimento web moderno. O SSE é adequado para cenários onde o servidor precisa enviar atualizações para o cliente em tempo real, como feeds de notícias ou cotações de ações. Já os WebSockets são ideais para aplicações que exigem comunicação bidirecional, como aplicativos de chat ou jogos multiplayer.

Configurando Eventos Enviados pelo Servidor

Configurar Eventos Enviados pelo Servidor envolve ajustar o servidor e o cliente. No lado do servidor, você precisa preparar um script que envia eventos para o cliente. No lado do cliente, você precisa criar um objeto EventSource para receber e lidar com esses eventos.

const express = require('express');
const app = express();

app.get('/sse', (req, res) => {
    res.writeHead(200, {
        'Content-Type': 'text/event-stream',
        'Cache-Control': 'no-cache',
        'Connection': 'keep-alive'
    });

    setInterval(() => {
        const eventData = `data: Horário do servidor é ${new Date()}\n\n`;
        res.write(eventData);
    }, 1000);
});

app.listen(3000, () => {
    console.log('Servidor iniciado na porta 3000');
});

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

$time = date('r');
echo "data: O horário do servidor é: {$time}\n\n";
flush();
?>

const eventSource = new EventSource('/sse');

eventSource.onmessage = (event) => {
    console.log(event.data);
};

eventSource.onerror = (error) => {
    console.error('Erro no EventSource:', error);
};

eventSource.addEventListener('timestamp', (event) => {
    console.log('Evento de timestamp:', event.data);
});

Enviando e Recebendo Eventos

app.get('/sse', (req, res) => {
    res.writeHead(200, {
        'Content-Type': 'text/event-stream',
        'Cache-Control': 'no-cache',
        'Connection': 'keep-alive'
    });

    const sendEvent = (eventType, data) => {
        const eventData = `event: ${eventType}\ndata: ${JSON.stringify(data)}\n\n`;
        res.write(eventData);
    };

    // Envia um evento "timestamp" a cada segundo
    setInterval(() => {
        const timestamp = new Date().toLocaleTimeString();
        sendEvent('timestamp', { time: timestamp });
    }, 1000);

    // Envia um evento "message" quando uma condição é atendida
    if (someCondition) {
        sendEvent('message', { text: 'Olá do servidor!' });
    }
});

const eventSource = new EventSource('/sse');

eventSource.onmessage = (event) => {
    const data = JSON.parse(event.data);
    console.log('Mensagem recebida:', data.text);
};

eventSource.addEventListener('timestamp', (event) => {
    const data = JSON.parse(event.data);
    console.log('Timestamp recebido:', data.time);
});

eventSource.addEventListener('userConnected', (event) => {
    const data = JSON.parse(event.data);
    console.log(`Usuário ${data.userId} conectado`);
});

eventSource.addEventListener('userDisconnected', (event) => {
    const data = JSON.parse(event.data);
    console.log(`Usuário ${data.userId} desconectado`);
});

Tratamento de Erros e Reconexão

Ao usar Eventos Enviados pelo Servidor (SSE), você deve lidar com erros e reconectar ao servidor se a conexão for perdida. Isso ajuda a criar uma aplicação mais confiável e resiliente.

O tratamento de erros no lado do cliente envolve a escuta do evento onerror no objeto EventSource. Esse evento é acionado quando ocorre um erro, como um problema de rede ou uma falha no script do lado do servidor.

const eventSource = new EventSource('/sse');

eventSource.onerror = (error) => {
    console.error('Erro no EventSource:', error);
    // Realize o tratamento de erros, como atualizar a interface do usuário ou registrar o erro
};

Reconectar ao servidor após uma perda de conexão é outro aspecto importante do tratamento de erros. Por padrão, o objeto EventSource tentará reconectar ao servidor se a conexão for fechada. No entanto, você pode controlar o comportamento de reconexão usando as propriedades withCredentials e reconnectionTime.

const eventSource = new EventSource('/sse', {
    withCredentials: true,
    reconnectionTime: 5000
});

A propriedade withCredentials, quando definida como true, envia cookies e cabeçalhos de autenticação com a solicitação do EventSource, o que pode ser útil para manter uma sessão durante as reconexões.

A propriedade reconnectionTime define o tempo (em milissegundos) de espera antes de tentar reconectar ao servidor. Por padrão, o objeto EventSource usará uma estratégia de recuo exponencial, onde o tempo de reconexão aumenta a cada tentativa falha.

Suporte do Navegador e Alternativas

Os Server Sent Events (SSE) são suportados pela maioria dos navegadores modernos, incluindo Chrome, Firefox, Safari e Edge. No entanto, alguns navegadores mais antigos podem não ter suporte nativo aos SSE, o que significa que você precisa fornecer opções alternativas para manter a compatibilidade.

Em 2023, o suporte global dos navegadores para SSE é de cerca de 95%, de acordo com o Can I Use. Isso significa que a maioria dos usuários poderá usar SSE sem problemas. No entanto, ainda é importante considerar opções alternativas para os 5% restantes dos usuários que podem estar usando navegadores mais antigos ou menos comuns.

Uma opção alternativa para navegadores que não suportam SSE é usar long-polling. Long-polling é uma técnica onde o cliente envia uma solicitação ao servidor e aguarda uma resposta. Se o servidor não tiver novos dados, ele mantém a solicitação aberta até que novos dados estejam disponíveis, então envia a resposta de volta ao cliente. O cliente então imediatamente envia outra solicitação, repetindo o processo. Embora não seja tão eficiente quanto SSE, o long-polling pode fornecer um nível similar de funcionalidade em tempo real.

Outra opção alternativa é usar WebSockets. WebSockets fornecem um canal de comunicação full-duplex entre o cliente e o servidor, permitindo a transferência de dados em tempo real em ambas as direções. Se um navegador não suporta SSE, você pode verificar se ele suporta WebSockets e usar isso como alternativa.

Se você preferir uma abordagem mais integrada, pode usar polyfills ou bibliotecas que fornecem suporte a SSE para navegadores mais antigos. Um polyfill é um trecho de código que replica a funcionalidade de uma API de navegador mais nova em um navegador mais antigo. Por exemplo, o polyfill EventSource do Yaffle pode ser usado para adicionar suporte a SSE em navegadores mais antigos que não têm suporte nativo.

Existem também bibliotecas como Pusher e Socket.IO que fornecem funcionalidade em tempo real usando várias técnicas, incluindo SSE, WebSockets e long-polling. Essas bibliotecas podem abstrair as diferenças entre os navegadores e fornecer uma API consistente para comunicação em tempo real.

<!-- Incluir o polyfill EventSource -->
<script src="https://cdn.jsdelivr.net/npm/event-source-polyfill@1.0.9/src/eventsource.min.js"></script>

<script>
if (!window.EventSource) {
    // Se o navegador não suporta EventSource, use o polyfill
    window.EventSource = window.EventSourcePolyfill;
}

const eventSource = new EventSource('/sse');

eventSource.onmessage = (event) => {
    console.log(event.data);
};
</script>

Ao incluir o polyfill EventSource e verificar se o navegador suporta EventSource nativamente, você pode garantir que a funcionalidade SSE esteja disponível para todos os usuários, independentemente do navegador que estejam usando.

Em resumo, embora o SSE seja suportado pela maioria dos navegadores modernos, é importante considerar opções alternativas e polyfills para navegadores mais antigos. Ao usar técnicas como long-polling, WebSockets ou bibliotecas que abstraem as diferenças entre navegadores, você pode fornecer uma experiência em tempo real consistente para todos os seus usuários.

Vantagens e Desvantagens do SSE

O Server Sent Events (SSE) tem várias vantagens e desvantagens em comparação com outras tecnologias de comunicação em tempo real, como WebSockets e long-polling.

<p>This    is   a   paragraph   with    extra   spaces.</p>

This is a paragraph with extra spaces.

<p>This is a paragraph.</div>

<p>This is a paragraph.</p>

Casos de uso e exemplos de SSE

Server-Sent Events (SSE) são adequados para muitos cenários de aplicações web em tempo real. Vamos ver alguns casos de uso comuns e exemplos onde o SSE pode ser usado para fornecer uma melhor experiência ao usuário.

Um caso de uso comum para SSE é para atualizações de dados em tempo real. Uma aplicação de cotações de ações poderia usar SSE para enviar atualizações de preços de ações em tempo real para o cliente. Sempre que o preço de uma ação muda no servidor, ele pode enviar um evento para o cliente com o preço atualizado. O cliente pode então atualizar a interface do usuário para mostrar o novo preço sem que o usuário precise atualizar a página.

const express = require('express');
const app = express();

// Dados mockados de ações
let stockData = {
    'AAPL': 150.23,
    'GOOGL': 2321.01,
    'MSFT': 300.45
};

// Envia atualizações de ações a cada 5 segundos
setInterval(() => {
    // Atualiza os preços das ações aleatoriamente
    for (const symbol in stockData) {
        stockData[symbol] += Math.random() * 10 - 5;
    }

    // Envia os dados atualizados das ações para os clientes
    sendEvent('stockUpdate', stockData);
}, 5000);

// ...

const eventSource = new EventSource('/sse');

eventSource.addEventListener('stockUpdate', (event) => {
    const stockData = JSON.parse(event.data);

    for (const symbol in stockData) {
        const price = stockData[symbol].toFixed(2);
        document.getElementById(symbol).textContent = price;
    }
});

Outro caso de uso para SSE é o envio de notificações e alertas para o cliente. Uma aplicação de mídia social poderia usar SSE para notificar os usuários quando eles recebem uma nova mensagem ou quando alguém os menciona em uma postagem. O servidor pode enviar um evento para o cliente sempre que uma nova notificação estiver disponível, e o cliente pode exibir a notificação para o usuário.

SSE também pode ser usado para aplicações de chat ao vivo. Quando um usuário envia uma mensagem, o servidor pode transmitir essa mensagem para todos os clientes conectados usando SSE. Cada cliente ouviria novos eventos de mensagem e atualizaria a interface do usuário do chat de acordo. No entanto, lembre-se de que SSE é unidirecional, então você precisaria usar outro método (como uma requisição HTTP POST regular) para enviar mensagens do cliente para o servidor.

SSE pode ser usado para análises e métricas em tempo real. Uma aplicação de monitoramento de servidor poderia usar SSE para enviar métricas do servidor em tempo real para o cliente. O cliente poderia exibir essas métricas em um painel, dando aos administradores uma visão em tempo real do desempenho do servidor.

// Envia métricas do servidor a cada segundo
setInterval(() => {
    const serverMetrics = {
        cpu: os.loadavg()[0],
        memory: os.freemem() / os.totalmem()
    };

    sendEvent('serverMetrics', serverMetrics);
}, 1000);

eventSource.addEventListener('serverMetrics', (event) => {
    const metrics = JSON.parse(event.data);

    document.getElementById('cpuUsage').textContent = `${metrics.cpu.toFixed(2)}%`;
    document.getElementById('memoryUsage').textContent = `${(metrics.memory * 100).toFixed(2)}%`;
});

Estes são alguns exemplos de como SSE pode ser usado em aplicações web em tempo real. A natureza unidirecional do SSE o torna adequado para cenários onde o servidor precisa enviar atualizações para o cliente, mas o cliente não precisa enviar dados de volta para o servidor.