add js to sse example (#281)

2025-01-23 00:42:51 +01:00
parent d864b81b65
commit d487a73c1e
2 changed files with 47 additions and 5 deletions
--- a/examples/sse/counter.py
+++ b/examples/sse/counter.py
@@ -1,16 +1,28 @@
 import asyncio
-from microdot import Microdot
+from microdot import Microdot, send_file
 from microdot.sse import with_sse

 app = Microdot()


+@app.route("/")
+async def main(request):
+    return send_file('index.html')
+
+
@app.route('/events')
@with_sse
 async def events(request, sse):
-    for i in range(10):
-        await asyncio.sleep(1)
-        await sse.send({'counter': i})
+    print('Client connected')
+    try:
+        i = 0
+        while True:
+            await asyncio.sleep(1)
+            i += 1
+            await sse.send({'counter': i})
+    except asyncio.CancelledError:
+        pass
+    print('Client disconnected')


-app.run(debug=True)
+app.run()
--- a/examples/sse/index.html
+++ b/examples/sse/index.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Microdot SSE Example</title>
+    <meta charset="UTF-8">
+  </head>
+  <body>
+    <h1>Microdot SSE Example</h1>
+    <div id="log"></div>
+    <script>
+      const log = (text, color) => {
+        document.getElementById('log').innerHTML += `<span style="color: ${color}">${text}</span><br>`;
+      };
+
+      const eventSource = new EventSource('/events');
+
+      eventSource.onopen = () => {
+        log('Connection to server opened.', 'black');
+      };
+
+      eventSource.onmessage = (event) => {
+        log(`Received message: ${event.data}`, 'blue');
+      };
+
+      eventSource.onerror = (event) => {
+        log(`EventSource failed: ${event.type}`, 'red');
+      };
+    </script>
+  </body>
+</html>