chore: add with-server-sent-events example (#204)

* docs: add server-sent events example * fix: use sirv instead of serve-static and use single quotes * update comment * update html * Update readme.md --------- Co-authored-by: Luke Edwards <[email protected]>
lukeed · Jan 21, 2024 · a72e13c · a72e13c
1 parent 58cb4f7
commit a72e13c
Show file tree

Hide file tree

Showing 4 changed files with 90 additions and 0 deletions.
diff --git a/examples/with-server-sent-events/index.js b/examples/with-server-sent-events/index.js
@@ -0,0 +1,29 @@
+const { join } = require('path');
+const polka = require('polka');
+
+const { PORT = 3000 } = process.env;
+const dir = join(__dirname, 'public');
+const assets = require('sirv')(dir);
+
+polka()
+	.use(assets)
+	.get('/subscribe', (request, response) => {
+		// You should add 'access-control-allow-origin' for
+		// cross-origin requests. We don't here because localhost
+		response.writeHead(200, {
+			'Content-Type': 'text/event-stream',
+			'Cache-Control': 'no-cache',
+			'Connection': 'keep-alive',
+		});
+
+		setInterval(() => {
+			response.write('data: ' + Date.now() + '\n\n');
+		}, 1e3);
+
+		request.on('close', () => {
+			response.end();
+		});
+	})
+	.listen(PORT, () => {
+		console.log(`> Running on http://localhost:${PORT}`);
+	});
diff --git a/examples/with-server-sent-events/package.json b/examples/with-server-sent-events/package.json
@@ -0,0 +1,9 @@
+{
+  "scripts": {
+    "start": "node index"
+  },
+  "dependencies": {
+    "polka": "latest",
+    "sirv": "latest"
+  }
+}
diff --git a/examples/with-server-sent-events/public/index.html b/examples/with-server-sent-events/public/index.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>Polka | Server Sent Events</title>
+</head>
+<body>
+	<h1>Server Sent Events</h1>
+	<ul id="sse-list"></ul>
+
+	<script>
+		document.addEventListener('DOMContentLoaded', function () {
+			const list = document.getElementById('sse-list');
+			const src = new EventSource('/subscribe');
+
+			src.onopen = function () {
+				console.log('[sse] connected');
+			};
+
+			src.onmessage = function (event) {
+				console.log('[sse] message', event);
+				const li = document.createElement('li');
+				li.innerText = `server time: ${event.data}`;
+				list.appendChild(li);
+			};
+
+			src.onerror = function () {
+				console.log('[sse]: error!');
+			};
+		});
+	</script>
+</body>
+</html>
diff --git a/examples/with-server-sent-events/readme.md b/examples/with-server-sent-events/readme.md
@@ -0,0 +1,19 @@
+# Example: Server-Sent Events
+
+Small `polka` example demonstrating how to use [Server-Sent Events](https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events).
+
+The `public` directory contains an `index.html` file managing the Event Source Web API to subscribe to Server-Sent Events.
+This file is served by Polka as a static asset using [`sirv`](https://github.com/lukeed/sirv) middleware.
+
+On the server-side, the `/subscribe` endpoint initiates the communication channel for events to be sent.
+
+## Setup
+
+```sh
+$ npm install
+$ npm start
+```
+
+## Usage
+
+Open a browser to `localhost:3000` and Server-Sent Events will be automatically subscribed to.