Add streaming example (#145)

* Add streaming example

* Update ts/streaming/frontend/src/components/StreamOutExample.tsx

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

* Add new build

---------

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

Author: simon-johansson

README.md

@@ -53,7 +53,8 @@ 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/streaming](ts/streaming)                                     | Examples of the different WebSocket Streaming APIs                                                                       | Streaming API, Static Endpoint, Frontend                               |
+| [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/README.md

@@ -27,7 +27,7 @@ encore app create --example=ts/streaming-chat
 encore run
 ```
 
-While `encore run` is running, open <http://localhost:4000/> to view the chat frontend.
+While `encore run` is running, open <http://localhost:4000/> to view the chat frontend. Open <http://localhost:4000/> in multiple tabs to see the chat in action. 
 
 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.
 

ts/streaming/.gitignore

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

ts/streaming/README.md

@@ -0,0 +1,48 @@
+# Encore.ts Streaming Examples
+
+This example showcases the different streaming APIs in Encore.ts: `api.streamIn`, `api.streamOut`, and `api.streamInOut`.
+
+Learn more in our [Streaming API docs](https://encore.dev/docs/ts/primitives/streaming-apis)
+
+## 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
+```
+
+## Running locally
+```bash
+encore run
+```
+
+While `encore run` is running, open <http://localhost:4000/> to view the frontend which has different pages for showcasing the different streaming endpoints.
+
+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/encore.app

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