如何解决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():
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/，但仍然无法正常工作。
解决方法
日志中是否有关于https://murmuring-ridge-73542.herokuapp.com来源的警告？您可能需要通过在cors_allowed_origins选项上传递它来明确允许该起源。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。