Add streaming chat TS example (#144)

* Add streaming chat TS example

* Update README.md

Co-authored-by: Fredrik Enestad <[email protected]>

---------

Co-authored-by: Fredrik Enestad <[email protected]>

Author: simon-johansson

README.md

@@ -53,6 +53,7 @@ environment. Use the appropriate command for your system:
 |------------------------------------------------------------------|--------------------------------------------------------------------------------------------------------------------------|------------------------------------------------------------------------|
 | [ts/hello-world](ts/hello-world)                                 | REST API Starter                                                                                                         | APIs                                                                   |
 | [ts/ai-chat](ts/ai-chat)                                         | LLM chat application which let's you create and chat with personalized bots. Integrates with OpenAI, Anthropic and Slack | Microservices, APIs, SQL Database, Pub/Sub, External Requests, Configs |
+| [ts/streaming-chat](ts/streaming-chat)                                  | Simple Chat app using the Streaming API to create a WebSocket stream                                                     | Streaming API, Static Endpoint, Frontend                               |
 | [ts/simple-event-driven](ts/simple-event-driven)                 | Simple Event-Driven Application                                                                                          | Microservices, SQL Database, Pub/Sub, Secrets                          |
 | [ts/uptime](ts/uptime)                                           | Event-Driven Architecture Starter (Uptime Monitor)                                                                       | Microservices, SQL Databases, Pub/Sub, Cron Jobs                       |
 | [ts/gpt-functions](ts/gpt-functions)                             | ChatGPT Functions with Encore Example                                                                                    | APIs                                                                   |

ts/streaming-chat/.gitignore

@@ -0,0 +1,6 @@
+.encore
+encore.gen.go
+encore.gen.cue
+/.encore
+node_modules
+/encore.gen

ts/streaming-chat/README.md

@@ -0,0 +1,50 @@
+# Encore.ts Streaming Chat Example
+
+This is an example of how to use the Streaming API in Encore.ts to create a WebSocket stream from a web frontend to a Encore.ts backend.
+
+Learn more in our [Streaming API docs](https://encore.dev/docs/ts/primitives/streaming-apis)
+
+![Chat app screenshot](./chat-room.png)
+
+## Developing locally
+### Prerequisite: Installing Encore
+
+If this is the first time you're using Encore, you first need to install the CLI that runs the local development
+environment. Use the appropriate command for your system:
+
+- **macOS:** `brew install encoredev/tap/encore`
+- **Linux:** `curl -L https://encore.dev/install.sh | bash`
+- **Windows:** `iwr https://encore.dev/install.ps1 | iex`
+
+When you have installed Encore, run to clone this example:
+
+```bash
+encore app create --example=ts/streaming-chat
+```
+
+## Running locally
+```bash
+encore run
+```
+
+While `encore run` is running, open <http://localhost:4000/> to view the chat frontend.
+
+You can also access Encore's [local developer dashboard](https://encore.dev/docs/observability/dev-dash) on <http://localhost:9400/> to view traces, API documentation, and more.
+
+In you change the frontend then run `npm run build` to build a new frontend in the `dist` folder.
+
+## Deployment
+
+Deploy your application to a staging environment in Encore's free development cloud:
+
+```bash
+git add -A .
+git commit -m 'Commit message'
+git push encore
+```
+
+Then head over to the [Cloud Dashboard](https://app.encore.dev) to monitor your deployment and find your production URL.
+
+From there you can also connect your own AWS or GCP account to use for deployment.
+
+Now off you go into the clouds!

ts/streaming-chat/chat-room.png

@@ -0,0 +1,58 @@
+import { api, StreamInOut } from "encore.dev/api";
+import log from "encore.dev/log";
+
+// Map to hold all connected streams
+const connectedStreams: Map<
+  string,
+  StreamInOut<PostMessage, ChatMessage>
+> = new Map();
+
+// Object sent from the client to the server when establishing a connection
+interface HandshakeRequest {
+  id: string;
+}
+
+// Object sent from the client to the server when posting a message
+interface PostMessage {
+  username: string;
+  msg: string;
+}
+
+// Object sent from the server to the client when receiving a message
+interface ChatMessage {
+  userID: string;
+  username: string;
+  msg: string;
+}
+
+export const chat = api.streamInOut<HandshakeRequest, PostMessage, ChatMessage>(
+  { expose: true, auth: false, path: "/chat" },
+  async (handshake, stream) => {
+    connectedStreams.set(handshake.id, stream);
+    log.info("user connected", handshake);
+
+    try {
+      // The stream object is an AsyncIterator that yields incoming messages.
+      // The loop will continue as long as the client keeps the connection open.
+      for await (const chatMessage of stream) {
+        for (const [key, val] of connectedStreams) {
+          try {
+            // Send the users message to all connected clients.
+            await val.send({ ...chatMessage, userID: handshake.id });
+          } catch (err) {
+            // If there is an error sending the message, remove the client from the map.
+            connectedStreams.delete(key);
+            log.error("error sending", err);
+          }
+        }
+      }
+    } catch (err) {
+      // If there is an error reading from the stream, remove the client from the map.
+      connectedStreams.delete(handshake.id);
+      log.error("stream error", err);
+    }
+
+    // When the client disconnects, remove them from the map.
+    connectedStreams.delete(handshake.id);
+  },
+);

ts/streaming-chat/chat/chat.ts

@@ -0,0 +1,4 @@
+{
+	"id":   "",
+	"lang": "typescript"
+}

ts/streaming-chat/encore.app

@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <script src="https://cdn.tailwindcss.com"></script>
+    <title>Encore.ts streaming chat example</title>
+    <script type="module" crossorigin src="/assets/index-37bfce13.js"></script>
+    <link rel="stylesheet" href="/assets/index-e22bcfaf.css">
+  </head>
+  <body>
+    <div id="root"></div>
+    
+  </body>
+</html>