HTTP/1.1 200 OK
Content-Type: text/event-stream; charset=utf-8
Cache-Control: no-cache
Connection: keep-alive
 
data: {"ativo": "BTC/USD", "preco": 68450.00}
 
event: alerta
data: Volatilidade alta detectada no mercado!
id: 1042
retry: 5000

// 1. Abre a conexão com o endpoint de streaming do servidor
const streamNoticias = new EventSource('/api/cotacoes-tempo-real');
 
// 2. Conexão aberta com sucesso
streamNoticias.onopen = function() {
    console.log('✅ Conexão SSE estabelecida com sucesso.');
};
 
// 3. Recebimento de mensagens genéricas (campos 'data:')
streamNoticias.onmessage = function(event) {
    const dados = JSON.parse(event.data);
    console.log('Nova cotação recebida:', dados);
};
 
// 4. Escuta de eventos tipados específicos (campo 'event: alerta')
streamNoticias.addEventListener('alerta', function(event) {
    console.warn('⚠️ Alerta prioritário do sistema:', event.data);
});
 
// 5. Tratamento de falhas e reconexão automática
streamNoticias.onerror = function(erro) {
    console.log('Conexão perdida. O navegador tentará reconectar sozinho...');
};
 
// 6. Fechamento manual da conexão quando o usuário sair da tela
// streamNoticias.close();

<div class="wzw-sse-card">
    <div class="sse-header">
        <h3>📈 Painel de Cotações em Tempo Real (SSE)</h3>
        <span id="statusBadge" class="badge-conectando">Conectando...</span>
    </div>
 
    <div class="price-display">
        <span class="currency-label">Bitcoin (BTC/BRL):</span>
        <span id="valorPreco" class="price-value">R$ 0,00</span>
    </div>
 
    <div class="log-container">
        <h4>Histórico de Atualizações Push:</h4>
        <ul id="listaHistorico" class="sse-logs"></ul>
    </div>
 
    <button id="btnDesconectar" class="btn-sse">Interromper Transmissão</button>
</div>

.wzw-sse-card {
    padding: 24px;
    background-color: #0f172a;
    border: 1px solid #1e293b;
    border-radius: 8px;
    color: #f8fafc;
    max-width: 520px;
}
 
.sse-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}
 
.price-display {
    padding: 16px;
    background-color: #1e293b;
    border-radius: 6px;
    margin-bottom: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
 
.price-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: #10b981;
}
 
.badge-conectando { background: #f59e0b; color: #000; padding: 4px 8px; border-radius: 4px; font-size: 0.75rem; font-weight: bold; }
.badge-online { background: #10b981; color: #fff; padding: 4px 8px; border-radius: 4px; font-size: 0.75rem; font-weight: bold; }
.badge-offline { background: #ef4444; color: #fff; padding: 4px 8px; border-radius: 4px; font-size: 0.75rem; font-weight: bold; }
 
.sse-logs {
    list-style: none;
    padding: 0;
    max-height: 140px;
    overflow-y: auto;
    font-size: 0.85rem;
    color: #94a3b8;
}
 
.sse-logs li {
    padding: 6px 0;
    border-bottom: 1px solid #1e293b;
}
 
.btn-sse {
    margin-top: 16px;
    padding: 10px 16px;
    background-color: #ef4444;
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
}

// Script de Demonstração (Simulador de Servidor Local para Testes)
const statusBadge = document.getElementById('statusBadge');
const valorPreco = document.getElementById('valorPreco');
const listaHistorico = document.getElementById('listaHistorico');
const btnDesconectar = document.getElementById('btnDesconectar');
 
// Em um ambiente de produção real, aponte para sua URL de API (ex: '/api/stream-cotacoes')
// const stream = new EventSource('/api/stream-cotacoes');
 
// Para demonstração imediata no navegador, simulamos o comportamento de recebimento:
statusBadge.className = 'badge-online';
statusBadge.textContent = '● Transmitindo ao Vivo';
 
function adicionarLog(texto) {
    const li = document.createElement('li');
    li.textContent = `[${new Date().toLocaleTimeString()}] ${texto}`;
    listaHistorico.prepend(li);
}
 
// Simulação de eventos empurrados pelo servidor a cada 3 segundos
let precoSimulado = 380250.00;
const simuladorInterval = setInterval(() => {
    const variacao = (Math.random() - 0.48) * 1200;
    precoSimulado += variacao;
 
    valorPreco.textContent = precoSimulado.toLocaleString('pt-BR', { style: 'currency', currency: 'BRL' });
    adicionarLog(`Cotação atualizada: ${precoSimulado.toFixed(2)} BRL`);
}, 3000);
 
btnDesconectar.addEventListener('click', () => {
    clearInterval(simuladorInterval);
    // stream.close();
    statusBadge.className = 'badge-offline';
    statusBadge.textContent = 'Desconectado';
    adicionarLog('Conexão encerrada pelo usuário.');
    btnDesconectar.disabled = true;
});