Google App Engine 上的未知 WebSocket (SockJS)

Question

我已将在 NodeJS 上运行的 React 应用程序部署到 google 应用程序引擎，并且一切正常。但是，当我加载主页时，我收到了 15 秒后发生的 WebSocket 错误（握手失败），可能是由于超时。问题是，我根本不在我的应用程序中使用 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

就像我在 cmets 中提到的，这是由于 webpack。

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

如果您查看代码，它在内部使用webpack-dev-server。如果您找到webpack-dev-server (here) 的默认配置，则默认配置默认启用 HOT RELOADING。因此，您会看到创建的套接字连接以启用 HOT RELOADING。