Expose Sockjs server/client #1662

EloB · 2019-02-12T18:58:05Z

For Bugs and Features; did you add new tests?

Not yet this is just a draft.

Motivation / Use-Case

Breaking Changes

No

Additional Info

This is just a draft.

webpack.config.js

module.exports = {
  devServer: {
    before(app, server) {
      // Simple logger what clients sends to server
      server.subscribeClientData((data) => console.log(data));
      server.sockWrite(server.sockets, 'custom', 'Send info to client');
    }
  }
};

/some/entry.js

import send from 'webpack-dev-server/client/send';
// To be implemented
import listen from 'webpack-dev-server/client/listen';

const unsubscribe = listen((message) => console.log(message));

send({ hello: 'world' });

alexander-akait

Need tests

alexander-akait

Also will bee great if you create minimum reproducible test repo with this feature (PoC), it is allow to think about how better solve this

EloB · 2019-02-12T19:06:40Z

Also will bee great if you create minimum reproducible test repo with this feature (PoC), it is allow to think about how better solve this

I will add an working example. Just throw this PR together. So I can get feedback :)

Will continue tomorrow! :)

codecov · 2019-02-13T15:58:44Z

Codecov Report

Merging #1662 into master will decrease coverage by 0.89%.
The diff coverage is 14.28%.

@@            Coverage Diff            @@
##           master    #1662     +/-   ##
=========================================
- Coverage   83.76%   82.87%   -0.9%     
=========================================
  Files           8        8             
  Lines         536      543      +7     
  Branches      161      161             
=========================================
+ Hits          449      450      +1     
- Misses         70       76      +6     
  Partials       17       17

Impacted Files	Coverage Δ
lib/Server.js	`77.72% <14.28%> (-1.18%)`	⬇️

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update cb10f83...44bf6d1. Read the comment docs.

EloB · 2019-02-13T15:59:46Z

@evilebottnawi I've updated the PR now with an example but haven't written any tests. If you think this feature belongs in webpack-dev-server I will add them :)

One usecase

Another usecase

Flowchart

To describe my usecase better I develop cross platform for multiple devices. I use the webpack-dev-server while developing because of the live reloading etc. For production I build with webpack.
I'm developing one app but I need adapters for each platform for different things. Each build only contains code for that specific platform. The big headache is testing on multiple devices because I need multiple remotes/keyboards etc. My solution is synchronized keystrokes that is sent out from my laptop to each device to emulate those events on each platform. I've already have that working but it's been a hassle and this PR will simplify those type of devtools for the future.

lib/Server.js

alexander-akait · 2019-02-14T10:08:02Z

client-src/default/socket.js

+    messageQueue.forEach(function dequeue(message) {
+      sock.send(message);
+    });
+    messageQueue = [];


Breaking change for multi compiler compilation

Never remove messages, because you can have two/three/four clients, and some clients can have delay

How do you mean? If you lose connection and reconnect you probably don't want to resend all messages again?

I've added the message queue for messages that are sent before the connection is fully established or else you will get an error from sockjs.

@EloB open two or three browsers and tests how it works, we already do same before and remove this, because it is break situation when you have more then one client (some client can disconnect and connect again)

That initSocket looks really weird in the first place because it's not pure and does side effects on sock in a recursive fashion.

@evilebottnawi Maybe we could rewrite that initSocket to be pure instead?

alexander-akait · 2019-02-14T10:12:12Z

Not sure it is right solution:

import send from 'webpack-dev-server/client/send';
// To be implemented
import listen from 'webpack-dev-server/client/listen';

We should export this function or use window.webpackDevServerSend because now you use not publish api, and files can be moved in other directory in any time.

Maybe we can search other solution for this case? Code really looks very misleading.

/cc @hiroppy what do you think

EloB · 2019-02-14T11:41:05Z

Not sure it is right solution:
import send from 'webpack-dev-server/client/send';
// To be implemented
import listen from 'webpack-dev-server/client/listen';
We should export this function or use window.webpackDevServerSend because now you use not publish api, and files can be moved in other directory in any time.

Maybe we can search other solution for this case? Code really looks very misleading.

/cc @hiroppy what do you think

The reason why I did this is because you use __resourceQuery and if users require webpack-dev-server/client within their app then they might include the client twice. Webpack will see these as two different modules right?

webpack-dev-server/client?localhost:8080
webpack-dev-server/client

EloB · 2019-02-15T10:55:17Z

