上的未知WebSocket (SockJS)

Question

我在谷歌应用引擎上部署了一个在NodeJS上运行的React应用程序，一切都很好。但是，当我加载主页面时，我会得到一个WebSocket错误(握手失败)，该错误发生在15s之后，可能是由于超时。问题是，我根本没有在我的应用程序中使用SockJS，所以我怀疑应用程序引擎会使用它。请注意，此错误在通过HTTP和HTTPS加载时都会发生。它不会破坏任何内容，但用户可以看到浏览器正在等待页面完全加载，这令人烦恼。

为什么要用这个插座？我能关机吗？

下面是错误堆栈：

websocket.js:6 WebSocket connection to 'wss://*****.appspot.com/sockjs-node/514/vrdqxoct/websocket' failed: Error during WebSocket handshake: Unexpected response code: 400
WebSocketBrowserDriver @ websocket.js:6
WebSocketTransport @ websocket.js:32
./node_modules/sockjs-client/lib/main.js.SockJS._connect @ main.js:219
./node_modules/sockjs-client/lib/main.js.SockJS._receiveInfo @ main.js:193
g @ emitter.js:30
./node_modules/sockjs-client/lib/event/emitter.js.EventEmitter.emit @ emitter.js:50
(anonymous) @ info-receiver.js:67
g @ emitter.js:30
./node_modules/sockjs-client/lib/event/emitter.js.EventEmitter.emit @ emitter.js:50
(anonymous) @ info-ajax.js:37
g @ emitter.js:30
./node_modules/sockjs-client/lib/event/emitter.js.EventEmitter.emit @ emitter.js:50
xhr.onreadystatechange @ abstract-xhr.js:124

编辑:根据要求，这是我的package.json和webpack.config.js。

package.json

{
  "name": "*****",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "bcryptjs": "^2.4.3",
    "connected-react-router": "^4.3.0",
    "jsonwebtoken": "^8.3.0",
    "prop-types": "^15.6.1",
    "react": "^16.4.1",
    "react-apollo": "^1.4.16",
    "react-copy-to-clipboard": "^5.0.1",
    "react-dom": "^16.4.1",
    "react-redux": "^5.0.7",
    "react-router-dom": "^4.3.1",
    "react-router-redux": "^4.0.8",
    "react-scripts": "1.0.13",
    "redux": "^3.7.2",
    "redux-form": "^7.4.0",
    "redux-logger": "^3.0.6",
    "redux-middleware": "^0.1.21",
    "redux-thunk": "^2.3.0",
    "semantic-ui": "^2.3.1",
    "semantic-ui-css": "^2.3.1",
    "semantic-ui-less": "^2.3.1",
    "semantic-ui-react": "^0.73.1",
    "webpack": "^3.12.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "deploy": "gcloud app deploy"
  },
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.4",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-register": "^6.26.0",
    "file-loader": "^0.11.2",
    "font-loader": "^0.1.2",
    "gulp": "^3.9.1"
  }
}

webpack.config.js

import path from 'path';

export default {
  devtool: 'eval',
  entry: './src/index',
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/static/',
  },
  module: {
    rules: [{
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      },
      {
        test: /\.js$/,
        use: ['babel-loader'],
        exclude: /node_modules/,
        include: __dirname
      },
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: ['file-loader']
      }
    ]
  }
};

谢谢。

Answer 1

正如我在评论中提到的，这要归功于webpack。

这是为react-scripts start 启动脚本运行的脚本。

如果您查看代码，它在内部使用webpack-dev-server。如果您发现webpack-dev-server (这里)的默认配置，默认配置默认启用热重载。因此，您可以看到为启用热重新加载而创建的套接字连接。