Google App Engine 上的未知 WebSocket (SockJS)
Unknown WebSocket (SockJS) on Google App Engine
我已经将 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']
}
]
}
};
谢谢。
正如我在评论中提到的,这是由于 webpack
。
这是为 react-scripts start
start script 运行的脚本。
如果您查看代码,它在内部使用 webpack-dev-server
。如果您找到 webpack-dev-server
(here) 的默认配置,则默认配置默认启用 HOT RELOADING。因此,您会看到为启用 HOT RELOADING.
而创建的套接字连接
我已经将 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']
}
]
}
};
谢谢。
正如我在评论中提到的,这是由于 webpack
。
这是为 react-scripts start
start script 运行的脚本。
如果您查看代码,它在内部使用 webpack-dev-server
。如果您找到 webpack-dev-server
(here) 的默认配置,则默认配置默认启用 HOT RELOADING。因此,您会看到为启用 HOT RELOADING.