我正在努力设置Node后端,以为前端提供数据并与ReactJS进行通信。最终,我将开发新的公司软件来代替我们当前的运输系统。
出于我自己的业务原因,我使用Amazon EC2 Ubuntu 16.04,并且我根本无法使我的ReactJS前端与Socket.IO进行通信,而无法与我的nodeJS后端与Socket.IO进行通信,而在http://localhost:4000/上进行通信。
这是我的App.js在调用时的反应前端
import React, { Component } from 'react';
import logo from './logo.svg';
import ioClient from 'socket.io-client';
import './App.css';
var socket;
class App extends Component {
constructor() {
super();
this.state = {
endpoint: 'http://localhost:4000/'
};
socket = ioClient(this.state.endpoint);
}
这是我的后端的nodeJS索引
const mysql = require('mysql');
const http = require('http');
const express = require('express');
const cors = require('cors');
const app = express();
const server = http.createServer(app);
const io = require('socket.io').listen(server);
app.use(cors());
app.get('/', (req, res) => {
res.send('Server running on port 4000')
});
const sqlCon = mysql.createConnection({
host: 'localhost',
user: 'admin-user',
password: 'admin-pass',
database: 'sample'
});
sqlCon.connect( (err) => {
if (err) throw err;
console.log('Connected!');
});
io.on('connection', (socket) => {
console.log('user connected');
});
server.listen(4000, "localhost", () => {
console.log('Node Server Running on 4000')
});
我可以让它通过我的实际公共IP地址而不是通过本地主机进行通信。我真的不想在公共IP地址上公开我的后端,以便与所有用户进行通信。可能以前有人问过这个问题,但是老实说,我在任何地方都找不到明确的答案,我已经找了3天了。节点执行没有问题,就像我说过的,如果我从公共IP创建socket.io连接,我可以使它进行通信,并且据我所知,节点在连接到脚本时运行其余脚本没有问题mariaDB没问题。
这是我在Chrome控制台中不断收到的错误。
polling-xhr.js:271 GET http://localhost:4000/socket.io/?EIO=3&transport=polling&t=MvBS0bE net::ERR_CONNECTION_REFUSED
polling-xhr.js:271 GET http://localhost:4000/socket.io/?EIO=3&transport=polling&t=MvBS3H8 net::ERR_CONNECTION_REFUSED
目前我正在通过npm start运行React,所以我的localhost:3000被反向代理到nginx,以便我的React前端通过端口80在我的公共EC2 IP上可见。
感谢您的帮助!
答案 0 :(得分:1)
可能是跨源请求问题。您是否尝试在应用程序上启用CORS。如果您不想在应用程序上启用cors,也可以在react应用$('#box').keyup(function(){
var valThis = $(this).val().toLowerCase();
if(valThis === ""){
$('.library_card > div').show();
} else {
$('.library_card > div').each(function(){
var text = $(this).text().toLowerCase();
(text.indexOf(valThis) >= 0) ? $(this).show() : $(this).hide();
});
};
});
// #box-- inpuut type text id
// .library_card -- div class
中使用代理。
在您的react app package.json中,您可以添加
package.json
答案 1 :(得分:0)
可能是因为正在使用的端口在运行时在服务器端不可用。
像这样使用服务器端端口,
var port = process.env.PORT || 3000;
server.listen(port, "localhost", () => {
console.log('Node Server Running on 4000')
});
在客户端,只需连接到应用程序URL,例如
this.state = {
endpoint: '/'
};
socket = ioClient(this.state.endpoint);
答案 2 :(得分:0)
只需稍微清理一下服务器即可。让这个家伙从您用来使服务器运行的任何终端或设备上运行他。
let startTime = Date.now();
const express = require('express');
const bodyParser = require('body-parser');
const compression = require('compression');
var cors = require('cors');
const app = express();
app.use(compression());
app.use(bodyParser.json({ limit: '32mb' }));
app.use(bodyParser.urlencoded({ limit: '32mb', extended: false }));
const http = require('http').Server(app);
const io = require('socket.io')(http);
app.use(cors({ origin: 'null' }));
const request = require('request');
const port = 4000;
let pm2InstanceNumber = parseInt(process.env.NODE_APP_INSTANCE) || 0;
http.listen(port + pm2InstanceNumber, err => {
if (err) {
console.error(err);
}
console.log('Listening http://localhost:%d in %s mode', port + pm2InstanceNumber);
console.log('Time to server start: ' + (Date.now() - startTime) / 1000.0 + ' seconds');
setTimeout(() => {
try {
process.send('ready');
} catch (e) {}
}, 2000);
app.get('/', (req, res) => {
res.send('Server running on port 4000')
});
});
或者只是运行node filename.js
来为这个家伙服务。