结合 Node 后端和 Jumpsuit 前端答案

【问题标题】：Combining Node backend and Jumpsuit frontend结合 Node 后端和 Jumpsuit 前端
【发布时间】：2017-05-30 21:52:43
【问题描述】：

我曾经使用 Node 作为后端，使用 React 作为前端，并且没有服务器问题。现在我已在前端更改为 jumpsuit，但在尝试运行 Node 服务器时遇到了 websocket 错误。

更具体地说，当我运行 Node 服务器时，它在端口上启动，但是当我到达 localhost:9000 时，页面是空白的，并且控制台出现此错误：

这是我的节点：

Server.js

(function() {
"use strict";

// Express
const express = require('express');
const app = express();
const path = require('path');
const bodyParser = require('body-parser');

// Middleware
app.use(bodyParser.json({limit: '10mb'}));
app.use(bodyParser.urlencoded({limit: '10mb', parameterLimit: 1000, extended: true}));

app.use('/', express.static(path.join(__dirname, '../dist')));
app.get('/search', require('./routes/search.js'));

module.exports = app;

}());

Serve.js

(function() {
'use strict';

// Import 'app' from server.js
var server = require('./server.js')
var WebSocketServer = require('ws').Server;
var wss = new WebSocketServer({noServer: true});

// Set port as either specified by command line or 9000
server.set('port', (process.argv[2] || 9000));

// Start server
server.listen(server.get('port'), () => {
console.log(`Server started: http://localhost:${server.get('port')}/`);
});
server.on('upgrade', wss.handleUpgrade);
}());

我的 index.html 只是简单的骨架：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Welcome to Jumpsuit</title>
  <link rel="stylesheet" href="app.css" charset="utf-8">
</head>
<body>
  <div id="app"></div>
  <script src="app.js"></script>
</body>
</html>

就我个人而言，我知道他们都在工作。如果我使用 index.html 和 app.js 并使用“jumpsuit watch”启动它，那么它可以工作，或者如果我从 index.html 中删除 <script src="app.js"></script> 并运行 Node，那么页面加载一切正常，所以单独使用连身衣和节点部分工作。但我只是想知道如何将它们结合起来。

谢谢

【问题讨论】：

标签： node.js reactjs redux frontend backend

【解决方案1】：

我找到了解决办法。我不会将此标记为官方答案，因为它实际上并没有解决问题，只是规避了它，但希望如果其他人遇到此问题，他们可以使用此解决方法，直到实际修复出现。

Jumpsuit 开发人员说该错误是因为热状态重新加载 (HSR) 试图打开，尽管我没有在我的节点设置或任何地方告诉它。他是这么说的：

我很确定只要 HSR_WS 环境变量没有设置，HSR 甚至不应该运行：

1.确保未设置 env 变量

2.确保您了解最新版本的连身衣

这是基于 hsr.js 渲染中的以下代码行，它检查 HSR_WS 环境变量：

https://github.com/jumpsuit/jumpsuit/blob/ead48fa7da220e3cad82925d94f8136285f413af/src/render.js#L36

我确认没有设置 HSR_WS 环境变量（它没有设置），我从 Jumpsuit 1.0.0 升级到 1.1.0 并再次测试它，然后从 1.1.0 升级到 1.3.2（最新的非正式发布）并再次测试它，两次它仍然没有工作。

所以最终我只是手动打开了那个端口上的 websocket 连接，让它在后台的另一个终端中运行，然后运行 Node 服务器，它工作正常。

我的做法是首先全局安装 wscat：

npm install -g wscat

然后在有问题的 WS 端口上运行它：

wscat -l 43944

最后，我打开了一个新终端并在其中运行节点服务器。它启动并正在运行 @ localhost:9000

希望如果其他人有这个问题，他们可以暂时使用这个解决方法:)

【讨论】：