HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>SSE — basic onmessage</title>
</head>
<body>
  <h1>Server-Sent Events — basic</h1>
  <p>Each second a new line appears — like data from a server stream.</p>
  <button type="button" id="startBtn">Start stream</button>
  <button type="button" id="stopBtn">Stop</button>
  <pre id="log">(waiting)</pre>

  <script>
    var timer = null;
    var logEl = document.getElementById('log');
    var count = 0;

    // Handler — same function you use with real EventSource
    function onStreamMessage(event) {
      logEl.textContent += 'Message ' + count + ': ' + event.data + '\n';
    }

    document.getElementById('startBtn').onclick = function () {
      if (timer) return;
      logEl.textContent = '';
      count = 0;
      timer = setInterval(function () {
        count++;
        onStreamMessage({ data: new Date().toLocaleTimeString() });
      }, 1000);
    };

    document.getElementById('stopBtn').onclick = function () {
      clearInterval(timer);
      timer = null;
      logEl.textContent += '\nStopped.\n';
    };

    // Real server code (when you run Node/Express on port 8080):
    // var es = new EventSource('http://localhost:8080');
    // es.onmessage = onStreamMessage;
  </script>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

SSE — Receive Messages with EventSource