Socket.io无法在heroku服务器上工作，可能是端口问题

Question

我使用Socket.io进行了一个MERN堆栈项目。该应用程序在localhost上运行得很好，但由于某种原因，当我将其部署到Heroku时，Socket.io位停止工作，其余部分工作正常。我几乎可以肯定这与我处理港口的方式有关。

server.js

const express = require('express');
const path = require('path');
const dataBase = require('./config/db');
const io = require('socket.io')(4000, {
cors: {
origin: 'http://localhost:3000',
},
});
const app = express();
const authRoutes = require('./routes/auth');
const managerRoutes = require('./routes/manager');
const leadRoutes = require('./routes/lead');
const resourceRoutes = require('./routes/resource');
dataBase();
app.use(express.json());
const port = process.env.PORT || 5000;
if (process.env.NODE_ENV === 'production') {
app.use(express.static(path.join(__dirname, 'client/build')));
app.get('*', function (req, res) {
res.sendFile(path.join(__dirname, 'client/build', 'index.html'));
});
}
io.on('connection', (socket) => {
socket.on('join', async ({ userId }, callback) => {
......some code here
});
app.listen(port, (error) => {
if (error) console.log(error);
console.log(`Server started on port ${port}`);
});

chat.jsx客户端文件

import React, { useEffect, useState } from 'react';
import { connect } from 'react-redux';
import { io } from 'socket.io-client';
import Messages from './messages';
let socket;
const Chat = ({ leadId, resourceId, projectId, user }) => {
const [message, setMessage] = useState('');
const [messages, setMessages] = useState([]);
useEffect(() => {
socket = io(':4000');
socket.emit(
'join',
{
userId: user._id,
},
(error) => {
if (error) console.log(error);
}
);
return () => {
socket.emit('disconnection');
socket.off();
};
}, [user]);
(some code here)

package.json客户端文件

{
"name": "task-camp-client",
"version": "0.1.0",
"private": true,
"proxy": "http://localhost:5000",
"dependencies": {
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
......
}

我试着只包含相关的代码，整个项目都在Github上。https://github.com/G-Samarth/taskCamp

如有任何帮助，我们将不胜感激。

Answer 1

因此，在阅读了几篇博客和StackOverflow帖子后，我找到了这个问题的解决方案。希望这能帮助任何面临类似问题的人。

server.js

所以，基本上，删除所有出现的静态端口并连接socket.io&节点服务器到同一端口。

const express = require('express');
const http = require('http');
const cors = require('cors');
const path = require('path');
const dataBase = require('./config/db');
const app = express();
const server = http.createServer(app);
const io = require('socket.io')(server);
const authRoutes = require('./routes/auth');
const managerRoutes = require('./routes/manager');
const leadRoutes = require('./routes/lead');
const resourceRoutes = require('./routes/resource');
dataBase();
app.use(express.json());
app.use(cors());
const port = process.env.PORT || 5000;
if (process.env.NODE_ENV === 'production') {
app.use(express.static(path.join(__dirname, 'client/build')));
app.get('*', function (req, res) {
res.sendFile(path.join(__dirname, 'client/build', 'index.html'));
});
}
io.on('connection', (socket) => {
socket.on('join', async ({ userId }, callback) => {
......some code here
});
server.listen(port, (error) => {
if (error) console.log(error);
console.log(`Server started on port ${port}`);
});

chat.jsx

在这里，只需删除静态本地主机URL/端口。

......
useEffect(() => {
socket = io();
......

此代码可在本地和Heroku上运行。