reactjs - Socket.io 适用于 localhost 但不适用于 heroku 部署

Question

它成功部署并发布了成功的构建，但 socket.io 模块由于某种原因无法正常工作。我已经尝试了在这个论坛上发布的各种解决方案，但似乎没有一个对我有用。奇怪的是，它在 localhost 上运行良好，但在 heroku 上却不行，所以我不确定发生了什么。这是我的代码:

服务器端:

var express = require('express');
var socket = require('socket.io');

var app = express();
const PORT = process.env.PORT || 8080;


const server = app.listen(PORT, "0.0.0.0", function(){
    console.log('server is running on port: ' + PORT);
});

io = socket(server);

io.on('connection', (socket) => {
    console.log(socket.id);

    socket.on('SEND_MESSAGE', function(data){
        io.emit('RECEIVE_MESSAGE', data);
    })
});

客户端:

import React from "react";
import io from "socket.io-client";

class Chat extends React.Component{
    constructor(props){
        super(props);

        this.state = {
            username: '',
            message: '',
            messages: []
        };


        this.socket = io.connect('localhost:8080');

        this.socket.on('RECEIVE_MESSAGE', function(data){
            addMessage(data);
        });

        const addMessage = data => {
            console.log(data);
            this.setState({messages: [...this.state.messages, data]});
            console.log(this.state.messages);
        };

        this.sendMessage = ev => {
            ev.preventDefault();
            this.socket.emit('SEND_MESSAGE', {
                author: this.state.username,
                message: this.state.message
            })
            this.setState({message: ''});

        }
    }
    render(){
        return (
            <div className="container" style={{width: '100%', height: '100%'}}>

                <div className="card" >
                    <div className="card-body">
                        <div className="card-title">Global Chat</div>
                        <hr/>
                        <div className="messages">
                            {this.state.messages.map(message => {
                                return (
                                    <div>{message.author}: {message.message}</div>
                                )
                            })}
                        </div>

                    </div>
                    <div className="card-footer">
                        <input type="text" placeholder="Username" value={this.state.username} onChange={ev => this.setState({username: ev.target.value})} className="form-control"/>
                        <br/>
                        <input type="text" placeholder="Message" className="form-control" value={this.state.message} onChange={ev => this.setState({message: ev.target.value})}/>
                        <br/>
                        <button onClick={this.sendMessage} className="btn btn-primary form-control">Send</button>
                    </div>
                </div>

            </div>
        );
    }
}

export default Chat;

我知道 url 不应该是 'localhost:8080' 并且我尝试了其他选项，例如将 url 作为 heroku url 输入，例如 'my-app.herokuapp.com' 但它总是给出一些错误，这我不确定，我在这个论坛上看到的所有解决方案都不起作用。任何帮助，将不胜感激!提前致谢!

Answer 1

很抱歉上面的评论不太可读。你可以试试这个:

服务器端

    const http = require('http');
    const express = require('express');
    const io = require('socket.io');
    const app = express();
    const port = process.env.PORT || 8080; 
    const server = http.createServer(app).listen(port);
    io = require('socket.io')(server,{parameters});

客户端 :

 this.socket = io.connect(); //remove local host