Question

我正在尝试使用flask和flask-socketio框架制作聊天应用程序。在我的本地计算机上运行时，它运行正常，但是当部署到heroku时，它不起作用，并显示http 400（错误请求错误）。这是app.py的代码：

from flask_socketio import SocketIO, emit
import time

app=Flask(__name__)

socketio = SocketIO(app)

@app.route('/')
def home():
    return render_template('home.html')

@socketio.on('my event')
def handle_my_custom_event(json):
    print(str(json))
    #time.sleep(3000)
    socketio.emit('my response',json)
    

if __name__=="__main__":
    socketio.run(app, debug=True, host='0.0.0.0', port=5000)

home.html中嵌入的js的代码是：

var socket = io.connect('https://' + document.domain + ':' + location.port);
//var socket = io.connect('0.0.0.0:5000/');
socket.on('connect', function(){
     socket.emit('my event', {data:'user connected'})
})

我的Procfile是：

web: gunicorn app:app

请帮助。让我知道是否需要更多详细信息。谢谢。

编辑：共享完整的home.html：

<!DOCTYPE html>

<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Chat App</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
  <style>

    div.msgbbl {

      margin-bottom:  5px;
      padding: 5px 10px;
      border-radius: 30px;
      color:#555;
      margin-top: 5px;

    }

  </style>

  </head>
  <body>
    <div class="container-fluid">
      <div class="well text-center">
        <h4>The Chat App</h4>
      </div>
      <div class="col-sm-8">
        <div id="nomsg">
          <h3 style="color:#ccc">Messages are yet to come!!</h3>
          <div class="msg-wrapper"></div>
        </div>
      </div>
      <div class="col-sm-4">
        <form action="" method="post">
          <b>Type your message below span<span class="glyphicon glyphicon-arrow-down"></span></b>
          <hr />
          <div class="form-group">
                <label for="exampleInputEmail1">User Name</label>
                <input type="text" class="username form-control" id="exampleInputEmail1" autocomplete="off" aria-describedby="emailHelp" placeholder="User Name" required>

              </div>
              <div class="form-group">
                <label for="exampleInputPassword1">Message</label>
                <input type="text" class="message form-control" autocomplete="off" id="exampleInputPassword1" placeholder="Message" required>
              </div>

              <button type="submit" class="btn btn-success">Send <span class="glyphicon glyphicon-send"></span></button>
        </form>
      </div>




    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.2.0/socket.io.js"></script>
    <script>
        var user_name
        
        var socket = io.connect('https://' + document.domain + ':' + location.port);
        //var socket = io.connect('0.0.0.0:5000/');
        socket.on('connect', function(){
          socket.emit('my event', {data:'user connected'})
        })
        var form=$('form').on('submit',function(e){
          e.preventDefault()
          user_name = $('input.username').val();
          var message = $('input.message').val();
          socket.emit('my event',{user:user_name, message:message})
          $('input.message').val('').focus()
        })
        socket.on('my response', function(msg){
          //$('body').append(msg);
          //socket.emit('my event', {data:'user connected', status:'again'});
          if (typeof msg.user !== 'undefined'){
            $('h3').remove()
            if(msg.user==user_name){
              $('div.msg-wrapper').append('<div class="msgbbl" style="background-color:yellow"><b>Me</b> '+msg.message+' </div>')
            }else{
              $('div.msg-wrapper').append('<div class="msgbbl" style="background-color:lightgreen" >'+msg.user+'<b> '+msg.message+' </b></div>')
            }

          }

          console.log(msg);
        })

    </script>



  </body>
</html>

app.py，home.html和procfile以及需求和runtime.txt构成了被推送到heroku的完整文件集。 requirements.txt文件包含我使用的所有软件包，因此我认为这不是原因。在使用my-app.herokuapp.com建立套接字的同时，我还尝试在html文件中替换0.0.0.0:5000/，但仍然无法正常工作。

Answer 1

日志中是否有关于https://murmuring-ridge-73542.herokuapp.com来源的警告？您可能需要通过在cors_allowed_origins选项上传递它来明确允许该起源。

Heroku Flask Socketio连接断开

1 个答案: