#143 add 'webtransport' switch

Xpra-org · Jun 29, 2024 · 0929556 · 0929556
1 parent 330d2c9
commit 0929556
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 24 deletions.
diff --git a/html5/connect.html b/html5/connect.html
@@ -108,13 +108,15 @@ <h5>Version 13 beta</h5>
           />
           <br />
           <div class="security-box">
-            <span id="ssl-span"
-              ><input type="checkbox" id="ssl" /> Secure Sockets</span
-            >
-            <span id="insecure-span"
-              ><input type="checkbox" id="insecure" /> Insecure plain-text
-              passwords</span
-            >
+            <span id="ssl-span">
+              <input type="checkbox" id="ssl" /> Secure Sockets
+            </span>
+            <span id="insecure-span">
+              <input type="checkbox" id="insecure" /> Insecure plain-text passwords
+            </span>
+            <span id="webtransport-span">
+              <input type="checkbox" id="webtransport" /> WebTransport
+            </span>
             <br />
             <span id="encryption-span">
               <input type="checkbox" id="aes" />
@@ -593,6 +595,7 @@ <h4 class="panel-title">Advanced options</h4>
         "mediasource_video",
         "ssl",
         "insecure",
+        "webtransport",
         "floating_menu",
         "autohide",
         "clock",
@@ -674,6 +677,8 @@ <h4 class="panel-title">Advanced options</h4>
       function doConnectURI() {
         let url = "xpraws://";
         const ssl = document.getElementById("ssl").checked;
+        // the python client does not support webtransport yet:
+        // const webtransport = document.getElementById("webtransport").checked;
         if (ssl) {
           url = "xprawss://";
         }
@@ -926,11 +931,14 @@ <h4 class="panel-title">Advanced options</h4>
 
         const ssl = getboolparam("ssl", https);
         const insecure = getboolparam("insecure", false);
-        $("input#ssl").prop("checked", ssl);
-        $("input#insecure").prop("checked", insecure);
+        const webtransport = getboolparam("webtransport", false);
         const ssl_input = document.getElementById("ssl");
         const insecure_input = document.getElementById("insecure");
+        const webtransport_input = document.getElementById("webtransport");
         const aes_input = document.getElementById("aes");
+        ssl_input.checked = ssl;
+        insecure_input.checked = insecure;
+        webtransport_input.checked = webtransport;
         const has_session_storage = Utilities.hasSessionStorage();
         $("span#encryption-key-span").hide();
         aes_input.onchange = function () {
@@ -964,6 +972,16 @@ <h4 class="panel-title">Advanced options</h4>
           }
         }
         aes_input.onchange();
+        webtransport_input.onchange = function () {
+          ssl_input.disabled = webtransport_input.checked;
+          insecure_input.disabled = webtransport_input.checked;
+          aes_input.disabled = webtransport_input.checked;
+          if (webtransport_input.checked) {
+            ssl_input.checked = true;
+            aes_input.checked = false;
+          }
+        }
+        webtransport_input.onchange();
 
         //vrefresh:
         let animation_times = [];
@@ -1024,15 +1042,10 @@ <h4 class="panel-title">Advanced options</h4>
           //local storage makes this secure
           $("span#insecure-span").hide();
         }
-        $("input#password").prop("disabled", !has_session_storage && !ssl_input.checked && !insecure_input.checked);
         insecure_input.onchange = function () {
-          $("input#password").prop(
-            "disabled",
-            !has_session_storage &&
-              !ssl_input.checked &&
-              !insecure_input.checked
-          );
+          $("input#password").prop("disabled", !has_session_storage && !ssl_input.checked && !insecure_input.checked);
         };
+        insecure_input.onchange();
 
         // keep track of the currently selected action
         // and update the label of the main action button:

diff --git a/html5/index.html b/html5/index.html
@@ -728,6 +728,8 @@ <h2>Xpra Bug Report</h2>
         const server = getparam("server") || window.location.hostname;
         const port = getparam("port") || window.location.port;
         const ssl = getboolparam("ssl", https);
+        const webtransport = getboolparam("webtransport", false);
+        console.error("webtransport=", webtransport);
         const path = getparam("path") || window.location.pathname;
         const encryption = getparam("encryption") || null;
         const key = getparam("key") || null;
@@ -1026,6 +1028,7 @@ <h2>Xpra Bug Report</h2>
                 server: server,
                 port: port,
                 ssl: ssl,
+                webtransport: webtransport,
                 path: path,
                 encryption: encryption,
                 encoding: encoding,
@@ -1086,6 +1089,7 @@ <h2>Xpra Bug Report</h2>
         client.host = server;
         client.port = port;
         client.ssl = ssl;
+        client.webtransport = webtransport;
         client.path = path.split("index.html")[0];
         return client;
       }

diff --git a/html5/js/Client.js b/html5/js/Client.js
@@ -22,7 +22,6 @@ const FILE_SIZE_LIMIT = 4 * 1024 * 1024 * 1024; //are we even allowed to allocat
 const FILE_CHUNKS_SIZE = 128 * 1024;
 const MAX_CONCURRENT_FILES = 5;
 const CHUNK_TIMEOUT = 10 * 1000;
-const WEBTRANSPORT = false;
 
 const TEXT_PLAIN = "text/plain";
 const UTF8_STRING = "UTF8_STRING";
@@ -83,6 +82,7 @@ class XpraClient {
     this.host = null;
     this.port = null;
     this.ssl = null;
+    this.webtransport = false;
     this.path = "";
     this.username = "";
     this.passwords = [];
@@ -643,7 +643,7 @@ class XpraClient {
   }
 
   _do_connect(with_worker) {
-    if (WEBTRANSPORT) {
+    if (this.webtransport) {
       this.protocol = new XpraWebTransportProtocol();
     }
     else {
@@ -658,14 +658,16 @@ class XpraClient {
     this.protocol.set_packet_handler((packet) => this._route_packet(packet));
     // make uri
     let uri = "";
-    if (WEBTRANSPORT) {
-        uri = "http";
+    if (this.webtransport) {
+        uri = "https";
     }
     else {
-        uri = "ws";
-    }
-    if (this.ssl) {
-        uri += "s";
+        if (this.ssl) {
+            uri = "wss";
+        }
+        else {
+            uri = "ws";
+        }
     }
     uri += "://";
     uri += this.host;