带socket.io的Heroku应用拒绝连接或发送404

时间:2019-05-13 16:21:05

标签: reactjs express heroku socket.io

经过数天试图找出问题所在之后,我来到这里寻求帮助。 我的Heroku应用程序使用React作为前端,使用Socket.io作为后端。这是练习: Heroku使用命令“ npm run start”运行dyno,该命令设置为concurrently 'npm run react' 'npm run server'以同时运行前端和后端。

但是,即使我使它工作(甚至无法解释如何运行),它也只能在我的计算机上工作。如果我尝试转到手机上的同一页面,则由于没有调试日志,因此不会发出任何请求,甚至无法告诉原因。

这是我的/src/server/index.js文件:

const express = require("express");
const app = express();
const server = require("http").Server(app);
const io = module.exports.io = require('socket.io')(server)

const port = process.env.PORT || 80

const socketManager = require('./SocketManager') // All functions there

io.on('connection', socketManager);
// app.use(express.static(__dirname + '/../../build'))
server.listen(port,() => {
    console.log("Listening on port", port)
})

我使用配置文件动态更改服务器的URL。

let server = 'https://hidden-waters-73936.herokuapp.com/socket.io/?EIO=4&transport=websocket'; // 404

// let server = window.location.hostname; // 404, same as above
// let server = 'http://localhost:4001'; // works locally on heroku
// let server = '/'; // 404, not found, AND CONNECTION_REFUSED
// let server = 'https://127.0.0.1:4001'; // CONNECTUIN_REFUSED
// let server = 'http://0.0.0.0:4001'; // Doesn't work at all

module.exports = server;

注释过的行是我尝试过的行。正如之前有人建议的那样,最后一次尝试是将https更改为ws,然后我尝试添加.com:80/socket.io...,但还是没有运气。每次都是不同的错误

这是未注释的服务器变量出现的错误: https://imgur.com/Lf0BxV3

我希望它可以在我的计算机和电话上成功发送请求。我会尝试用笔记本电脑查看日志,然后检查是否发现有用的东西。

** @ Ashish的更新

React component

import server from '../../config/serverConfig'
const socket = socketIOClient(server);

componentDidMount() {
socket.emit("test", {});
}

**编辑: 我的Heroku日志似乎告诉我其他事情正在发生:

2019-05-13T16:59:55.472135+00:00 app[web.1]: [1] [33m[nodemon] 1.19.0[39m
2019-05-13T16:59:55.474073+00:00 app[web.1]: [1] [33m[nodemon] to restart at any time, enter `rs`[39m
2019-05-13T16:59:55.475362+00:00 app[web.1]: [1] [33m[nodemon] watching: *.*[39m
2019-05-13T16:59:55.477060+00:00 app[web.1]: [1] [32m[nodemon] starting `node src/server/index.js`[39m
2019-05-13T16:59:56.164302+00:00 app[web.1]: [1] Listening on port 40497
2019-05-13T16:59:56.573081+00:00 heroku[web.1]: State changed from starting to up
2019-05-13T16:59:57.538639+00:00 app[web.1]: [0] Something is already running on port 40497.
2019-05-13T16:59:57.585807+00:00 app[web.1]: [0] npm run react exited with code 0
2019-05-13T17:01:19.780332+00:00 heroku[router]: at=error code=H12 desc="Request timeout" method=GET path="/" host=hidden-waters-73936.herokuapp.com request_id=42a6c345-94b7-441a-afde-82c1e9c52e97 fwd="90.191.14.93" dyno=web.1 connect=1ms service=30004ms status=503 bytes=0 protocol=https

1 个答案:

答案 0 :(得分:0)

解决方案:

至少对我而言,它现在有效。这是我更改的内容: 服务器配置文件(也就是客户端正在监听的文件)

let server = window.location.hostname;

const env = process.env.NODE_ENV;

if (env === 'development') {
    server = 'http://localhost:4001';
    console.log("Using dev port")
}
module.exports = server;

package.json

"scripts": {
    "client-install": "npm install",
    "start": "node src/server/index.js",
    "server": "nodemon src/server/index.js",
    "client": "npm start",
    "build": "react-scripts build",
    "react": "react-scripts start",
    "dev": "concurrently \"npm run server\" \"npm run client\"",
    "heroku-postbuild": "NPM_CONFIG_PRODUCTION=false npm install && npm run build"

Heroku procfile: web: npm start

但是。 我使用React Router浏览不同的页面。在heroku上刷新页面后,它将立即返回“未找到”。我想它正在寻找具有路径名的.html文件,但我需要像Firebase一样将其重写为index.html。 我尝试使用带有nginx的create-react-app-buildpack,它似乎使我的服务器崩溃 Failed to load resource: the server responded with a status of 405 (Not Allowed) 然后更改监听点(我想) polling-xhr.js:269 POST https://XXXXXXXXXX.herokuapp.com/socket.io/?EIO=3&transport=polling&t=MgpToRX 405 (Not Allowed)

是否有确定问题发生原因的方法? Heroku日志似乎并没有告诉您任何有用的信息。