From 2d0eac1821470e31fdccaaf04cf3fc928a4282e8 Mon Sep 17 00:00:00 2001
From: p208p2002 <p208p2002@gmail.com>
Date: Mon, 6 May 2024 14:17:15 +0800
Subject: [PATCH] post: SSE

---
 public/docs/server-sent-events/1.png       |  3 ++
 public/docs/server-sent-events/document.md | 60 ++++++++++++++++++++++
 2 files changed, 63 insertions(+)
 create mode 100644 public/docs/server-sent-events/1.png
 create mode 100644 public/docs/server-sent-events/document.md

diff --git a/public/docs/server-sent-events/1.png b/public/docs/server-sent-events/1.png
new file mode 100644
index 0000000..4783551
--- /dev/null
+++ b/public/docs/server-sent-events/1.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:8a650785353b1b6f27aa57dd1d3151075f952758b9a2ed8452060b3d0558fc5f
+size 54668
diff --git a/public/docs/server-sent-events/document.md b/public/docs/server-sent-events/document.md
new file mode 100644
index 0000000..6db6b42
--- /dev/null
+++ b/public/docs/server-sent-events/document.md
@@ -0,0 +1,60 @@
+# Streaming text with FastAPI and JavaScript
+
+<document-info>
+- tags: #SSE#text-streaming
+- date: YYYY/MM/dd
+</document-info>
+
+Streaming text is a popular feature in chatting with AI systems just as ChatGPT does.
+
+The technology behind is Server-Sent Events, which creates a long-lived connection and allow a single direction data transfer.
+
+![image](./1.png)
+> Picture from [X](https://twitter.com/Franc0Fernand0/status/1765357636038312196) 
+
+It's very simple to implement in Python and JavaScript. The minimal example below creates an SSE server using FastAPI, and a client for sending requests in JS.
+
+### Minimal SSE Example
+#### Server (FastAPI)
+```python
+from fastapi import FastAPI
+from fastapi.responses import StreamingResponse
+import asyncio
+
+app = FastAPI()
+
+async def text_streamer():
+    print("strat streaming")
+    test_message = "A test message for text streaming"
+    for token in test_message.split():
+        yield str(token)
+        await asyncio.sleep(0.1)
+
+@app.post("/text-completions")
+def text_completions():
+    return StreamingResponse(text_streamer())
+```
+
+#### Client (Vanilla JS)
+```javascript
+fetch("http://127.0.0.1:8000/text-completions",{
+    method:'POST'
+})
+    // Retrieve its body as ReadableStream
+    .then((response) => {
+        const reader = response.body.getReader();
+        reader.read().then(function pump({ done, value }) {
+            if (done) {
+              // Do something with last chunk of data then exit reader
+              return;
+            }
+            var text = new TextDecoder("utf-8").decode(value);
+
+            // Otherwise do something here to process current chunk
+            console.log(text)
+      
+            // Read some more, and call this function again
+            return reader.read().then(pump);
+          });
+    });
+```
\ No newline at end of file