feat: switch default transportMode to ws (#2531)

BREAKING CHANGE: switch default transportMode to ws

Author: knagaitsev

client-src/default/socket.js

@@ -5,18 +5,13 @@
   camelcase
 */
 
-// this SockJSClient is here as a default fallback, in case inline mode
-// is off or the client is not injected. This will be switched to
-// WebsocketClient when it becomes the default
-
-// important: the path to SockJSClient here is made to work in the 'client'
-// directory, but is updated via the webpack compilation when compiled from
-// the 'client-src' directory
+// this WebsocketClient is here as a default fallback,
+//  in case the client is not injected
 const Client =
   typeof __webpack_dev_server_client__ !== 'undefined'
     ? __webpack_dev_server_client__
     : // eslint-disable-next-line import/no-unresolved
-      require('./clients/SockJSClient');
+      require('./clients/WebsocketClient');
 
 let retries = 0;
 let client = null;

client-src/default/utils/createSocketUrl.js

@@ -75,7 +75,7 @@ function getSocketUrl(urlParts, loc) {
   // resourceQuery, so we need to fall back to the default if
   // they are not provided
   const sockHost = query.sockHost || hostname;
-  const sockPath = query.sockPath || '/sockjs-node';
+  const sockPath = query.sockPath || '/ws';
   let sockPort = query.sockPort || port;
 
   if (sockPort === 'location') {

client-src/default/webpack.config.js

@@ -19,12 +19,12 @@ module.exports = {
   },
   plugins: [
     new webpack.NormalModuleReplacementPlugin(
-      /^\.\/clients\/SockJSClient$/,
+      /^\.\/clients\/WebsocketClient$/,
       (resource) => {
         if (resource.context.startsWith(process.cwd())) {
           resource.request = resource.request.replace(
-            /^\.\/clients\/SockJSClient$/,
-            '../clients/SockJSClient'
+            /^\.\/clients\/WebsocketClient$/,
+            '../clients/WebsocketClient'
           );
         }
       }

examples/cli/public-protocol/README.md

@@ -13,6 +13,6 @@ You're now able to explicitly define the protocol used with the `public` option
 
 The script should open `http://localhost:8080/` in your default browser.
 
-You should see a failed attempt to establish a connection to `/sockjs-node`
+You should see a failed attempt to establish a connection to `/ws`
 via the explicitly defined `https://localhost:8080`. This fails of course since
 we're not hosting https.

lib/Server.js

@@ -95,7 +95,7 @@ class Server {
     this.sockPath = `/${
       this.options.sockPath
         ? this.options.sockPath.replace(/^\/|\/$/g, '')
-        : 'sockjs-node'
+        : 'ws'
     }`;
 
     if (this.progress) {

lib/utils/getSocketServerImplementation.js

@@ -30,7 +30,7 @@ function getSocketServerImplementation(options) {
 
   if (!serverImplFound) {
     throw new Error(
-      "transportMode.server must be a string denoting a default implementation (e.g. 'sockjs', 'ws'), a full path to " +
+      "transportMode.server must be a string denoting a default implementation (e.g. 'ws', 'sockjs'), a full path to " +
         'a JS file which exports a class extending BaseServer (webpack-dev-server/lib/servers/BaseServer) ' +
         'via require.resolve(...), or the class itself which extends BaseServer'
     );

lib/utils/normalizeOptions.js

@@ -15,8 +15,8 @@ function normalizeOptions(compiler, options) {
   // normalize transportMode option
   if (options.transportMode === undefined) {
     options.transportMode = {
-      server: 'sockjs',
-      client: 'sockjs',
+      server: 'ws',
+      client: 'ws',
     };
   } else {
     switch (typeof options.transportMode) {
@@ -28,8 +28,8 @@ function normalizeOptions(compiler, options) {
         break;
       // if not a string, it is an object
       default:
-        options.transportMode.server = options.transportMode.server || 'sockjs';
-        options.transportMode.client = options.transportMode.client || 'sockjs';
+        options.transportMode.server = options.transportMode.server || 'ws';
+        options.transportMode.client = options.transportMode.client || 'ws';
     }
   }
 

test/client/__snapshots__/socket-helper.test.js.snap

@@ -1,36 +1,36 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`socket should default to SockJSClient when no __webpack_dev_server_client__ set 1`] = `
+exports[`socket should default to WebsocketClient when no __webpack_dev_server_client__ set 1`] = `
 Array [
   "my.url",
 ]
 `;
 
-exports[`socket should default to SockJSClient when no __webpack_dev_server_client__ set 2`] = `
+exports[`socket should default to WebsocketClient when no __webpack_dev_server_client__ set 2`] = `
 Array [
   Array [
     [Function],
   ],
 ]
 `;
 
-exports[`socket should default to SockJSClient when no __webpack_dev_server_client__ set 3`] = `
+exports[`socket should default to WebsocketClient when no __webpack_dev_server_client__ set 3`] = `
 Array [
   Array [
     [Function],
   ],
 ]
 `;
 
-exports[`socket should default to SockJSClient when no __webpack_dev_server_client__ set 4`] = `
+exports[`socket should default to WebsocketClient when no __webpack_dev_server_client__ set 4`] = `
 Array [
   Array [
     [Function],
   ],
 ]
 `;
 
-exports[`socket should default to SockJSClient when no __webpack_dev_server_client__ set 5`] = `
+exports[`socket should default to WebsocketClient when no __webpack_dev_server_client__ set 5`] = `
 Array [
   Array [
     "hello world",

test/client/clients/SockJSClient.test.js

@@ -21,7 +21,7 @@ describe('SockJSClient', () => {
     listeningApp.listen(port, 'localhost', () => {
       socketServer = sockjs.createServer();
       socketServer.installHandlers(listeningApp, {
-        prefix: '/sockjs-node',
+        prefix: '/ws',
       });
       done();
     });
@@ -41,7 +41,7 @@ describe('SockJSClient', () => {
         }, 1000);
       });
 
-      const client = new SockJSClient(`http://localhost:${port}/sockjs-node`);
+      const client = new SockJSClient(`http://localhost:${port}/ws`);
       const data = [];
 
       client.onOpen(() => {

test/client/socket-helper.test.js

@@ -6,17 +6,17 @@ describe('socket', () => {
     jest.resetModules();
   });
 
-  it('should default to SockJSClient when no __webpack_dev_server_client__ set', () => {
-    jest.mock('../../client/clients/SockJSClient');
+  it('should default to WebsocketClient when no __webpack_dev_server_client__ set', () => {
+    jest.mock('../../client/clients/WebsocketClient');
     const socket = require('../../client/socket');
-    const SockJSClient = require('../../client/clients/SockJSClient');
+    const WebsocketClient = require('../../client/clients/WebsocketClient');
 
     const mockHandler = jest.fn();
     socket('my.url', {
       example: mockHandler,
     });
 
-    const mockClientInstance = SockJSClient.mock.instances[0];
+    const mockClientInstance = WebsocketClient.mock.instances[0];
 
     // this simulates receiving a message from the server and passing it
     // along to the callback of onMessage
@@ -27,17 +27,17 @@ describe('socket', () => {
       })
     );
 
-    expect(SockJSClient.mock.calls[0]).toMatchSnapshot();
+    expect(WebsocketClient.mock.calls[0]).toMatchSnapshot();
     expect(mockClientInstance.onOpen.mock.calls).toMatchSnapshot();
     expect(mockClientInstance.onClose.mock.calls).toMatchSnapshot();
     expect(mockClientInstance.onMessage.mock.calls).toMatchSnapshot();
     expect(mockHandler.mock.calls).toMatchSnapshot();
   });
 
   it('should use __webpack_dev_server_client__ when set', () => {
-    jest.mock('../../client/clients/SockJSClient');
+    jest.mock('../../client/clients/WebsocketClient');
     const socket = require('../../client/socket');
-    global.__webpack_dev_server_client__ = require('../../client/clients/SockJSClient');
+    global.__webpack_dev_server_client__ = require('../../client/clients/WebsocketClient');
 
     const mockHandler = jest.fn();
     socket('my.url', {

test/client/utils/__snapshots__/createSocketUrl.test.js.snap

@@ -1,41 +1,41 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`createSocketUrl should return the url when __resourceQuery is ?test 1`] = `"/sockjs-node"`;
+exports[`createSocketUrl should return the url when __resourceQuery is ?test 1`] = `"/ws"`;
 
-exports[`createSocketUrl should return the url when __resourceQuery is http://0.0.0.0 1`] = `"http://localhost/sockjs-node"`;
+exports[`createSocketUrl should return the url when __resourceQuery is http://0.0.0.0 1`] = `"http://localhost/ws"`;
 
-exports[`createSocketUrl should return the url when __resourceQuery is http://127.0.0.1 1`] = `"http://127.0.0.1/sockjs-node"`;
+exports[`createSocketUrl should return the url when __resourceQuery is http://127.0.0.1 1`] = `"http://127.0.0.1/ws"`;
 
-exports[`createSocketUrl should return the url when __resourceQuery is http://user:pass@[::]:8080 1`] = `"http://user:pass@localhost:8080/sockjs-node"`;
+exports[`createSocketUrl should return the url when __resourceQuery is http://user:pass@[::]:8080 1`] = `"http://user:pass@localhost:8080/ws"`;
 
-exports[`createSocketUrl should return the url when __resourceQuery is http://user:password@localhost/ 1`] = `"http://user:password@localhost/sockjs-node"`;
+exports[`createSocketUrl should return the url when __resourceQuery is http://user:password@localhost/ 1`] = `"http://user:password@localhost/ws"`;
 
-exports[`createSocketUrl should return the url when __resourceQuery is https://example.com 1`] = `"https://example.com/sockjs-node"`;
+exports[`createSocketUrl should return the url when __resourceQuery is https://example.com 1`] = `"https://example.com/ws"`;
 
-exports[`createSocketUrl should return the url when __resourceQuery is https://example.com/path 1`] = `"https://example.com/sockjs-node"`;
+exports[`createSocketUrl should return the url when __resourceQuery is https://example.com/path 1`] = `"https://example.com/ws"`;
 
-exports[`createSocketUrl should return the url when __resourceQuery is https://example.com/path/foo.js 1`] = `"https://example.com/sockjs-node"`;
+exports[`createSocketUrl should return the url when __resourceQuery is https://example.com/path/foo.js 1`] = `"https://example.com/ws"`;
 
-exports[`createSocketUrl should return the url when __resourceQuery is https://localhost:123 1`] = `"https://localhost:123/sockjs-node"`;
+exports[`createSocketUrl should return the url when __resourceQuery is https://localhost:123 1`] = `"https://localhost:123/ws"`;
 
-exports[`createSocketUrl should return the url when __resourceQuery is undefined 1`] = `"/sockjs-node"`;
+exports[`createSocketUrl should return the url when __resourceQuery is undefined 1`] = `"/ws"`;
 
-exports[`createSocketUrl should return the url when the current script source is ?test 1`] = `"/sockjs-node"`;
+exports[`createSocketUrl should return the url when the current script source is ?test 1`] = `"/ws"`;
 
-exports[`createSocketUrl should return the url when the current script source is http://0.0.0.0 1`] = `"http://localhost/sockjs-node"`;
+exports[`createSocketUrl should return the url when the current script source is http://0.0.0.0 1`] = `"http://localhost/ws"`;
 
-exports[`createSocketUrl should return the url when the current script source is http://127.0.0.1 1`] = `"http://127.0.0.1/sockjs-node"`;
+exports[`createSocketUrl should return the url when the current script source is http://127.0.0.1 1`] = `"http://127.0.0.1/ws"`;
 
-exports[`createSocketUrl should return the url when the current script source is http://user:pass@[::]:8080 1`] = `"http://user:pass@localhost:8080/sockjs-node"`;
+exports[`createSocketUrl should return the url when the current script source is http://user:pass@[::]:8080 1`] = `"http://user:pass@localhost:8080/ws"`;
 
-exports[`createSocketUrl should return the url when the current script source is http://user:password@localhost/ 1`] = `"http://user:password@localhost/sockjs-node"`;
+exports[`createSocketUrl should return the url when the current script source is http://user:password@localhost/ 1`] = `"http://user:password@localhost/ws"`;
 
-exports[`createSocketUrl should return the url when the current script source is https://example.com 1`] = `"https://example.com/sockjs-node"`;
+exports[`createSocketUrl should return the url when the current script source is https://example.com 1`] = `"https://example.com/ws"`;
 
-exports[`createSocketUrl should return the url when the current script source is https://example.com/path 1`] = `"https://example.com/sockjs-node"`;
+exports[`createSocketUrl should return the url when the current script source is https://example.com/path 1`] = `"https://example.com/ws"`;
 
-exports[`createSocketUrl should return the url when the current script source is https://example.com/path/foo.js 1`] = `"https://example.com/sockjs-node"`;
+exports[`createSocketUrl should return the url when the current script source is https://example.com/path/foo.js 1`] = `"https://example.com/ws"`;
 
-exports[`createSocketUrl should return the url when the current script source is https://localhost:123 1`] = `"https://localhost:123/sockjs-node"`;
+exports[`createSocketUrl should return the url when the current script source is https://localhost:123 1`] = `"https://localhost:123/ws"`;
 
-exports[`createSocketUrl should return the url when the current script source is undefined 1`] = `"/sockjs-node"`;
+exports[`createSocketUrl should return the url when the current script source is undefined 1`] = `"/ws"`;

test/client/utils/createSocketUrl.test.js

@@ -41,36 +41,12 @@ describe('createSocketUrl', () => {
 
   const samples2 = [
     // script source,       location,                output socket URL
-    [
-      'http://example.com',
-      'https://something.com',
-      'https://example.com/sockjs-node',
-    ],
-    [
-      'http://127.0.0.1',
-      'https://something.com',
-      'http://127.0.0.1/sockjs-node',
-    ],
-    [
-      'http://0.0.0.0',
-      'https://something.com',
-      'https://something.com/sockjs-node',
-    ],
-    [
-      'http://0.0.0.0',
-      'http://something.com',
-      'http://something.com/sockjs-node',
-    ],
-    [
-      'http://example.com',
-      'http://something.com',
-      'http://example.com/sockjs-node',
-    ],
-    [
-      'https://example.com',
-      'http://something.com',
-      'https://example.com/sockjs-node',
-    ],
+    ['http://example.com', 'https://something.com', 'https://example.com/ws'],
+    ['http://127.0.0.1', 'https://something.com', 'http://127.0.0.1/ws'],
+    ['http://0.0.0.0', 'https://something.com', 'https://something.com/ws'],
+    ['http://0.0.0.0', 'http://something.com', 'http://something.com/ws'],
+    ['http://example.com', 'http://something.com', 'http://example.com/ws'],
+    ['https://example.com', 'http://something.com', 'https://example.com/ws'],
   ];
 
   samples2.forEach(([scriptSrc, loc, expected]) => {
@@ -91,45 +67,21 @@ describe('createSocketUrl', () => {
 
   const samples3 = [
     // script source,       location,                output socket URL
-    [
-      '?http://example.com',
-      'https://something.com',
-      'https://example.com/sockjs-node',
-    ],
-    [
-      '?http://127.0.0.1',
-      'https://something.com',
-      'http://127.0.0.1/sockjs-node',
-    ],
-    [
-      '?http://0.0.0.0',
-      'https://something.com',
-      'https://something.com/sockjs-node',
-    ],
-    [
-      '?http://0.0.0.0',
-      'http://something.com',
-      'http://something.com/sockjs-node',
-    ],
-    [
-      '?http://example.com',
-      'http://something.com',
-      'http://example.com/sockjs-node',
-    ],
-    [
-      '?https://example.com',
-      'http://something.com',
-      'https://example.com/sockjs-node',
-    ],
+    ['?http://example.com', 'https://something.com', 'https://example.com/ws'],
+    ['?http://127.0.0.1', 'https://something.com', 'http://127.0.0.1/ws'],
+    ['?http://0.0.0.0', 'https://something.com', 'https://something.com/ws'],
+    ['?http://0.0.0.0', 'http://something.com', 'http://something.com/ws'],
+    ['?http://example.com', 'http://something.com', 'http://example.com/ws'],
+    ['?https://example.com', 'http://something.com', 'https://example.com/ws'],
     [
       '?https://example.com?sockHost=asdf',
       'http://something.com',
-      'https://asdf/sockjs-node',
+      'https://asdf/ws',
     ],
     [
       '?https://example.com?sockPort=34',
       'http://something.com',
-      'https://example.com:34/sockjs-node',
+      'https://example.com:34/ws',
     ],
     [
       '?https://example.com?sockPath=xxx',
@@ -139,17 +91,17 @@ describe('createSocketUrl', () => {
     [
       '?http://0.0.0.0:8096&sockPort=8097',
       'http://localhost',
-      'http://localhost:8097/sockjs-node',
+      'http://localhost:8097/ws',
     ],
     [
       '?http://example.com:8096&sockPort=location',
       'http://something.com',
-      'http://example.com/sockjs-node',
+      'http://example.com/ws',
     ],
     [
       '?http://0.0.0.0:8096&sockPort=location',
       'http://localhost:3000',
-      'http://localhost:3000/sockjs-node',
+      'http://localhost:3000/ws',
     ],
   ];
   samples3.forEach(([scriptSrc, loc, expected]) => {

test/e2e/Client.test.js

@@ -23,13 +23,13 @@ const cssFilePath = resolve(__dirname, '../fixtures/reload-config/main.css');
 describe('reload', () => {
   const modes = [
     {
-      title: 'hot with default transportMode.client (sockjs)',
+      title: 'hot with default transportMode.client (ws)',
       shouldRefresh: false,
     },
     {
-      title: 'hot with transportMode.client ws',
+      title: 'hot with transportMode.client sockjs',
       options: {
-        transportMode: 'ws',
+        transportMode: 'sockjs',
       },
       shouldRefresh: false,
     },