fix: add WDS v4 compatibility (#483)

Author: pmmmwh

sockets/WDSSocket.js

@@ -2,6 +2,7 @@
 
 const getSocketUrlParts = require('./utils/getSocketUrlParts.js');
 const getUrlFromParts = require('./utils/getUrlFromParts');
+const getWDSMetadata = require('./utils/getWDSMetadata');
 
 /**
  * Initializes a socket server for HMR for webpack-dev-server.
@@ -16,18 +17,10 @@ function initWDSSocket(messageHandler, resourceQuery) {
       SocketClient = __webpack_dev_server_client__.default;
     }
 
-    const urlParts = getSocketUrlParts(resourceQuery);
+    const wdsMeta = getWDSMetadata(SocketClient);
+    const urlParts = getSocketUrlParts(resourceQuery, wdsMeta);
 
-    let enforceWs = false;
-    if (
-      typeof SocketClient.name !== 'undefined' &&
-      SocketClient.name !== null &&
-      SocketClient.name.toLowerCase().includes('websocket')
-    ) {
-      enforceWs = true;
-    }
-
-    const connection = new SocketClient(getUrlFromParts(urlParts, enforceWs));
+    const connection = new SocketClient(getUrlFromParts(urlParts, wdsMeta));
 
     connection.onMessage(function onSocketMessage(data) {
       const message = JSON.parse(data);

sockets/utils/getSocketUrlParts.js

@@ -1,5 +1,4 @@
 const getCurrentScriptSource = require('./getCurrentScriptSource.js');
-const parseQuery = require('./parseQuery.js');
 
 /**
  * @typedef {Object} SocketUrlParts
@@ -13,10 +12,15 @@ const parseQuery = require('./parseQuery.js');
 /**
  * Parse current location and Webpack's `__resourceQuery` into parts that can create a valid socket URL.
  * @param {string} [resourceQuery] The Webpack `__resourceQuery` string.
+ * @param {import('./getWDSMetadata').WDSMetaObj} [metadata] The parsed WDS metadata object.
  * @returns {SocketUrlParts} The parsed URL parts.
  * @see https://webpack.js.org/api/module-variables/#__resourcequery-webpack-specific
  */
-function getSocketUrlParts(resourceQuery) {
+function getSocketUrlParts(resourceQuery, metadata) {
+  if (typeof metadata === 'undefined') {
+    metadata = {};
+  }
+
   const scriptSource = getCurrentScriptSource();
 
   let url = {};
@@ -36,24 +40,52 @@ function getSocketUrlParts(resourceQuery) {
   let hostname = url.hostname;
   /** @type {string | undefined} */
   let protocol = url.protocol;
-  let pathname = '/sockjs-node'; // This is hard-coded in WDS
   /** @type {string | undefined} */
   let port = url.port;
 
+  // This is hard-coded in WDS v3
+  let pathname = '/sockjs-node';
+  if (metadata.version === 4) {
+    // This is hard-coded in WDS v4
+    pathname = '/ws';
+  }
+
   // Parse authentication credentials in case we need them
   if (url.username) {
     // Since HTTP basic authentication does not allow empty username,
     // we only include password if the username is not empty.
-    // Result: <username>:<password>
-    auth = [url.username, url.password].filter(Boolean).join(':');
+    // Result: <username> or <username>:<password>
+    auth = url.username;
+    if (url.password) {
+      auth += ':' + url.password;
+    }
   }
 
-  // Check for IPv4 and IPv6 host addresses that corresponds to `any`/`empty`.
-  // This is important because `hostname` can be empty for some hosts,
-  // such as `about:blank` or `file://` URLs.
-  const isEmptyHostname = url.hostname === '0.0.0.0' || url.hostname === '[::]' || !url.hostname;
+  // If the resource query is available,
+  // parse it and overwrite everything we received from the script host.
+  const parsedQuery = {};
+  if (resourceQuery) {
+    const searchParams = new URLSearchParams(resourceQuery.slice(1));
+    searchParams.forEach(function (value, key) {
+      parsedQuery[key] = value;
+    });
+  }
 
-  // We only re-assign the hostname if we are using HTTP/HTTPS protocols
+  hostname = parsedQuery.sockHost || hostname;
+  pathname = parsedQuery.sockPath || pathname;
+  port = parsedQuery.sockPort || port;
+
+  // Make sure the protocol from resource query has a trailing colon
+  if (parsedQuery.sockProtocol) {
+    protocol = parsedQuery.sockProtocol + ':';
+  }
+
+  // Check for IPv4 and IPv6 host addresses that corresponds to any/empty.
+  // This is important because `hostname` can be empty for some hosts,
+  // such as 'about:blank' or 'file://' URLs.
+  const isEmptyHostname = hostname === '0.0.0.0' || hostname === '[::]' || !hostname;
+  // We only re-assign the hostname if it is empty,
+  // and if we are using HTTP/HTTPS protocols.
   if (
     isEmptyHostname &&
     window.location.hostname &&
@@ -64,7 +96,7 @@ function getSocketUrlParts(resourceQuery) {
 
   // We only re-assign `protocol` when `hostname` is available and is empty,
   // since otherwise we risk creating an invalid URL.
-  // We also do this when `https` is used as it mandates the use of secure sockets.
+  // We also do this when 'https' is used as it mandates the use of secure sockets.
   if (hostname && (isEmptyHostname || window.location.protocol === 'https:')) {
     protocol = window.location.protocol;
   }
@@ -74,18 +106,6 @@ function getSocketUrlParts(resourceQuery) {
     port = window.location.port;
   }
 
-  // If the resource query is available,
-  // parse it and overwrite everything we received from the script host.
-  const parsedQuery = parseQuery(resourceQuery || '');
-  hostname = parsedQuery.sockHost || hostname;
-  pathname = parsedQuery.sockPath || pathname;
-  port = parsedQuery.sockPort || port;
-
-  // Make sure the protocol from resource query has a trailing colon
-  if (parsedQuery.sockProtocol) {
-    protocol = parsedQuery.sockProtocol + ':';
-  }
-
   if (!hostname || !pathname || !port) {
     throw new Error(
       [

sockets/utils/getUrlFromParts.js

@@ -1,15 +1,19 @@
 /**
  * Create a valid URL from parsed URL parts.
  * @param {import('./getSocketUrlParts').SocketUrlParts} urlParts The parsed URL parts.
- * @param {boolean} [enforceWs] Enforce using the WebSocket protocols.
+ * @param {import('./getWDSMetadata').WDSMetaObj} [metadata] The parsed WDS metadata object.
  * @returns {string} The generated URL.
  */
-function urlFromParts(urlParts, enforceWs) {
+function urlFromParts(urlParts, metadata) {
+  if (typeof metadata === 'undefined') {
+    metadata = {};
+  }
+
   let fullProtocol = 'http:';
   if (urlParts.protocol) {
     fullProtocol = urlParts.protocol;
   }
-  if (enforceWs) {
+  if (metadata.enforceWs) {
     fullProtocol = fullProtocol.replace(/^(?:http|.+-extension|file)/i, 'ws');
   }
 

sockets/utils/getWDSMetadata.js

@@ -0,0 +1,44 @@
+/**
+ * @typedef {Object} WDSMetaObj
+ * @property {boolean} enforceWs
+ * @property {number} version
+ */
+
+/**
+ * Derives WDS metadata from a compatible socket client.
+ * @param {Function} SocketClient A WDS socket client (SockJS/WebSocket).
+ * @returns {WDSMetaObj} The parsed WDS metadata object.
+ */
+function getWDSMetadata(SocketClient) {
+  let enforceWs = false;
+  if (
+    typeof SocketClient.name !== 'undefined' &&
+    SocketClient.name !== null &&
+    SocketClient.name.toLowerCase().includes('websocket')
+  ) {
+    enforceWs = true;
+  }
+
+  let version;
+  // WDS versions <=3.5.0
+  if (!('onMessage' in SocketClient.prototype)) {
+    version = 3;
+  } else {
+    // WDS versions >=3.5.0 <4
+    if (
+      'getClientPath' in SocketClient ||
+      Object.getPrototypeOf(SocketClient).name === 'BaseClient'
+    ) {
+      version = 3;
+    } else {
+      version = 4;
+    }
+  }
+
+  return {
+    enforceWs: enforceWs,
+    version: version,
+  };
+}
+
+module.exports = getWDSMetadata;

sockets/utils/parseQuery.js

@@ -222,4 +222,16 @@ describe('getSocketUrlParts', () => {
       protocol: 'http:',
     });
   });
+
+  it('should force /ws when metadata.version is 4', () => {
+    getCurrentScriptSource.mockImplementationOnce(() => 'http://localhost:8080');
+
+    expect(getSocketUrlParts(undefined, { version: 4 })).toStrictEqual({
+      auth: undefined,
+      hostname: 'localhost',
+      pathname: '/ws',
+      port: '8080',
+      protocol: 'http:',
+    });
+  });
 });

test/sockets/getSocketUrlParts.test.js

@@ -89,7 +89,7 @@ describe('getUrlFromParts', () => {
     ).toStrictEqual('http://username:password@localhost:8080/sockjs-node');
   });
 
-  it('should force WS when enforceWs is true and protocol is HTTP', () => {
+  it('should force WS when metadata.enforceWs is true and protocol is HTTP', () => {
     expect(
       getUrlFromParts(
         {
@@ -99,12 +99,12 @@ describe('getUrlFromParts', () => {
           port: '8080',
           protocol: 'http:',
         },
-        true
+        { enforceWs: true }
       )
     ).toStrictEqual('ws://localhost:8080/sockjs-node');
   });
 
-  it('should force WSS when enforceWs is true and protocol is HTTPS', () => {
+  it('should force WSS when metadata.enforceWs is true and protocol is HTTPS', () => {
     expect(
       getUrlFromParts(
         {
@@ -114,7 +114,7 @@ describe('getUrlFromParts', () => {
           port: '8080',
           protocol: 'https:',
         },
-        true
+        { enforceWs: true }
       )
     ).toStrictEqual('wss://localhost:8080/sockjs-node');
   });