docs: add server-sent events example

lukeed · Jan 18, 2024 · f12d85a · f12d85a
1 parent 58cb4f7
commit f12d85a
Show file tree

Hide file tree

Showing 4 changed files with 98 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,30 @@
+const { join } = require("path");
+const polka = require("polka");
+
+const { PORT = 3000 } = process.env;
+const dir = join(__dirname, "public");
+const serve = require("serve-static")(dir);
+
+polka()
+	.use(serve)
+	.get("/subscribe", (request, response) => {
+		// "access-control-allow-origin" is required for cross-origin requests
+		// as for any other requests. In our case, we are using localhost for both,
+		// hence not needed.
+		response.writeHead(200, {
+			"Content-Type": "text/event-stream",
+			"Cache-Control": "no-cache",
+			"Connection": "keep-alive",
+		});
+
+		setInterval(() => {
+			response.write("data: " + Date.now() + "\n\n");
+		}, 1000);
+
+		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",
+    "serve-static": "^1.13.1"
+  }
+}
diff --git a/examples/with-server-sent-events/public/index.html b/examples/with-server-sent-events/public/index.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+	<meta charset="UTF-8">
+	<title>Polka SSE</title>
+</head>
+
+<body>
+
+	<h1>Server Sent Events</h1>
+
+	<ul id="sse-list"></ul>
+
+	<script>
+		document.addEventListener('DOMContentLoaded', function () {
+			const sseList = document.getElementById('sse-list');
+
+			const eventSource = new EventSource('/subscribe');
+
+			eventSource.onopen = function () {
+				console.log('Event Source: connection opened');
+			};
+
+			eventSource.onmessage = function (event) {
+				const li = document.createElement('li');
+				li.innerText = `Event time: ${event.data}`;
+				sseList.appendChild(li);
+			};
+
+			eventSource.onerror = function () {
+				console.log('Event Source: error occurred');
+			};
+		});
+
+	</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 example demonstrating how to use Server-Sent Events with `polka`
+
+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 `serve-static` 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.