improve websocketurl flexibility

Created by: ruckc

referencing #12860 - improve flexibility of the webSocketURL property from webpack-dev-server.

packages/react-dev-utils/WebpackDevServerUtils.js

@@ -320,7 +320,9 @@ function prepareProxy(proxy, appPublicFolder, servedPathname) {
   // If proxy is specified, let it handle any request except for
   // files in the public folder and requests to the WebpackDevServer socket endpoint.
   // https://github.com/facebook/create-react-app/issues/6720
-  const sockPath = process.env.WDS_SOCKET_PATH || '/ws';
+  const sockUrl =
+    process.env.WDS_SOCKET_URL && url.parse(process.env.WDS_SOCKET_URL);
+  const sockPath = process.env.WDS_SOCKET_PATH || sockUrl.path || '/ws';
   const isDefaultSockHost = !process.env.WDS_SOCKET_HOST;
   function mayProxy(pathname) {
     const maybePublicPath = path.resolve(

packages/react-dev-utils/webpackHotDevClient.js

@@ -58,14 +58,17 @@ if (module.hot && typeof module.hot.dispose === 'function') {
 
 // Connect to WebpackDevServer via a socket.
 var connection = new WebSocket(
-  url.format({
-    protocol: window.location.protocol === 'https:' ? 'wss' : 'ws',
-    hostname: process.env.WDS_SOCKET_HOST || window.location.hostname,
-    port: process.env.WDS_SOCKET_PORT || window.location.port,
-    // Hardcoded in WebpackDevServer
-    pathname: process.env.WDS_SOCKET_PATH || '/ws',
-    slashes: true,
-  })
+  process.env.WDS_SOCKET_URL ||
+    url.format({
+      protocol:
+        process.env.WDS_SOCKET_PROTOCOL || window.location.protocol === 'https:'
+          ? 'wss'
+          : 'ws',
+      hostname: process.env.WDS_SOCKET_HOST || window.location.hostname,
+      port: process.env.WDS_SOCKET_PORT || window.location.port,
+      pathname: process.env.WDS_SOCKET_PATH || '/ws',
+      slashes: true,
+    })
 );
 
 // Unlike WebpackDevServer client, we won't try to reconnect

packages/react-scripts/config/env.js

@@ -93,6 +93,8 @@ function getClientEnvironment(publicUrl) {
         WDS_SOCKET_HOST: process.env.WDS_SOCKET_HOST,
         WDS_SOCKET_PATH: process.env.WDS_SOCKET_PATH,
         WDS_SOCKET_PORT: process.env.WDS_SOCKET_PORT,
+        WDS_SOCKET_PROTOCOL: process.env.WDS_SOCKET_PROTOCOL,
+        WDS_SOCKET_URL: process.env.WDS_SOCKET_URL,
         // Whether or not react-refresh is enabled.
         // It is defined here so it is available in the webpackHotDevClient.
         FAST_REFRESH: process.env.FAST_REFRESH !== 'false',

packages/react-scripts/config/webpackDevServer.config.js

@@ -17,9 +17,25 @@ const paths = require('./paths');
 const getHttpsConfig = require('./getHttpsConfig');
 
 const host = process.env.HOST || '0.0.0.0';
+const sockUrl = process.env.WDS_SOCKET_URL;
 const sockHost = process.env.WDS_SOCKET_HOST;
 const sockPath = process.env.WDS_SOCKET_PATH; // default: '/ws'
 const sockPort = process.env.WDS_SOCKET_PORT;
+const sockProtocol = process.env.WDS_SOCKET_PROTOCOL;
+
+// 1st priority is WDS_SOCKET_URL (if exists)
+// 2nd priority is the object from the parameters
+const sockObject = sockUrl
+  ? sockUrl
+  : {
+      // Enable custom sockjs pathname for websocket connection to hot reloading server.
+      // Enable custom sockjs hostname, pathname and port for websocket connection
+      // to hot reloading server.
+      hostname: sockHost,
+      pathname: sockPath,
+      port: sockPort,
+      protocol: sockProtocol,
+    };
 
 module.exports = function (proxy, allowedHost) {
   const disableFirewall =
@@ -78,14 +94,7 @@ module.exports = function (proxy, allowedHost) {
       },
     },
     client: {
-      webSocketURL: {
-        // Enable custom sockjs pathname for websocket connection to hot reloading server.
-        // Enable custom sockjs hostname, pathname and port for websocket connection
-        // to hot reloading server.
-        hostname: sockHost,
-        pathname: sockPath,
-        port: sockPort,
-      },
+      webSocketURL: sockObject,
       overlay: {
         errors: true,
         warnings: false,