peter-leonov
diff --git a/‎client/src/index.js
Lines changed: 19 additions & 2 deletions b/‎client/src/index.js
Lines changed: 19 additions & 2 deletions
diff --git a/‎worker/public/pico.min.css
Lines changed: 4 additions & 0 deletions b/‎worker/public/pico.min.css
Lines changed: 4 additions & 0 deletions
diff --git a/‎worker/public/index.html renamed to ‎worker/public/test.html b/‎worker/public/index.html renamed to ‎worker/public/test.html
diff --git a/‎worker/src/index.ts
Lines changed: 48 additions & 17 deletions b/‎worker/src/index.ts
Lines changed: 48 additions & 17 deletions
@@ -1,5 +1,22 @@
-// Creates a new WebSocket connection to the specified URL.
-const socket = new WebSocket("ws://localhost:8787/tunnel");
+const [_, tunnelURL, targetURL] = process.argv;
+
+function usage() {
+  console.log("Usage: node client.js <tunnelURL> <targetURL>");
+  console.log(
+    "Example: node client.js ws://https://webhooks-proxy-tunnel.YOUR_ORG.workers.dev/tunnel http://localhost:3000"
+  );
+}
+
+if (!tunnelURL) {
+  console.error("Please provide a tunnel URL.");
+  process.exit(1);
+}
+if (!targetURL) {
+  console.error("Please provide a target URL.");
+  process.exit(1);
+}
+
+const socket = new WebSocket(tunnelURL);
 
 // Executes when the connection is successfully established.
 socket.addEventListener("open", (event) => {
 
@@ -118,7 +118,7 @@ export class MyDurableObject extends DurableObject {
   }
 }
 
-const DO_ID = "foo";
+const DO_NAME = "foo";
 
 export default {
   /**
@@ -144,37 +144,33 @@ export default {
       // Create a `DurableObjectId` for an instance of the `MyDurableObject`
       // class named "foo". Requests from all Workers to the instance named
       // "foo" will go to a single globally unique Durable Object instance.
-      const id = env.MY_DURABLE_OBJECT.idFromName(DO_ID);
+      const id = env.MY_DURABLE_OBJECT.idFromName(DO_NAME);
 
       // Create a stub to open a communication channel with the Durable
       // Object instance.
       const stub = env.MY_DURABLE_OBJECT.get(id);
 
       return stub.fetch(request);
     } else if (url.pathname.startsWith("/proxy/")) {
-      const id = env.MY_DURABLE_OBJECT.idFromName(DO_ID);
+      const id = env.MY_DURABLE_OBJECT.idFromName(DO_NAME);
 
       // Create a stub to open a communication channel with the Durable
       // Object instance.
       const stub = env.MY_DURABLE_OBJECT.get(id);
       return stub.proxy(request);
-    } else if (url.pathname.startsWith("/close")) {
-      const id = env.MY_DURABLE_OBJECT.idFromName(DO_ID);
-
-      // Create a stub to open a communication channel with the Durable
-      // Object instance.
+    } else if (url.pathname == "/close") {
+      if (request.method !== "POST") {
+        return new Response("Method not allowed", { status: 405 });
+      }
+      const id = env.MY_DURABLE_OBJECT.idFromName(DO_NAME);
       const stub = env.MY_DURABLE_OBJECT.get(id);
       return stub.close();
-    } else {
-      return new Response(
-        "Websocket endpoint is listenning on <code>/tunnel</code>",
-        {
-          headers: {
-            "Content-Type": "text/html",
-          },
-        },
-      );
+    } else if (url.pathname == "/") {
+      return new Response(indexPage(url.origin), {
+        headers: { "content-type": "text/html" },
+      });
     }
+    return new Response("Not found", { status: 404 });
   },
 } satisfies ExportedHandler<Env>;
 
@@ -191,3 +187,38 @@ function withTimeout<T>(promise: Promise<T>, ms: number): Promise<T> {
     });
   });
 }
+
+function indexPage(root: string): string {
+  return `
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Hello, World!</title>
+  <link
+    rel="stylesheet"
+    href="/pico.min.css"
+  >
+</head>
+<body>
+<main class="container">
+<h1>Webhooks Proxy Tunnel</h1>
+<p>Tunnel URL: <code>${root}/tunnel</code></p>
+<p>Proxy URL: <code>${root}/proxy/</code></p>
+<p>Force <button id="close" class="outline">close</button> the tunnel.</p>
+</main>
+<script>
+async function closeTunnel() {
+  const response = await fetch("/close", {
+    method: "POST",
+    body: "",
+  })
+
+  console.log(response);
+}
+document.querySelector("#close").addEventListener("click", closeTunnel);
+</script>
+</body>
+</html>`;
+}