紗線升級后 React 中的 Websocket 握手錯誤

Question

在我的反應應用程序中，我使用websocket包（不是socket.io）連接到一些 websockets

 componentDidMount(): void {
    this.settingsSubscription = subscribeToWebsocket("Settings", urls.SETTINGS_WS, handleSettingsMessage);
    this.statusSubscription = subscribeToWebsocket("Status", urls.STATUS_WS, handleStatusMessage);
    this.studyDataSubscription = subscribeToWebsocket("Study Data", urls.STUDY_WS, handleStudyDataMessage);
  }

  subscribeToWebsocket(name, url, messageHandler): W3CWebSocket {
    let subscription = new W3CWebSocket(url);
    subscription.onopen = () => console.log(`WebSocket Client Connected (${name})`);
    subscription.onclose = () => console.log(`WebSocket Client Disconnected (${name})`);
    subscription.onmessage = messageHandler;
    return subscription;
  }

這一直工作正常，實際上仍然可以正常工作，但我也在控制台中收到此錯誤：

WebSocket connection to 'ws://localhost:3000/sockjs-node' failed: 
Error during WebSocket handshake: Unexpected response code: 200

./node_modules/react-dev-utils/webpackHotDevClient.js   @   webpackHotDevClient.js:51
__webpack_require__ @   bootstrap:785
fn  @   bootstrap:150
1   @   helpers.ts:1
__webpack_require__ @   bootstrap:785
checkDeferredModules    @   bootstrap:45
webpackJsonpCallback    @   bootstrap:32
(anonymous) @   index.chunk.js:1

錯誤指向node-modules/react-dev-utils/webpackHotDevClient.js中的這些行，這似乎是罪魁禍首：

// Connect to WebpackDevServer via a socket.
var connection = new WebSocket(
  url.format({
    protocol: 'ws',
    hostname: window.location.hostname,
    port: window.location.port,
    // Hardcoded in WebpackDevServer
    pathname: '/sockjs-node',
  })
);

我剛剛運行了yarn upgrade --latest --exact所以我猜這與它有關。

特別是因為我們使用控制台向客戶端演示，我真的很想擺脫這個錯誤消息。 謝謝！

Answer 1

我們在彈出的 CRA 項目中遇到了同樣的問題。

我的解決方案是手動更新config/webpackDevServer.config.js配置文件。

恕我直言，這個變化是我們的 livereload 再次工作的原因：

     hot: true,
+    // Use 'ws' instead of 'sockjs-node' on server since we're using native
+    // websockets in `webpackHotDevClient`.
+    transportMode: "ws",
+    // Prevent a WS client from getting injected as we're already including
+    // `webpackHotDevClient`.
+    injectClient: false,
     // It is important to tell WebpackDevServer to use the same "root" path

Answer 2

在我的本地主機上開發 azure 門戶擴展時，我遇到了同樣的問題。 我將“ws”更改為“wss”並且它起作用了。