HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>SSE — custom events</title>
</head>
<body>
  <h1>Custom SSE event types</h1>
  <p>Server can send <b>event: name</b> lines. Client listens with addEventListener.</p>
  <button type="button" id="btn">Send sample events</button>
  <pre id="log">(waiting)</pre>

  <script>
    var logEl = document.getElementById('log');

    function logLine(text) {
      logEl.textContent += text + '\n';
    }

    // Same pattern as: eventSource.addEventListener('news', handler)
    function onNews(event) {
      logLine('[news] ' + event.data);
    }

    function onAlert(event) {
      logLine('[alert] ' + event.data);
    }

    document.getElementById('btn').onclick = function () {
      logEl.textContent = '';
      // Simulated server messages:
      onNews({ data: 'Headline: SSE tutorial published' });
      onAlert({ data: 'High traffic on live feed' });
      onNews({ data: 'Update: 3 new examples added' });

      // Real client code:
      // var es = new EventSource('/api/stream');
      // es.addEventListener('news', onNews);
      // es.addEventListener('alert', onAlert);
    };
  </script>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

SSE — Custom Event Types