https://randx.tokyo/tags/technolozhu/ Recent content in TechnoloZhu on RANDX Hugo en-US Sun, 24 May 2026 12:00:00 +0900 https://randx.tokyo/posts/sse-server-sent-events/ Sun, 24 May 2026 12:00:00 +0900 https://randx.tokyo/posts/sse-server-sent-events/ <p><strong>SSE</strong> stands for <strong>Server-Sent Events</strong>. It is a web standard technology that enables a server to push real-time updates to clients over a single, long-lived HTTP connection.</p> <h2 id="key-features"> Key Features <a class="heading-link" href="#key-features"> <i class="fa-solid fa-link" aria-hidden="true" title="Link to heading"></i> <span class="sr-only">Link to heading</span> </a> </h2> <ul> <li><strong>Server Push</strong>: The server can send messages at any time without the client needing to request them.</li> <li><strong>Automatic Reconnection</strong>: If the connection drops, the browser automatically reconnects and can resume from the last received event using <code>last-event-id</code>.</li> <li><strong>Simple Implementation</strong>: Requires minimal code on both client and server sides.</li> <li><strong>Built on HTTP</strong>: Works well with proxies, firewalls, and existing web infrastructure.</li> <li><strong>Event Support</strong>: You can send named events, data, IDs, and retry instructions.</li> <li><strong>Lightweight</strong>: Lower overhead compared to WebSocket for one-way streaming.</li> </ul> <h2 id="use-cases"> Use Cases <a class="heading-link" href="#use-cases"> <i class="fa-solid fa-link" aria-hidden="true" title="Link to heading"></i> <span class="sr-only">Link to heading</span> </a> </h2> <ul> <li>Real-time notifications and alerts</li> <li>Live dashboards and monitoring systems</li> <li>Stock prices, cryptocurrency tickers, or sports scores</li> <li>Progress tracking for long-running tasks (file uploads, exports, AI processing)</li> <li>News feeds and social media updates</li> <li>Live chat applications (for the server-to-client message stream)</li> </ul> <h2 id="limitations"> Limitations <a class="heading-link" href="#limitations"> <i class="fa-solid fa-link" aria-hidden="true" title="Link to heading"></i> <span class="sr-only">Link to heading</span> </a> </h2> <ol> <li><strong>Unidirectional Only</strong>: Data flows only from server to client. For client-to-server communication, you still need Fetch, AJAX, or WebSocket.</li> <li><strong>Text-Only</strong>: Does not support binary data natively (images, videos, etc.). You must convert them using Base64, which increases payload size.</li> <li><strong>Browser Connection Limits</strong>: Most browsers limit concurrent SSE connections per domain (typically 6). Too many open streams can cause issues.</li> <li><strong>Not Ideal for High-Frequency Bidirectional Apps</strong>: For real-time multiplayer games or complex chat systems, WebSocket is usually better.</li> <li><strong>Server Timeouts</strong>: Some servers and proxies have default connection timeouts. You may need to configure keep-alive settings.</li> <li><strong>CORS Considerations</strong>: Cross-origin requests require proper server headers.</li> </ol>