More feedback? :)

Sorry for pushing but really want this feature :)

hiroppy · 2019-02-15T13:32:43Z

I like export style.
How about putting(or create) it in index.js?
It can resolve files can be moved in other directory in any time.

EloB · 2019-02-15T13:33:59Z

I like export style.
How about putting(or create) it in index.js?
It can resolve files can be moved in other directory in any time.

@hiroppy So you use it like this in your app/devtools?

import { send, listen } from 'webpack-dev-server';

My concern about that is that webpack-dev-server main file is lib/Server.js and it's es6 code and won't work good with old browsers. It's pretty common to ignore node_modules (official documentation also exclude node_modules) and then that file won't be transpiled and finding these issues can take awhile... Depending on your environment working on...
https://webpack.js.org/loaders/babel-loader/#usage

That was one of the reason why I wrote send/listen with es5 code.

EloB · 2019-02-25T09:49:28Z

I'm blocked the moment and in need some feedback on my questions :)

EloB · 2019-03-01T12:58:28Z

I'm sorry for pushing but I really want this feature. Please give me more feedback so I continue working with this :)

alexander-akait · 2019-03-04T08:09:32Z

/cc @hiroppy

hiroppy · 2019-03-05T21:40:55Z

@EloB Sorry for late to my reply. I do not think that lib/Server.js(main) will be used at the frontend(browsers) because it uses node.js native modules like fs, path.
So concerning the rewrite to ES2015 is no problem.

BTW, I also apologize for having suggested without thinking about lib/Server.js is using node.js native modules.

I think this solution is good.

#1662 (comment)

alexander-akait · 2019-03-06T09:26:06Z

/cc @EloB we should implement this for all clients https://github.com/webpack/webpack-dev-server/tree/master/client-src

EloB · 2019-03-06T13:13:48Z

@hiroppy another solution is to add another file called for instance browser.js and add client methods there ("browser": "./lib/browser.js" to the package.json). I think webpack will resolve that by default for web builds.

Then if something adds like to their entry:

import { send, listen } from 'webpack-dev-server';
// Then ./lib/browser.js will resolve for web builds

EloB · 2019-03-12T11:59:08Z

I been a bit inactive. This is still on my agenda to complete but have a lot to do at the moment.

EloB · 2019-05-10T11:22:34Z

Still on my agenda but no time atm.

alexander-akait · 2019-05-10T13:32:17Z

Need rebase

alexander-akait · 2019-05-27T11:27:20Z

Close in favor #1860, sorry for delay, it will be implemented in next major release

EloB · 2020-06-24T17:01:22Z

@evilebottnawi Is there any example how to make something like this with the solution you guys went with?

alexander-akait · 2020-06-24T17:12:37Z

@EloB sorry, lost the idea, what you want to achieve?

EloB · 2020-06-24T18:01:57Z

@evilebottnawi Be able to use the websocket within webpack dev server to send and receive data. Everything is already well described in this PR comments. There is also example in the PR and images showing it. #1662 (comment)

alexander-akait · 2020-06-29T11:52:38Z

With v4 you can do it

EloB · 2020-06-29T13:01:02Z

Can you pinpoint me in a direction?

alexander-akait · 2020-06-29T13:39:29Z

It is not fully implemented yet, feel free to ping me when we do stable release and I will help you

Initial code

3997b08

EloB requested review from alexander-akait and michael-ciniawsky as code owners February 12, 2019 18:58

alexander-akait requested changes Feb 12, 2019

View reviewed changes

alexander-akait reviewed Feb 12, 2019

View reviewed changes

Added example

190b0fb

alexander-akait reviewed Feb 14, 2019

View reviewed changes

lib/Server.js Outdated Show resolved Hide resolved

alexander-akait reviewed Feb 14, 2019

View reviewed changes

lib/Server.js Outdated Show resolved Hide resolved

alexander-akait reviewed Feb 14, 2019

View reviewed changes

Changed event name

db7b36f

Updated subscribeClientData

15cbe3c

Merge branch 'master' into feature/extended-sockjs

44bf6d1

EloB requested a review from hiroppy as a code owner March 1, 2019 12:56

alexander-akait closed this May 27, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Expose Sockjs server/client #1662

Expose Sockjs server/client #1662

EloB commented Feb 12, 2019 •

edited

Loading

alexander-akait left a comment

alexander-akait left a comment •

edited

Loading

EloB commented Feb 12, 2019 •

