use fragment parameters

README.md

@@ -6,14 +6,14 @@ First, open adbd 5555 port on an Android device using `adb tcpip 5555` or `su 0
 
 Second, the device starts a tunneling over Piping Server in some way, equivalent to the following command:   
 ```bash
-curl -sSN https://ppng.io/mycspath | nc localhost 5555 | curl -sSNT - https://ppng.io/myscpath
+curl -sSN https://ppng.io/aaa | nc localhost 5555 | curl -sSNT - https://ppng.io/bbb
 ```
 
 - [Termux](https://termux.dev) is useful to run `curl` and `nc`.
 - See "[Secure TCP tunnel from anywhere with curl and nc for single connection](https://dev.to/nwtgck/secure-tcp-tunnel-from-anywhere-with-curl-and-nc-for-single-connection-2k5i)" to know how the tunneling works.
 
 Finally, open the following URL on a Chromium-based browser.  
-<https://piping-adb.nwtgck.org/?auto_connect&server=https://ppng.io&cs_path=mycspath&sc_path=myscpath>
+<https://piping-adb.nwtgck.org/#?auto_connect&server=https://ppng.io&cs_path=aaa&sc_path=bbb>
 
 ## Acknowledgements
 

apps/demo/src/components/connect.tsx

@@ -35,7 +35,7 @@ import { GLOBAL_STATE } from "../state";
 import { CommonStackTokens, Icons } from "../utils";
 
 import {AdbDaemonPipingDevice} from "../adb-daemon-piping";
-import {useRouter} from "next/router";
+import {fragmentParams} from "../fragment-params";
 
 const DropdownStyles = { dropdown: { width: "100%" } };
 
@@ -47,7 +47,6 @@ function urlJoin(baseUrl: string, path: string): string {
 
 function _Connect(): JSX.Element | null {
     const [selected, setSelected] = useState<AdbDaemonDevice | undefined>();
-    const router = useRouter();
     const [connecting, setConnecting] = useState(false);
     const [autoConnect, setAutoConnect] = useState(false);
 
@@ -182,14 +181,13 @@ function _Connect(): JSX.Element | null {
     const [pipingDeviceList, setPipingDeviceList] = useState<AdbDaemonPipingDevice[]>([]);
 
     useEffect(() => {
-        const pipingSererUrl = router.query["server"] as string ?? "https://ppng.io";
-        const csPath = router.query["cs_path"] as string | undefined;
-        const scPath = router.query["sc_path"] as string | undefined;
+        const pipingSererUrl = fragmentParams.pipingServerUrl() ?? "https://ppng.io";
+        const csPath = fragmentParams.csPath();
+        const scPath = fragmentParams.scPath();
         if (csPath === undefined || scPath === undefined) {
             return;
         }
-        const headersString = router.query["headers"] as string | undefined;
-        const headers = headersString === undefined ? undefined : new Headers(JSON.parse(decodeURIComponent(headersString)));
+        const headers = new Headers(fragmentParams.pipingServerHeaders() ?? []);
         const device = new AdbDaemonPipingDevice({
             csUrl: urlJoin(pipingSererUrl, csPath),
             scUrl: urlJoin(pipingSererUrl, scPath),
@@ -198,16 +196,15 @@ function _Connect(): JSX.Element | null {
         });
         setPipingDeviceList([device]);
         setSelected(device);
-        const autoConnectString = router.query["auto_connect"] as string | undefined;
-        setAutoConnect(autoConnectString === "" || autoConnectString === "true" || autoConnectString === "1");
-    }, [router]);
+        setAutoConnect(fragmentParams.autoConnect() ?? false);
+    }, []);
 
     useEffect(() => {
-        if (autoConnect) {
+        if (autoConnect && selected !== undefined) {
             console.log("auto connecting...", selected);
             connect();
         }
-    }, [autoConnect]);
+    }, [autoConnect, selected]);
 
 
     const handleSelectedChange = (

apps/demo/src/fragment-params.ts

@@ -0,0 +1,41 @@
+const paramNames = {
+  pipingServerUrl: "server",
+  pipingServerHeaders: "headers",
+  csPath: "cs_path",
+  scPath: "sc_path",
+  autoConnect: "auto_connect",
+};
+
+export const fragmentParams = {
+  pipingServerUrl(): string | undefined {
+    return parseFragmentParams().get(paramNames.pipingServerUrl) ?? undefined;
+  },
+  pipingServerHeaders(): Array<[string, string]> | undefined {
+    const headersString = parseFragmentParams().get(paramNames.pipingServerHeaders);
+    if (headersString === null) {
+      return undefined;
+    }
+    let decoded: [string, string][];
+    try {
+      decoded = JSON.parse(decodeURIComponent(headersString));
+    } catch {
+      return undefined;
+    }
+    return decoded;
+  },
+  csPath(): string | undefined {
+    return parseFragmentParams().get(paramNames.csPath) ?? undefined;
+  },
+  scPath(): string | undefined {
+    return parseFragmentParams().get(paramNames.scPath) ?? undefined;
+  },
+  autoConnect(): boolean | undefined {
+    const str = parseFragmentParams().get(paramNames.autoConnect);
+    return str !== null && ["", "1", "true"].includes(str);
+  }
+};
+
+function parseFragmentParams(): URLSearchParams {
+  const url = new URL(`a://a${location.hash.substring(1)}`);
+  return url.searchParams;
+}

apps/demo/src/pages/index.mdx

@@ -12,15 +12,15 @@ First, open adbd 5555 port on an Android device using `adb tcpip 5555` or `su 0
 
 Second, the device starts a tunneling over Piping Server in some way, equivalent to the following command:
 ```bash
-curl -sSN https://ppng.io/mycspath | nc localhost 5555 | curl -sSNT - https://ppng.io/myscpath
+curl -sSN https://ppng.io/aaa | nc localhost 5555 | curl -sSNT - https://ppng.io/bbb
 ```
 
 - [Termux](https://termux.dev) is useful to run `curl` and `nc`.
 - See "[Secure TCP tunnel from anywhere with curl and nc for single connection](https://dev.to/nwtgck/secure-tcp-tunnel-from-anywhere-with-curl-and-nc-for-single-connection-2k5i)" to know how the tunneling works.
 
 Finally, open the following URL on a Chromium-based browser.
 
-[https://piping-adb.nwtgck.org/?auto_connect&server=https://ppng.io&cs_path=mycspath&sc_path=myscpath](https://piping-adb.nwtgck.org/?auto_connect&server=https://ppng.io&cs_path=mycspath&sc_path=myscpath)
+[https://piping-adb.nwtgck.org/#?auto_connect&server=https://ppng.io&cs_path=aaa&sc_path=bbb](https://piping-adb.nwtgck.org/#?auto_connect&server=https://ppng.io&cs_path=aaa&sc_path=bbb)
 
 ## Acknowledgements