more ui

Author: peter-leonov

client/src/index.js

@@ -3,7 +3,7 @@ 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"
+    "Example: node client.js https://webhooks-proxy-tunnel.YOUR_ORG.workers.dev/tunnel http://localhost:3000"
   );
 }
 

worker/README.md

@@ -9,3 +9,20 @@ npm run deploy
 ```
 
 Play with the protocol using [wscat](https://github.com/websockets/wscat).
+
+## How to use
+
+Create a [Cloudflare account](https://www.cloudflare.com/) on the Free plan, or if you plan to test thousands of tunnels try the [Workers Paid](https://developers.cloudflare.com/workers/platform/pricing/) plan.
+
+[Install Node.js](https://nodejs.org/en/download). Tested on `v22.14.0`.
+
+Clone the repo:
+
+```bash
+git clone https://github.com/peter-leonov/webhooks-proxy-tunnel.git
+cd webhooks-proxy-tunnel
+# this step might ask you to log in
+( cd worker && npm i && npm run deploy )
+```
+
+Then open the URL that the deploment gave you and follow the instructions.

worker/package-lock.json

@@ -211,12 +211,24 @@ function indexPage(origin: string): string {
 <p>Public URL: <code>${origin}/proxy/</code></p>
 <p>Tunnel URL: <code>${origin}/tunnel</code></p>
 <p>
+  Local server URL: <input type="text" value="http://localhost:3000/" id="target-input" />
   Client command:
-  <pre><code>node client.js ${origin}/tunnel http://localhost:3000/</code></pre>
+  <pre><code>cd webhooks-proxy-tunnel/client
+node src/client.js ${origin}/tunnel <span id="target-span">http://localhost:3000/</span>
+</code></pre>
   Connecting a new client kicks out the currently connected one.
 </p>
 <p>Force <a href="/close">close</a> the tunnel if the connected client is stuck.</p>
 </main>
+<script>
+const targetInput = document.getElementById("target-input");
+const targetSpan = document.getElementById("target-span");
+targetInput.addEventListener("input", (event) => {
+  console.log("target input changed", event);
+  const value = event.target.value;
+  targetSpan.firstChild.nodeValue = value;
+})
+</script>
 </body>
 </html>`;
 }