edited

Loading

codecov bot commented Feb 13, 2019 •

edited

Loading

EloB commented Feb 13, 2019 •

edited

Loading

alexander-akait Feb 14, 2019

alexander-akait Feb 14, 2019

EloB Feb 14, 2019

EloB Feb 14, 2019

alexander-akait Feb 14, 2019

EloB Feb 14, 2019 •

edited

Loading

EloB Feb 14, 2019 •

edited

Loading

alexander-akait commented Feb 14, 2019

EloB commented Feb 14, 2019 •

edited

Loading

EloB commented Feb 15, 2019 •

edited

Loading

hiroppy commented Feb 15, 2019

EloB commented Feb 15, 2019 •

edited

Loading

EloB commented Feb 25, 2019 •

edited

Loading

EloB commented Mar 1, 2019

alexander-akait commented Mar 4, 2019

hiroppy commented Mar 5, 2019 •

edited

Loading

alexander-akait commented Mar 6, 2019

EloB commented Mar 6, 2019 •

edited

Loading

EloB commented Mar 12, 2019

EloB commented May 10, 2019

alexander-akait commented May 10, 2019

alexander-akait commented May 27, 2019

EloB commented Jun 24, 2020

alexander-akait commented Jun 24, 2020

EloB commented Jun 24, 2020 •

edited

Loading

alexander-akait commented Jun 29, 2020

EloB commented Jun 29, 2020

alexander-akait commented Jun 29, 2020

Expose Sockjs server/client #1662

Expose Sockjs server/client #1662

Conversation

EloB commented Feb 12, 2019 • edited Loading

For Bugs and Features; did you add new tests?

Motivation / Use-Case

Breaking Changes

Additional Info

alexander-akait left a comment

Choose a reason for hiding this comment

alexander-akait left a comment • edited Loading

Choose a reason for hiding this comment

EloB commented Feb 12, 2019 • edited Loading

codecov bot commented Feb 13, 2019 • edited Loading

Codecov Report

EloB commented Feb 13, 2019 • edited Loading

One usecase

Another usecase

Flowchart

alexander-akait Feb 14, 2019

Choose a reason for hiding this comment

alexander-akait Feb 14, 2019

Choose a reason for hiding this comment

EloB Feb 14, 2019

Choose a reason for hiding this comment

EloB Feb 14, 2019

Choose a reason for hiding this comment

alexander-akait Feb 14, 2019

Choose a reason for hiding this comment

EloB Feb 14, 2019 • edited Loading

Choose a reason for hiding this comment

EloB Feb 14, 2019 • edited Loading

Choose a reason for hiding this comment

alexander-akait commented Feb 14, 2019

EloB commented Feb 14, 2019 • edited Loading

EloB commented Feb 15, 2019 • edited Loading

hiroppy commented Feb 15, 2019

EloB commented Feb 15, 2019 • edited Loading

EloB commented Feb 25, 2019 • edited Loading

EloB commented Mar 1, 2019

alexander-akait commented Mar 4, 2019

hiroppy commented Mar 5, 2019 • edited Loading

alexander-akait commented Mar 6, 2019

EloB commented Mar 6, 2019 • edited Loading

EloB commented Mar 12, 2019

EloB commented May 10, 2019

alexander-akait commented May 10, 2019

alexander-akait commented May 27, 2019

EloB commented Jun 24, 2020

alexander-akait commented Jun 24, 2020

EloB commented Jun 24, 2020 • edited Loading

alexander-akait commented Jun 29, 2020

EloB commented Jun 29, 2020

alexander-akait commented Jun 29, 2020

EloB commented Feb 12, 2019 •

edited

Loading

alexander-akait left a comment •

edited

Loading

EloB commented Feb 12, 2019 •

edited

Loading

codecov bot commented Feb 13, 2019 •

edited

Loading

EloB commented Feb 13, 2019 •

edited

Loading

EloB Feb 14, 2019 •

edited

Loading

EloB Feb 14, 2019 •

edited

Loading

EloB commented Feb 14, 2019 •

edited

Loading

EloB commented Feb 15, 2019 •

edited

Loading

EloB commented Feb 15, 2019 •

edited

Loading

EloB commented Feb 25, 2019 •

edited

Loading

hiroppy commented Mar 5, 2019 •

edited

Loading

EloB commented Mar 6, 2019 •

edited

Loading

EloB commented Jun 24, 2020 •

edited

Loading