feat(experimentally): websocket client implementation (#2058)

Author: knagaitsev

client-src/clients/WebsocketClient.js

@@ -1,5 +1,34 @@
 'use strict';
 
+/* global WebSocket */
+
+/* eslint-disable
+  no-unused-vars
+*/
 const BaseClient = require('./BaseClient');
 
-module.exports = class WebsocketClient extends BaseClient {};
+module.exports = class WebsocketClient extends BaseClient {
+  constructor(url) {
+    super();
+    this.client = new WebSocket(url.replace(/^http/, 'ws'));
+  }
+
+  static getClientPath(options) {
+    return require.resolve('./WebsocketClient');
+  }
+
+  onOpen(f) {
+    this.client.onopen = f;
+  }
+
+  onClose(f) {
+    this.client.onclose = f;
+  }
+
+  // call f with the message string as the first argument
+  onMessage(f) {
+    this.client.onmessage = (e) => {
+      f(e.data);
+    };
+  }
+};

package.json

@@ -66,6 +66,7 @@
     "url": "^0.11.0",
     "webpack-dev-middleware": "^3.7.0",
     "webpack-log": "^2.0.0",
+    "ws": "^6.2.1",
     "yargs": "12.0.5"
   },
   "devDependencies": {
@@ -107,8 +108,7 @@
     "tcp-port-used": "^1.0.1",
     "url-loader": "^1.1.2",
     "webpack": "^4.35.0",
-    "webpack-cli": "^3.3.5",
-    "ws": "^6.2.1"
+    "webpack-cli": "^3.3.5"
   },
   "peerDependencies": {
     "webpack": "^4.0.0"

test/client/clients/WebsocketClient.test.js

@@ -0,0 +1,62 @@
+'use strict';
+
+const http = require('http');
+const express = require('express');
+const ws = require('ws');
+const WebsocketClient = require('../../../client-src/clients/WebsocketClient');
+const port = require('../../ports-map').WebsocketClient;
+
+describe('WebsocketClient', () => {
+  let socketServer;
+  let listeningApp;
+
+  beforeAll((done) => {
+    // eslint-disable-next-line new-cap
+    const app = new express();
+
+    listeningApp = http.createServer(app);
+    listeningApp.listen(port, 'localhost', () => {
+      socketServer = new ws.Server({
+        server: listeningApp,
+        path: '/ws-server',
+      });
+      done();
+    });
+  });
+
+  describe('client', () => {
+    it('should open, receive message, and close', (done) => {
+      socketServer.on('connection', (connection) => {
+        connection.send('hello world');
+
+        setTimeout(() => {
+          connection.close();
+        }, 1000);
+      });
+
+      const client = new WebsocketClient(`http://localhost:${port}/ws-server`);
+      const data = [];
+
+      client.onOpen(() => {
+        data.push('open');
+      });
+      client.onClose(() => {
+        data.push('close');
+      });
+      client.onMessage((msg) => {
+        data.push(msg);
+      });
+
+      setTimeout(() => {
+        expect(data).toMatchSnapshot();
+        done();
+      }, 3000);
+    });
+  });
+
+  afterAll((done) => {
+    listeningApp.close(() => {
+      done();
+    });
+  });
+});

test/client/clients/__snapshots__/WebsocketClient.test.js.snap

@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`WebsocketClient client should open, receive message, and close 1`] = `
+Array [
+  "open",
+  "hello world",
+  "close",
+]
+`;

test/ports-map.js

@@ -35,6 +35,7 @@ const portsList = {
   'sockPath-option': 1,
   'stats-option': 1,
   ProvidePlugin: 1,
+  WebsocketClient: 1,
 };
 
 let startPort = 8079;