HTML SSE

Last modified on: October 19, 2024

<div class="flex-shrink-0 flex flex-col relative items-end">
<div>
<div class="pt-0">
<div class="gizmo-bot-avatar flex h-8 w-8 items-center justify-center overflow-hidden rounded-full">
<div class="relative p-1 rounded-sm flex items-center justify-center bg-token-main-surface-primary text-token-text-primary h-8 w-8">&nbsp;</div>
</div>
</div>
</div>
</div>
<div class="group/conversation-turn relative flex w-full min-w-0 flex-col agent-turn">
<div class="flex-col gap-1 md:gap-3">
<div class="flex max-w-full flex-col flex-grow">
<div class="min-h-[20px] text-message flex w-full flex-col items-end gap-2 whitespace-normal break-words [.text-message+&amp;]:mt-5" dir="auto" data-message-author-role="assistant" data-message-id="5c80ffff-050d-4f0e-ae4a-3cbba3a1e03f">
<div class="flex w-full flex-col gap-1 empty:hidden first:pt-[3px]">
<div class="markdown prose w-full break-words dark:prose-invert light">
<h3>HTML Server-Sent Events (SSE)</h3>
<p>Server-Sent Events (SSE) allow servers to push updates to web clients in real-time over a single HTTP connection. Unlike WebSockets, which enable bidirectional communication, SSE is a simpler technology designed for unidirectional communication from the server to the client.</p>
<h3>Key Features</h3>
<ol>
<li><strong>Real-Time Updates</strong>: SSE provides a way to receive real-time updates from the server, useful for applications like live feeds, notifications, and real-time data displays.</li>
<li><strong>Simple API</strong>: The API is straightforward, making it easy to implement and use.</li>
<li><strong>Automatic Reconnection</strong>: SSE clients automatically attempt to reconnect if the connection is lost.</li>
</ol>
<h3>Basic Usage</h3>
<h4><strong>Server-Side (Example in Node.js)</strong></h4>
<p>To set up a server that supports SSE, you need to send the appropriate headers and format the response correctly. Here&rsquo;s an example using Node.js with the <code>express</code> framework.</p>
<div class="dark bg-gray-950 contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative">
<div class="flex items-center text-token-text-secondary bg-token-main-surface-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9">
<pre class="language-markup"><code>// server.js
const express = require('express');
const app = express();

app.get('/events', (req, res) =&gt; {
  res.setHeader('Content-Type', 'text/event-stream');
  res.setHeader('Cache-Control', 'no-cache');
  res.setHeader('Connection', 'keep-alive');

// Function to send a message
  function sendMessage(data) {
    res.write(`data: ${JSON.stringify(data)}\n\n`);
  }

// Send a message every second
  const intervalId = setInterval(() =&gt; {
    const message = { time: new Date().toISOString() };
    sendMessage(message);
  }, 1000);

// Clean up on client disconnect
  req.on('close', () =&gt; {
    clearInterval(intervalId);
    res.end();
  });
});

app.listen(3000, () =&gt; {
  console.log('Server running on http://localhost:3000');
});
</code></pre>
<strong>Client-Side</strong></div>
</div>
<p>On the client side, you use the <code>EventSource</code> API to listen for messages from the server.</p>
<div class="dark bg-gray-950 contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative">
<div class="flex items-center text-token-text-secondary bg-token-main-surface-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9">
<pre class="language-markup"><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
  &lt;title&gt;SSE Example&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;h1&gt;SSE Example&lt;/h1&gt;
  &lt;div id="messages"&gt;&lt;/div&gt;

&lt;script&gt;
    // Create a new EventSource object
    const eventSource = new EventSource('http://localhost:3000/events');

// Handle incoming messages
    eventSource.onmessage = function(event) {
      const data = JSON.parse(event.data);
      const messageDiv = document.getElementById('messages');
      messageDiv.innerHTML += `&lt;p&gt;${data.time}&lt;/p&gt;`;
    };

// Handle errors
    eventSource.onerror = function(event) {
      console.error('Error occurred:', event);
    };
  &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
</div>
</div>
<h3>Key Methods and Properties</h3>
<ul>
<li><strong><code>EventSource(url)</code></strong>: Creates a new <code>EventSource</code> object connected to the specified URL.</li>
<li><strong><code>eventSource.onmessage</code></strong>: Event handler for messages received from the server. The <code>event</code> object contains the message data in <code>event.data</code>.</li>
<li><strong><code>eventSource.onerror</code></strong>: Event handler for errors. Useful for debugging and handling connection issues.</li>
<li><strong><code>eventSource.close()</code></strong>: Closes the connection to the server. This should be called when you no longer need the event stream.</li>
</ul>
<h3>Advantages</h3>
<ul>
<li><strong>Simplicity</strong>: SSE is simpler to implement compared to WebSockets for one-way communication.</li>
<li><strong>Automatic Reconnection</strong>: The browser automatically handles reconnections if the connection drops.</li>
<li><strong>Text-Based</strong>: Data is sent in plain text format, making it easy to parse and use.</li>
</ul>
<h3>Limitations</h3>
<ul>
<li><strong>Unidirectional</strong>: SSE only supports server-to-client communication. For client-to-server communication, other methods (e.g., AJAX, WebSockets) are required.</li>
<li><strong>Browser Support</strong>: Most modern browsers support SSE, but it's not supported in Internet Explorer.</li>
<li><strong>HTTP/1.1 Only</strong>: SSE is typically used over HTTP/1.1. It is not natively supported over HTTP/2 or HTTP/3, though workarounds exist.</li>
</ul>
<h3>Conclusion</h3>
<p>Server-Sent Events (SSE) provide a simple and efficient way to push real-time updates from the server to the client. They are ideal for applications that need real-time data updates without the complexity of bidirectional communication. With a straightforward API and automatic reconnection, SSE is a useful tool for enhancing web applications with live data.</p>
</div>
</div>
</div>
</div>
</div>
</div>

Web Technology View More