feat: allow to set client.webSocketURL.protocol

Author: alexander-akait

client-src/utils/createSocketURL.js

@@ -24,8 +24,12 @@ function createSocketURL(parsedURL) {
     hostname = self.location.hostname;
   }
 
+  if (protocol === 'auto:') {
+    protocol = self.location.protocol;
+  }
+
   // `hostname` can be empty when the script path is relative. In that case, specifying a protocol would result in an invalid URL.
-  // When https is used in the app, secure websockets are always necessary because the browser doesn't accept non-secure websockets.
+  // When https is used in the app, secure web sockets are always necessary because the browser doesn't accept non-secure web sockets.
   if (hostname && isInAddrAny && self.location.protocol === 'https:') {
     protocol = self.location.protocol;
   }

lib/options.json

@@ -290,6 +290,18 @@
               "type": "object",
               "additionalProperties": false,
               "properties": {
+                "protocol": {
+                  "anyOf": [
+                    {
+                      "enum": ["auto"]
+                    },
+                    {
+                      "type": "string",
+                      "minLength": 1
+                    }
+                  ],
+                  "description": "Tells clients connected to devServer to use the provided protocol."
+                },
                 "host": {
                   "type": "string",
                   "minLength": 1,

lib/utils/DevServerPlugin.js

@@ -28,8 +28,15 @@ class DevServerPlugin {
   apply(compiler) {
     const { options } = this;
 
-    /** @type {"ws" | "wss"} */
-    const protocol = options.https ? 'wss' : 'ws';
+    /** @type {"ws:" | "wss:" | "http:" | "https:" | "auto:"} */
+    let protocol;
+
+    // We are proxying dev server and need to specify custom `host`
+    if (typeof options.client.webSocketURL.protocol !== 'undefined') {
+      protocol = options.client.webSocketURL.protocol;
+    } else {
+      protocol = options.https ? 'wss:' : 'ws:';
+    }
 
     /** @type {string} */
     let host;
@@ -111,7 +118,7 @@ class DevServerPlugin {
 
     const webSocketURL = encodeURIComponent(
       new URL(
-        `${protocol}://${ipaddr.IPv6.isIPv6(host) ? `[${host}]` : host}${
+        `${protocol}//${ipaddr.IPv6.isIPv6(host) ? `[${host}]` : host}${
           port ? `:${port}` : ''
         }${path || '/'}${
           Object.keys(searchParams).length > 0

lib/utils/normalizeOptions.js

@@ -120,8 +120,9 @@ function normalizeOptions(compiler, options, logger) {
     const parsedURL = new URL(options.client.webSocketURL);
 
     options.client.webSocketURL = {
+      protocol: parsedURL.protocol,
       host: parsedURL.hostname,
-      port: Number(parsedURL.port),
+      port: parsedURL.port.length > 0 ? Number(parsedURL.port) : '',
       path: parsedURL.pathname,
     };
   } else if (typeof options.client.webSocketURL.port === 'string') {