Possible fix for webpackHotDevClient disconnecting from server.

Hello I would like to submit a fix for the issue people are having with the websocket in webpackHotDevClient.js disconnecting from the server. The websocket is timing out after some time, so we simply ping the server periodically to prevent it from timing out. Here is the code I’ve been using.

// Ping the server to prevent the client from disconnecting
var ping = function() {
  if (connection && (connection.readyState === connection.OPEN)) {
    connection.send("ping");
    setTimeout(ping, 3000);
  }
};

connection.onopen = function() {
  if (typeof console !== 'undefined' && typeof console.info === 'function') {
    console.info(
      'The development server has connected.'
    );
  }

  ping();
};

I have a branch ready here. I can submit a PR. https://github.com/vibelife/create-react-app/blob/master/packages/react-dev-utils/webpackHotDevClient.js#L85

[ianschmitz]

We upgraded to the WS implementation to fix some other issues, so i doubt we’ll be going back to the legacy sockjs implementation as WS is the path forward. If webpack-dev-server isn’t responsive we can potentially patch things up in CRA to help.

I created an upstream issue at https://github.com/webpack/webpack-dev-server/issues/2403.

[drather19]

I am experiencing the same issue. If I don’t make any code edits, the dev server web socket connection times out after 5 minutes. Is this related to the switch to native ws transport from sockjs done in https://github.com/facebook/create-react-app/pull/7988?