React / NodeJS在开发中不会通过本地主机讲话

时间:2019-11-08 14:39:58

标签: javascript node.js reactjs sockets socket.io

我正在努力设置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上可见。

感谢您的帮助!

3 个答案:

答案 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来为这个家伙服务。