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;

我知道网址不应该是本地主机：8080＆＃39;我已尝试过其他选项，例如将网址作为heroku网址添加，例如＆＃39; my-app.herokuapp.com＆＃39;但它总是会出现一些错误，我不确定，我在这个论坛上看到的所有解决方案都没有用。任何帮助，将不胜感激！提前谢谢！

Answer 1

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

服务器端

$key

客户端：

    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});

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

1 个答案: