The SSE(server sent event) example

calendar Dec 10, 2024 ·  · SSE HTML STREAM  ·
: linkedin copy

SSE establishes a one-way communication channel from server to client over HTTP. Unlike WebSockets’ bidirectional connection, SSE maintains an open HTTP connection for server-to-client updates. Think of it as a radio broadcast: the server (station) transmits, and clients (receivers) listen. The LLM completion API is most use SSE event to interactive with human in chat web ui

The directory level look like following this

 1├── bin
 2│   ├── Activate.ps1
 3│   ├── activate
 4│   ├── activate.csh
 5│   ├── activate.fish
 6│   ├── flask
 7│   ├── pip
 8│   ├── pip3
 9│   ├── pip3.12
10│   ├── python -> python3
11│   ├── python3 -> /opt/homebrew/Caskroom/miniconda/base/bin/python3
12│   └── python3.12 -> python3
13├── include
14│   └── python3.12
15├── lib
16│   └── python3.12
17│       └── site-packages
18├── pyvenv.cfg
19├── server.py
20├── static
21│   └── js
22│       └── client.js
23└── templates
24    └── index.html

The Server endpoint code

 1#!/usr/bin/env python
 2
 3from flask import Flask, Response, Request, render_template, stream_with_context
 4import logging
 5import time
 6import random
 7
 8
 9app = Flask(__name__)
10logging.basicConfig(level=logging.DEBUG)
11
12@app.route('/')
13def home():
14    return render_template('index.html')
15
16def generate_random_data():
17    while True:
18        data = f"data: Random value:{random.randint(1,100)}\n\n"
19        app.logger.info(data)
20        yield data
21        time.sleep(1)
22
23@app.route('/stream')
24def stream():
25    return Response(
26        stream_with_context(generate_random_data()),
27        mimetype='text/event-stream'
28    )
29
30if __name__ == '__main__':
31    app.run(debug=True)

The client html code

 1<!DOCTYPE html>
 2<html>
 3<head>
 4    <title>Testing the SSE</title>
 5    <script src="{{ url_for('static', filename='js/client.js') }}"></script>
 6    <style type="text/css">
 7        #data {
 8            margin: 10px;
 9            width: 300px;
10            height: 500px;
11            overflow: scroll;
12            border: 1px solid #880022;
13        }
14    </style>
15</head>
16
17<body>
18    <button onclick="closeConnection()">Close the SSE</button>
19    <button onclick="startConnection()">Start the SSE</button>
20    <button onclick="cleanTheData()">Clean the data</button>
21    <div id="data"></div>
22   
23</body>
24
25</html>

The interactive client.js contents

 1let eventSource = null;
 2
 3// Clean up when done
 4function closeConnection(event) {
 5    console.log("The close button is clicked", event)
 6    eventSource.close();
 7}
 8
 9function startConnection(evt) {
10    eventSource = new EventSource("/stream");
11    eventSource.onmessage = function(event) {
12        const dataDiv = document.getElementById("data");
13        dataDiv.innerHTML += `<p>${event.data}</p>`;
14        dataDiv.scrollTop = dataDiv.scrollHeight;
15    };
16    
17    eventSource.onerror = function(error) {
18        if (eventSource.readyState === EventSource.CLOSED) {
19            console.log("Connection was closed");
20        }
21        console.error("SSE error:", error)
22    }
23
24    let retryAttempts = 0;
25    const maxRetries = 5;
26
27    eventSource.onclose = function() {
28        if (retryAttempts < maxRetries) {
29            setTimeout(() => {
30                // Reconnect logic
31                retryAttempts++;
32            }, 1000 * retryAttempts);
33        }
34    };
35}
36
37function cleanTheData() {
38    document.getElementById("data").innerHTML = "";
39}