SoFunction
Updated on 2025-04-14

Three ways to implement front-end streaming output

Preface

In front-end development, streaming output usually refers to the gradual output of data, rather than waiting for all data to be ready to be displayed at once. This technique is useful in handling large data sets, real-time data, or when content needs to be loaded step by step. The following describes several ways to implement streaming output, including using the Fetch API and EventSource.

1. Use the Fetch API to implement streaming output

Through the Fetch API and Readable Streams, data can be read and processed step by step as the response arrives. This works very well when dealing with large files or real-time updates.

Sample code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Stream Output Example</title>
</head>
<body>
    <h1>Streamed Output</h1>
    <div ></div>

    <script>
        async function streamData() {
            const response = await fetch('/posts');
            const reader = ();
            const outputDiv = ('output');
            let result;

            // Read data stream            while (!(result = await ()).done) {
                const chunk = new TextDecoder().decode();
                // Add the newly received part to the output                 += chunk + '<br>';
            }
        }

        streamData();
    </script>
</body>
</html>

2. Use Server-Sent Events (SSE)

Server-Sent Events (SSE) is a technology that pushes real-time data from a server to a client. It is based on the HTTP protocol and uses the EventSource API.

Sample code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SSE Example</title>
</head>
<body>
    <h1>Server-Sent Events Example</h1>
    <div ></div>

    <script>
        const outputDiv = ('output');
        const eventSource = new EventSource('/sse'); // Replace with your SSE service URL
         = function(event) {
             += 'Received: ' +  + '<br>';
        };

         = function(event) {
            ('Error occurred:', event);
            (); // Close the connection        };
    </script>
</body>
</html>

3. Use WebSockets

WebSockets provides full duplex communication, allowing real-time data transfer between clients and servers. This is suitable for scenarios where two-way communication is required.

Sample code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebSocket Example</title>
</head>
<body>
    <h1>WebSocket Example</h1>
    <div ></div>

    <script>
        const outputDiv = ('output');
        const socket = new WebSocket('wss:///socket'); // Replace with your WebSocket service URL
         = function() {
            ('WebSocket connection established');
        };

         = function(event) {
             += 'Received: ' +  + '<br>';
        };

         = function(error) {
            ('WebSocket error:', error);
        };

         = function() {
            ('WebSocket connection closed');
        };
    </script>
</body>
</html>

Summarize

  • Fetch API: Suitable for step-by-step acquisition and processing of data streams in HTTP responses.
  • Server-Sent Events: Used to push real-time events from the server, simple and easy to use.
  • WebSockets: Provides two-way communication, suitable for applications that require real-time interaction.

This is the end of this article about the three implementation methods of front-end streaming output. For more related front-end streaming output implementation content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!