docs(examples): add example with WebTransport

2026-01-09 15:08:12 -05:00 · 2023-06-29 11:21:27 +02:00
parent 2f6cc2fa42
commit 443e447087
7 changed files with 151 additions and 0 deletions
--- a/examples/webtransport/.gitignore
+++ b/examples/webtransport/.gitignore
@@ -0,0 +1 @@
+*.pem
--- a/examples/webtransport/README.md
+++ b/examples/webtransport/README.md
@@ -0,0 +1,18 @@
+
+# Socket.IO WebTransport example
+
+## How to use
+
+```shell
+# generate a self-signed certificate
+$ ./generate_cert.sh
+
+# install dependencies
+$ npm i
+
+# start the server
+$ node index.js
+
+# open a Chrome browser
+$ ./open_chrome.sh
+```
--- a/examples/webtransport/generate_cert.sh
+++ b/examples/webtransport/generate_cert.sh
@@ -0,0 +1,8 @@
+#!/bin/bash
+openssl req -new -x509 -nodes \
+    -out cert.pem \
+    -keyout key.pem \
+    -newkey ec \
+    -pkeyopt ec_paramgen_curve:prime256v1 \
+    -subj '/CN=127.0.0.1' \
+    -days 14
--- a/examples/webtransport/index.html
+++ b/examples/webtransport/index.html
@@ -0,0 +1,35 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Socket.IO WebTransport exampleqg</title>
+  </head>
+  <body>
+    <script src="/socket.io/socket.io.js"></script>
+    <script>
+      const socket = io({
+        transportOptions: {
+          webtransport: {
+            hostname: "127.0.0.1"
+          }
+        }
+      });
+
+      socket.on("connect", () => {
+        console.log(`connect ${socket.id}`);
+
+        socket.io.engine.on("upgrade", (transport) => {
+          console.log(`transport upgraded to ${transport.name}`);
+        });
+      });
+
+      socket.on("connect_error", (err) => {
+        console.log(`connect_error due to ${err.message}`);
+      });
+
+      socket.on("disconnect", (reason) => {
+        console.log(`disconnect due to ${reason}`);
+      });
+    </script>
+  </body>
+</html>
--- a/examples/webtransport/index.js
+++ b/examples/webtransport/index.js
@@ -0,0 +1,68 @@
+import { readFileSync } from "node:fs";
+import { createServer } from "node:https";
+import { Server } from "socket.io";
+import { Http3Server } from "@fails-components/webtransport";
+
+const key = readFileSync("./key.pem");
+const cert = readFileSync("./cert.pem");
+
+const httpsServer = createServer({
+  key,
+  cert
+}, (req, res) => {
+  if (req.method === "GET" && req.url === "/") {
+    const content = readFileSync("./index.html");
+    res.writeHead(200, {
+      "content-type": "text/html"
+    });
+    res.write(content);
+    res.end();
+  } else {
+    res.writeHead(404).end();
+  }
+});
+
+const io = new Server(httpsServer, {
+  transports: ["polling", "websocket", "webtransport"]
+});
+
+const port = process.env.PORT || 3000;
+
+io.on("connection", (socket) => {
+  console.log(`connect ${socket.id}`);
+
+  socket.conn.on("upgrade", (transport) => {
+    console.log(`transport upgraded to ${transport.name}`);
+  });
+
+  socket.on("disconnect", (reason) => {
+    console.log(`disconnect ${socket.id} due to ${reason}`);
+  });
+});
+
+httpsServer.listen(port, () => {
+  console.log(`server listening at https://localhost:${port}`);
+});
+
+const h3Server = new Http3Server({
+  port,
+  host: "0.0.0.0",
+  secret: "changeit",
+  cert,
+  privKey: key,
+});
+
+(async () => {
+  const stream = await h3Server.sessionStream("/socket.io/");
+  const sessionReader = stream.getReader();
+
+  while (true) {
+    const { done, value } = await sessionReader.read();
+    if (done) {
+      break;
+    }
+    io.engine.onWebTransportSession(value);
+  }
+})();
+
+h3Server.startServer();
--- a/examples/webtransport/open_chrome.sh
+++ b/examples/webtransport/open_chrome.sh
@@ -0,0 +1,10 @@
+#!/bin/bash
+HASH=`openssl x509 -pubkey -noout -in cert.pem |
+   openssl pkey -pubin -outform der |
+   openssl dgst -sha256 -binary |
+   base64`
+
+/opt/google/chrome/chrome \
+    --origin-to-force-quic-on=127.0.0.1:3000 \
+    --ignore-certificate-errors-spki-list=$HASH \
+    https://localhost:3000
--- a/examples/webtransport/package.json
+++ b/examples/webtransport/package.json
@@ -0,0 +1,11 @@
+{
+  "name": "webtransport",
+  "version": "0.0.1",
+  "description": "",
+  "private": true,
+  "type": "module",
+  "dependencies": {
+    "@fails-components/webtransport": "^0.1.7",
+    "socket.io": "^4.7.1"
+  }
+}