Socket.io 不能在 heroku 服务器上运行，可能是端口问题答案

【问题标题】：Socket.io is not working on heroku server, probably a problem with portsSocket.io 不能在 heroku 服务器上运行，可能是端口问题
【发布时间】：2021-09-23 11:04:34
【问题描述】：

我使用 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

任何帮助将不胜感激。

【问题讨论】：

标签： node.js reactjs heroku socket.io

【解决方案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 上均有效。

【讨论】：