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', {