Socket.io работает на localhost, а не на развертывании героку

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-адреса в качестве URL-адреса heroku, например «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