Python Heroku烧瓶插座连接断开_Python_Flask_Heroku_Flask Socketio

Python Heroku烧瓶插座连接断开

python flask heroku

Python Heroku烧瓶插座连接断开,python,flask,heroku,flask-socketio,Python,Flask,Heroku,Flask Socketio,我正在尝试使用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(): retu

我正在尝试使用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'})
})

我的文件是：

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>


聊天应用
分区msgbbl{
边缘底部：5px；
填充物：5px10px；
边界半径：30px；
颜色：#555；
边缘顶部：5px；
}
聊天应用程序
消息还没来！！
在span下方键入您的消息

用户名
消息
发送
变量用户名
var socket=io.connect（'https://'+document.domain+'：'+location.port）；
//var socket=io.connect（'0.0.0.0:5000/'）；
socket.on（'connect'，function（）{
emit（'my event'，{data:'user connected'}）
})
var form=$（'form'）。在（'submit'，函数（e）上{
e、 预防默认值（）
user_name=$（'input.username'）.val（）；
var message=$（'input.message'）.val（）；
emit（'my event'，{user:user\u name，message:message}）
$（'input.message'）.val（“”）.focus（）
})
socket.on（'my response'，函数（msg）{
//$（'body'）。追加（msg）；
//emit（'my event'，{data:'user connected'，status:'reach'}）；
if（typeof msg.user！=“未定义”）{
$（'h3'）。删除（）
if（msg.user==用户名）{
$（'div.msg-wrapper'）.append（'Me'+msg.message+''）
}否则{
$（'div.msg-wrapper'）.append（''+msg.user+''+msg.message+''）
}
}
控制台日志（msg）；
})

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

日志中是否存在不允许的源代码警告？您可能需要通过在cors_allowed_Originates选项上传递来明确允许此源。

Hi@Gaurav，您能为我们提供帮助吗？@Léonard，我已经添加了所需的代码段。任何时候您使用反向代理（如Heroku操作的代理）时，都需要为cors添加正确的配置，因此，跨源请求按预期工作。@Miguel，我已导入CORS并将应用程序解析到其中：

CORS=CORS（app）

该问题仍然存在，并导致H13连接关闭而没有响应错误。服务器接收客户端发出的第一组数据，但没有响应。flask cors扩展修复了flask，但它对Socket.IO不做任何操作。请参阅文档中Socket.IO服务器的

cors\u allowed\u origin

选项。