feat: remove SockJS support (#5626)

* chore: remove SockJSClient and related files from the project

* chore: remove SockJS support and related configurations from the project

* chore: remove SockJS example files and configurations

* chore: remove SockJS support and related tests from the project

* refactor: change sockjs to ws for customclient

* fix: update import typedef

* fix: update snapshots

Signed-off-by: Sebastian Beltran <bjohansebas@gmail.com>

* chore: remove SockJS and related type definitions from package.json and package-lock.json

* refactor: simplify WebSocket session handling in tests

* test: update WebSocket handling in client tests to use CDP sessions

* fix: update snapshot for SSL certificate generation log in server options test

* docs: update migration guide to reflect removal of SockJS support

* refactor: remove SockJS dependency from CustomWebSocketClient

* chore: update puppeteer to version 24.35.0 in package.json

* fix: update import path for webpack config in client tests

* fix: update createCDPSession usage in client tests

* refactor: update session creation and subscription handling in tests

* fix: update webSocketTransport configuration to include webSocketURL and host

---------

Signed-off-by: Sebastian Beltran <bjohansebas@gmail.com>

Author: bjohansebas

bin/cli-flags.js

@@ -214,7 +214,7 @@ module.exports = {
     configs: [
       {
         type: "enum",
-        values: ["sockjs", "ws"],
+        values: ["ws"],
         multiple: false,
         description:
           "Allows to set custom web socket transport to communicate with dev server.",
@@ -1253,7 +1253,7 @@ module.exports = {
         multiple: false,
         path: "webSocketServer",
         type: "enum",
-        values: ["sockjs", "ws"],
+        values: ["ws"],
       },
       {
         description:
@@ -1276,7 +1276,7 @@ module.exports = {
         multiple: false,
         path: "webSocketServer.type",
         type: "enum",
-        values: ["sockjs", "ws"],
+        values: ["ws"],
       },
       {
         description:

client-src/clients/SockJSClient.js

@@ -4,7 +4,7 @@ import WebSocketClient from "./clients/WebSocketClient.js";
 import { log } from "./utils/log.js";
 
 /** @typedef {import("./index.js").EXPECTED_ANY} EXPECTED_ANY */
-/** @typedef {import("./clients/SockJSClient")} SockJSClient */
+/** @typedef {WebSocketClient} */
 
 // this WebsocketClient is here as a default fallback, in case the client is not injected
 /** @type {CommunicationClientConstructor} */

client-src/modules/sockjs-client/index.js

@@ -69,13 +69,4 @@ module.exports = [
       ),
     ],
   }),
-  merge(baseForModules, {
-    entry: path.join(__dirname, "modules/sockjs-client/index.js"),
-    output: {
-      filename: "sockjs-client/index.js",
-      library: "SockJS",
-      libraryTarget: "umd",
-      globalObject: "(typeof self !== 'undefined' ? self : this)",
-    },
-  }),
 ];

client-src/socket.js

@@ -26,9 +26,5 @@ module.exports = {
     // https://jestjs.io/docs/upgrading-to-jest28#packagejson-exports
     // https://github.com/microsoft/accessibility-insights-web/pull/5421#issuecomment-1109168149
     //
-    // FIXME: this uuid moduleNameMapper workaround can be removed after sockjs > uuid@v9 release
-    // https://github.com/uuidjs/uuid/pull/616#issuecomment-1206283882
-    // eslint-disable-next-line n/no-extraneous-require
-    "^uuid$": require.resolve("uuid"),
   },
 };

client-src/webpack.config.js

@@ -121,16 +121,16 @@ const schema = require("./options.json");
 
 /**
  * @typedef {object} WebSocketServerConfiguration
- * @property {("sockjs" | "ws" | string | (() => WebSocketServerConfiguration))=} type type
+ * @property {( "ws" | string | (() => WebSocketServerConfiguration))=} type type
  * @property {Record<string, EXPECTED_ANY>=} options options
  */
 
 /**
- * @typedef {(import("ws").WebSocket | import("sockjs").Connection & { send: import("ws").WebSocket["send"], terminate: import("ws").WebSocket["terminate"], ping: import("ws").WebSocket["ping"] }) & { isAlive?: boolean }} ClientConnection
+ * @typedef {(import("ws").WebSocket & { send: import("ws").WebSocket["send"], terminate: import("ws").WebSocket["terminate"], ping: import("ws").WebSocket["ping"] }) & { isAlive?: boolean }} ClientConnection
  */
 
 /**
- * @typedef {import("ws").WebSocketServer | import("sockjs").Server & { close: import("ws").WebSocketServer["close"] }} WebSocketServer
+ * @typedef {import("ws").WebSocketServer & { close: import("ws").WebSocketServer["close"] }} WebSocketServer
  */
 
 /**
@@ -190,7 +190,7 @@ const schema = require("./options.json");
  * @property {(boolean | { warnings?: OverlayMessageOptions, errors?: OverlayMessageOptions, runtimeErrors?: OverlayMessageOptions })=} overlay overlay
  * @property {boolean=} progress progress
  * @property {(boolean | number)=} reconnect reconnect
- * @property {("ws" | "sockjs" | string)=} webSocketTransport web socket transport
+ * @property {("ws" | string)=} webSocketTransport web socket transport
  * @property {(string | WebSocketURL)=} webSocketURL web socket URL
  */
 
@@ -231,7 +231,7 @@ const schema = require("./options.json");
  * @property {(boolean | string | Static | Array<string | Static>)=} static
  * @property {(ServerType<A, S> | ServerConfiguration<A, S>)=} server
  * @property {(() => Promise<A>)=} app
- * @property {(boolean | "sockjs" | "ws" | string | WebSocketServerConfiguration)=} webSocketServer
+ * @property {(boolean | "ws" | string | WebSocketServerConfiguration)=} webSocketServer
  * @property {ProxyConfigArray=} proxy
  * @property {(boolean | string | Open | Array<string | Open>)=} open
  * @property {boolean=} setupExitSignals
@@ -656,28 +656,17 @@ class Server {
         /** @type {string} */
         let hostname;
 
-        // SockJS is not supported server mode, so `hostname` and `port` can't specified, let's ignore them
-        const isSockJSType = webSocketServer.type === "sockjs";
         const isWebSocketServerHostDefined =
           typeof webSocketServer.options.host !== "undefined";
         const isWebSocketServerPortDefined =
           typeof webSocketServer.options.port !== "undefined";
 
-        if (
-          isSockJSType &&
-          (isWebSocketServerHostDefined || isWebSocketServerPortDefined)
-        ) {
-          this.logger.warn(
-            "SockJS only supports client mode and does not support custom hostname and port options. Please consider using 'ws' if you need to customize these options.",
-          );
-        }
-
         // We are proxying dev server and need to specify custom `hostname`
         if (typeof webSocketURL.hostname !== "undefined") {
           hostname = webSocketURL.hostname;
         }
         // Web socket server works on custom `hostname`, only for `ws` because `sock-js` is not support custom `hostname`
-        else if (isWebSocketServerHostDefined && !isSockJSType) {
+        else if (isWebSocketServerHostDefined) {
           hostname = webSocketServer.options.host;
         }
         // The `host` option is specified
@@ -699,7 +688,7 @@ class Server {
           port = webSocketURL.port;
         }
         // Web socket server works on custom `port`, only for `ws` because `sock-js` is not support custom `port`
-        else if (isWebSocketServerPortDefined && !isSockJSType) {
+        else if (isWebSocketServerPortDefined) {
           port = webSocketServer.options.port;
         }
         // The `port` option is specified
@@ -1542,9 +1531,7 @@ class Server {
         (this.options.webSocketServer).type
       ) === "string" &&
       // @ts-expect-error
-      (this.options.webSocketServer.type === "ws" ||
-        /** @type {WebSocketServerConfiguration} */
-        (this.options.webSocketServer).type === "sockjs");
+      this.options.webSocketServer.type === "ws";
 
     let clientTransport;
 
@@ -1571,12 +1558,8 @@ class Server {
 
     switch (typeof clientTransport) {
       case "string":
-        // could be 'sockjs', 'ws', or a path that should be required
-        if (clientTransport === "sockjs") {
-          clientImplementation = require.resolve(
-            "../client/clients/SockJSClient",
-          );
-        } else if (clientTransport === "ws") {
+        // could be 'ws', or a path that should be required
+        if (clientTransport === "ws") {
           clientImplementation = require.resolve(
             "../client/clients/WebSocketClient",
           );
@@ -1598,7 +1581,7 @@ class Server {
           !isKnownWebSocketServerImplementation
             ? "When you use custom web socket implementation you must explicitly specify client.webSocketTransport. "
             : ""
-        }client.webSocketTransport must be a string denoting a default implementation (e.g. 'sockjs', 'ws') or a full path to a JS file via require.resolve(...) which exports a class `,
+        }client.webSocketTransport must be a string denoting a default implementation (e.g. 'ws') or a full path to a JS file via require.resolve(...) which exports a class `,
       );
     }
 
@@ -1621,14 +1604,8 @@ class Server {
       )
     ) {
       case "string":
-        // Could be 'sockjs', in the future 'ws', or a path that should be required
+        // Could be 'ws', or a path that should be required
         if (
-          /** @type {WebSocketServerConfiguration} */ (
-            this.options.webSocketServer
-          ).type === "sockjs"
-        ) {
-          implementation = require("./servers/SockJSServer");
-        } else if (
           /** @type {WebSocketServerConfiguration} */ (
             this.options.webSocketServer
           ).type === "ws"
@@ -1656,7 +1633,7 @@ class Server {
 
     if (!implementationFound) {
       throw new Error(
-        "webSocketServer (webSocketServer.type) must be a string denoting a default implementation (e.g. 'ws', 'sockjs'), a full path to " +
+        "webSocketServer (webSocketServer.type) must be a string denoting a default implementation (e.g. 'ws'), a full path to " +
           "a JS file which exports a class extending BaseServer (webpack-dev-server/lib/servers/BaseServer.js) " +
           "via require.resolve(...), or the class itself which extends BaseServer",
       );
@@ -2047,56 +2024,6 @@ class Server {
       middleware: /** @type {MiddlewareHandler} */ (this.middleware),
     });
 
-    // Should be after `webpack-dev-middleware`, otherwise other middlewares might rewrite response
-    middlewares.push({
-      name: "webpack-dev-server-sockjs-bundle",
-      path: "/__webpack_dev_server__/sockjs.bundle.js",
-      /**
-       * @param {Request} req request
-       * @param {Response} res response
-       * @param {NextFunction} next next function
-       * @returns {void}
-       */
-      middleware: (req, res, next) => {
-        if (req.method !== "GET" && req.method !== "HEAD") {
-          next();
-          return;
-        }
-
-        const clientPath = path.join(
-          __dirname,
-          "..",
-          "client/modules/sockjs-client/index.js",
-        );
-
-        // Express send Etag and other headers by default, so let's keep them for compatibility reasons
-        if (typeof res.sendFile === "function") {
-          res.sendFile(clientPath);
-          return;
-        }
-
-        let stats;
-
-        try {
-          // TODO implement `inputFileSystem.createReadStream` in webpack
-          stats = fs.statSync(clientPath);
-        } catch {
-          next();
-          return;
-        }
-
-        res.setHeader("Content-Type", "application/javascript; charset=UTF-8");
-        res.setHeader("Content-Length", stats.size);
-
-        if (req.method === "HEAD") {
-          res.end();
-          return;
-        }
-
-        fs.createReadStream(clientPath).pipe(res);
-      },
-    });
-
     middlewares.push({
       name: "webpack-dev-server-invalidate",
       path: "/webpack-dev-server/invalidate",
@@ -2659,11 +2586,7 @@ class Server {
           typeof request !== "undefined"
             ? /** @type {{ [key: string]: string | undefined }} */
               (request.headers)
-            : typeof (
-                  /** @type {import("sockjs").Connection} */ (client).headers
-                ) !== "undefined"
-              ? /** @type {import("sockjs").Connection} */ (client).headers
-              : undefined;
+            : undefined;
 
         if (!headers) {
           this.logger.warn(
@@ -3297,8 +3220,7 @@ class Server {
    */
   sendMessage(clients, type, data, params) {
     for (const client of clients) {
-      // `sockjs` uses `1` to indicate client is ready to accept data
-      // `ws` uses `WebSocket.OPEN`, but it is mean `1` too
+      // `ws` uses `WebSocket.OPEN`, which is `1`
       if (client.readyState === 1) {
         client.send(JSON.stringify({ type, data, params }));
       }