Feature request to extend use of sockjs

[EloB]

I would like a simple way to communicate between clients and devServer.

By using the devServer.before property. We could do something like:

{
  devServer: {
    before: (app, server) => {
      // If we could add a new event to the server
      server.on(
        'clientSentMessageToWebpackDevServer',
        message => server.sockWrite(server.sockets, 'custom', message)
      );
    }
  }
}

In the code I see that we expose message sent.
https://github.com/webpack/webpack-dev-server/blob/master/client-src/default/index.js#L71

If we could add custom to https://github.com/webpack/webpack-dev-server/blob/master/client-src/default/index.js#L81

Like this:

var onSocketMsg = {
  // ...
  custom: function custom(data) {
    sendMsg('custom', data);
  }
};

Why add this?

In my case I use multi compiler (multiple configs) because I develop to multiple devices. What I'm trying to achieve is development tools when I run webpack-dev-server.

This is how my webpack.config.babel.js looks like

export default (env, argv) => [
  ...devices.map(device => ({
    name: device,
    entry: [`./src/${device}`],
    output: {
      path: path.join(__dirname, 'dist', device),
      publicPath: argv.mode === 'production' ? '' : 'http://${webpackIp}:${webpackPort}/${device}',
    },
    plugins: [
      new HtmlWebpackPlugin({ title: `My app on ${device}` }),
    ],
  })),
  ...(argv.mode === 'production' ? [] : [{
    name: 'Development tools',
    entry: './src/devtools',
    output: {
      publicPath: '/',
    },
    plugins: [
      new HtmlWebpackPlugin({ title: 'Development tools' }),
    ],
  }]),
];

So when I visit for instance http://localhost/ when running webpack-dev-server I see some devtools. I would imagine ./src/devtools to look something like this.

window.addEventListener('message', ({ data }) => {
  if (data.type === 'custom') doSomething(data.data);
});

// If the client script were listening for some message event so we could send info back to devServer
const sendMessageToWebpackDevServer = data => postMessage(
  {
    type: `sendMessageToWebpackDevServer`,
    data,
  },
  '*'
);

The question you might be thinking of is why not add this as a separate solution? It's because of the hassle of trying to figure out where the webpack-dev-server is located on the network. You guys already do that (see link below). Then we can extend webpack-dev-server with even more cool tools/plugins :)

https://github.com/webpack/webpack-dev-server/blob/master/client-src/default/index.js#L34

[alexander-akait]

What is real use case? Why you need send messages? Please provide PoC

[EloB]

My initial use case is that be able to serialize key events on my browser to send to each device and then unserialize the key event on each device to simulate the key event on the device. This feature will only be in development to speed up testing. Webpack and Webpack dev server has been a great tool for me when working cross platform and multiple devices.

Also has some other ideas to be able to send logs/errors to webpack dev server because some devices has really shitty development tools. So I can output that data in my laptop console.

I think there could be multiple new features with this.

[alexander-akait]

@EloB hm, PR welcome 👍

[alexander-akait]

Close in favor #1860, will be implemented for next major release, thanks for issue

[alexander-akait]

As workaround right now you can use own client (or extend our)