Add websockets example (#326)

wbamberg · bsmth · web-flow · commit 750873dc2247 · 2025-08-27T09:26:29.000+02:00
* Add websockets example

* Update websockets/README.md

Co-authored-by: Brian Smith &lt;brian@smith.berlin&gt;

* Update websockets/README.md

Co-authored-by: Brian Smith &lt;brian@smith.berlin&gt;

---------

Co-authored-by: Brian Smith &lt;brian@smith.berlin&gt;
diff --git a/README.md b/README.md
@@ -114,6 +114,8 @@ Code examples that accompany various MDN DOM and Web API documentation pages.
 
 - The "webgpu-render-demo" directory contains an example that demonstrates basic usage of the [WebGPU API](https://developer.mozilla.org/docs/Web/API/WebGPU_API) render pipeline, which is used for rendering high-performance graphics via the GPU. [View the demo live](https://mdn.github.io/dom-examples/webgpu-render-demo/).
 
+- The "websockets" directory contains an example that demonstrates basic usage of the [WebSockets API](https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API).
+
 - The "webxr" directory contains an example showing how to [start up a WebXR session](https://mdn.github.io/dom-examples/webxr/).
   See [Starting up and shutting down a WebXR session](https://developer.mozilla.org/en-US/docs/Web/API/WebXR_Device_API/Startup_and_shutdown) for details.
 
diff --git a/websockets/README.md b/websockets/README.md
@@ -0,0 +1,17 @@
+# README
+
+This directory contains a minimal example [WebSocket](https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API) client and server.
+
+When the page is loaded, it creates a WebSocket connection to the server, then sends a ping every second. The server listens for the ping and sends a response. The client listens for the responses and logs them.
+
+The client starts the connection on the [`pageshow`](https://developer.mozilla.org/en-US/docs/Web/API/Window/pageshow_event) event and closes it on [`pagehide`](https://developer.mozilla.org/en-US/docs/Web/API/Window/pagehide_event): this allows browser to keep the page in the [bfcache](https://developer.mozilla.org/en-US/docs/Glossary/bfcache), which improves page load if the user navigates back to it.
+
+## Running the example
+
+The server-side is written in [Deno](https://deno.com/) so Deno needs to be installed first. Then, with Deno in your path, you can start the server with a command like:
+
+```bash
+deno run --allow-net=0.0.0.0:80 --allow-read=./index.html,./client.js,client.css main.js
+```
+
+You can then navigate to http://localhost:80/ and you should see the application running.
diff --git a/websockets/client.css b/websockets/client.css
@@ -0,0 +1,6 @@
+#log {
+	height: 80vh;
+	overflow: scroll;
+	padding: 0.5rem;
+	border: 1px solid black;
+}
diff --git a/websockets/client.js b/websockets/client.js
@@ -0,0 +1,49 @@
+const wsUri = "ws://127.0.0.1/";
+let websocket = null;
+let pingInterval;
+let counter = 0;
+
+const logElement = document.querySelector("#log");
+function log(text) {
+	logElement.innerText = `${logElement.innerText}${text}\n`;
+	logElement.scrollTop = logElement.scrollHeight;
+}
+
+// Open the websocket when the page is shown
+window.addEventListener("pageshow", () => {
+	log("OPENING");
+
+	websocket = new WebSocket(wsUri);
+
+	websocket.addEventListener("open", () => {
+		log("CONNECTED");
+		pingInterval = setInterval(() => {
+			log(`SENT: ping: ${counter}`);
+			websocket.send("ping");
+		}, 1000);
+	});
+
+	websocket.addEventListener("close", () => {
+		log("DISCONNECTED");
+		clearInterval(pingInterval);
+	});
+
+	websocket.addEventListener("message", (e) => {
+		log(`RECEIVED: ${e.data}: ${counter}`);
+		counter++;
+	});
+
+	websocket.addEventListener("error", (e) => {
+		log(`ERROR: ${e.data}`);
+	});
+});
+
+// Close the websocket when the user leaves.
+window.addEventListener("pagehide", () => {
+	if (websocket) {
+		log("CLOSING");
+		websocket.close();
+		websocket = null;
+		window.clearInterval(pingInterval);
+	}
+});
diff --git a/websockets/index.html b/websockets/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<script src="client.js" defer></script>
+		<link rel="stylesheet" href="client.css" />
+		<title>WebSocket Test</title>
+	</head>
+	<body>
+		<h2>WebSocket Test</h2>
+		<p>Sends a ping every second</p>
+		<pre id="log"></pre>
+	</body>
+</html>
diff --git a/websockets/main.js b/websockets/main.js
@@ -0,0 +1,44 @@
+async function createResponse(path, mimeType) {
+	const file = await Deno.open(path, { read: true });
+	const response = new Response(file.readable);
+	response.headers.set("Content-Type", mimeType);
+	return response;
+}
+
+Deno.serve({
+	port: 80,
+	async handler(request) {
+		if (request.headers.get("upgrade") !== "websocket") {
+			const url = new URL(request.url);
+			// If the request is a normal HTTP request,
+			// we serve the client HTML, CSS, or JS.
+			switch (url.pathname) {
+				case "/client.js":
+					return await createResponse("./client.js", "text/javascript");
+				case "/client.css":
+					return await createResponse("./client.css", "text/css");
+				case "/":
+					return await createResponse("./index.html", "text/html");
+				default:
+					return new Response("Not found", {
+						status: 404,
+					});
+			}
+		}
+		// If the request is a websocket upgrade,
+		// we need to use the Deno.upgradeWebSocket helper
+		const { socket, response } = Deno.upgradeWebSocket(request);
+
+		socket.onopen = () => {
+			console.log("CONNECTED");
+		};
+		socket.onmessage = (event) => {
+			console.log(`RECEIVED: ${event.data}`);
+			socket.send("pong");
+		};
+		socket.onclose = () => console.log("DISCONNECTED");
+		socket.onerror = (error) => console.error("ERROR:", error);
+
+		return response;
+	},
+});
