Expose Sockjs server/client

client-src/default/index.js

@@ -177,6 +177,9 @@ const onSocketMsg = {
     log.error('[WDS] Disconnected!');
     sendMsg('Close');
   },
+  custom(data) {
+    sendMsg('custom', data);
+  },
 };
 
 let hostname = urlParts.hostname;
@@ -218,7 +221,13 @@ const socketUrl = url.format({
       : querystring.parse(urlParts.path).sockPath || urlParts.path,
 });
 
-socket(socketUrl, onSocketMsg);
+const send = socket(socketUrl, onSocketMsg);
+
+self.addEventListener('message', (message) => {
+  if (message.data.type === 'sendWebpackDevServer') {
+    send(message.data.data);
+  }
+});
 
 let isUnloading = false;
 self.addEventListener('beforeunload', () => {

client-src/default/listen.js

@@ -0,0 +1,20 @@
+'use strict';
+
+/* global __resourceQuery WorkerGlobalScope self */
+
+function listen(callback, eventName = 'custom') {
+  const type = `webpack${eventName}`;
+
+  function handle(message) {
+    if (message.data == null || message.data.type !== type) return;
+    callback(message.data);
+  }
+
+  self.addEventListener('message', handle);
+
+  return function unsubscribe() {
+    self.removeEventListener('message', handle);
+  };
+}
+
+module.exports = listen;

client-src/default/send.js

@@ -0,0 +1,21 @@
+'use strict';
+
+/* global WorkerGlobalScope self */
+
+function sendWebpackDevServer(data) {
+  if (
+    typeof self !== 'undefined' &&
+    (typeof WorkerGlobalScope === 'undefined' ||
+      !(self instanceof WorkerGlobalScope))
+  ) {
+    self.postMessage(
+      {
+        type: 'sendWebpackDevServer',
+        data: JSON.stringify(data),
+      },
+      '*'
+    );
+  }
+}
+
+module.exports = sendWebpackDevServer;

client-src/default/socket.js

@@ -4,11 +4,21 @@ const SockJS = require('sockjs-client/dist/sockjs');
 
 let retries = 0;
 let sock = null;
+let messageQueue = [];
 
-const socket = function initSocket(url, handlers) {
+function send(message) {
+  if (sock.readyState === SockJS.OPEN) return sock.send(message);
+  messageQueue.push(message);
+}
+
+const socket = function initSocket(url, handlers, messages) {
   sock = new SockJS(url);
 
   sock.onopen = function onopen() {
+    messageQueue.forEach(function dequeue(message) {
+      sock.send(message);
+    });
+    messageQueue = [];
     retries = 0;
   };
 
@@ -29,7 +39,7 @@ const socket = function initSocket(url, handlers) {
       retries += 1;
 
       setTimeout(() => {
-        socket(url, handlers);
+        socket(url, handlers, messages);
       }, retryInMs);
     }
   };
@@ -41,6 +51,8 @@ const socket = function initSocket(url, handlers) {
       handlers[msg.type](msg.data);
     }
   };
+
+  return send;
 };
 
 module.exports = socket;

examples/cli/advanced-sockjs/README.md

@@ -0,0 +1,15 @@
+# Advanced SockJS use
+
+You can now extend the functionality of the SockJS with your custom needs.
+
+To run this example, run this command in your console or terminal:
+
+```console
+npm run webpack-dev-server -- --advanced-sockjs
+```
+
+## What Should Happen
+
+When you visit http://localhost:8080/ then it will automatically send any javascript errors to the webpack-dev-server.
+
+If you have opened http://localhost:8080/devtools and do keystrokes while you have http://localhost:8080/ running you will see your keystrokes on that page.

examples/cli/advanced-sockjs/app.js

@@ -0,0 +1,29 @@
+'use strict';
+
+const target = document.querySelector('#target');
+
+target.innerHTML = `
+  Open <a href="/devtools" target="_blank">devtools</a> in a new window
+  <div id="keypressed"></div>
+`;
+
+if (process.env.NODE_ENV === 'development') {
+  // Simple example to send uncaught error to webpack-dev-server for logging
+  const send = require('../../../client/send'); // eslint-disable-line global-require
+  window.addEventListener('error', (error) =>
+    send({
+      type: 'log',
+      data: error.message,
+    })
+  );
+
+  // Simple example of outputting of keystrokes from devtools on screen
+  const listen = require('../../../client/listen'); // eslint-disable-line global-require
+  listen((message) => {
+    if (message.data.type === 'keypress') {
+      document.querySelector('#keypressed').innerHTML += message.data.data;
+    }
+  });
+}
+
+throw new Error('Hello world');

examples/cli/advanced-sockjs/devTools.js

@@ -0,0 +1,14 @@
+'use strict';
+
+const send = require('../../../client/send');
+
+const target = document.querySelector('#target');
+
+target.innerHTML = `Click anywhere on this page and then do some keystrokes`;
+
+document.addEventListener('keypress', (event) =>
+  send({
+    type: 'keypress',
+    data: String.fromCharCode(event.which),
+  })
+);

examples/cli/advanced-sockjs/webpack.config.js

@@ -0,0 +1,37 @@
+'use strict';
+
+const { setup } = require('../../util');
+
+const appConfig = setup({
+  name: 'Your app',
+  entry: './app.js',
+});
+Object.assign(appConfig.output, {
+  publicPath: '/',
+});
+
+const devToolsConfig = setup({
+  name: 'Your custom devTools',
+  entry: './devTools.js',
+  devServer: {
+    before: function before(app, server) {
+      server.subscribeClientData(({ message }) => {
+        switch (message.type) {
+          case 'log':
+            return console.log(message.data);
+          case 'keypress':
+            return server.sockWrite(server.sockets, 'custom', message);
+          default:
+        }
+      });
+    },
+  },
+});
+Object.assign(devToolsConfig.output, {
+  path: `${devToolsConfig.output.path}/devtools`,
+  publicPath: '/devtools',
+});
+
+module.exports = function createConfigs(env, argv) {
+  return [].concat(argv.mode === 'production' ? [] : devToolsConfig, appConfig);
+};

examples/util.js

@@ -76,9 +76,9 @@ module.exports = {
 
     if (result.devServer.before) {
       const proxy = result.devServer.before;
-      result.devServer.before = function replace(app) {
-        before(app);
-        proxy(app);
+      result.devServer.before = function replace(app, server) {
+        before(app, server);
+        proxy(app, server);
       };
     } else {
       result.devServer.before = before;

lib/Server.js

@@ -77,6 +77,8 @@ const STATS = {
   errorDetails: false,
 };
 
+const CLIENT_EVENT = 'webpack-dev-server-data';
+
 class Server {
   constructor(compiler, options = {}, _log) {
     this.log = _log || createLogger(options);
@@ -685,6 +687,16 @@ class Server {
     next();
   }
 
+  subscribeClientData(handle) {
+    const { app } = this;
+
+    app.on(CLIENT_EVENT, handle);
+
+    return function unsubscribeClientData() {
+      app.off(CLIENT_EVENT, handle);
+    };
+  }
+
   checkHost(headers) {
     return this.checkHeaders(headers, 'host');
   }
@@ -812,6 +824,13 @@ class Server {
 
         this.sockets.push(connection);
 
+        connection.on('data', (data) =>
+          this.app.emit(CLIENT_EVENT, {
+            socket: connection,
+            message: JSON.parse(data),
+          })
+        );
+
         connection.on('close', () => {
           const idx = this.sockets.indexOf(connection);