我正在尝试在后端使用 flask-socketio
和在前端使用 socketio
来实现 websocket。在本地它正在工作。但是当我使用 nginx
和 gunicorn
在真实服务器上运行它时,websocket 连接没有成功建立(甚至浏览器发送升级请求并且从 socketio 登录服务器报告它可以做到)>
后端:
from flask import Flask
from flask_socketio import SocketIO,emit,send
from eventlet import sleep
app = Flask(__name__)
socketio = SocketIO(app,logger=True,engineio_logger=True)
def init_app():
with app.app_context():
# Include our Routes
from . import routes
@socketio.on('connect', namespace='/test')
def test_connect(auth):
print('connected')
emit('my_response', {'data':"connected"})
@socketio.on('my_event', namespace='/test')
def test_message(message):
for i in range(5):
emit('my_response', {"data":"[1,2,3],[2,3,4],[1,3,4],[2,3,5]"})
sleep(1)
return app,socketio
前端:
<!DOCTYPE HTML>
<html>
<head>
<title>Socket-Test</title>
<script src="//code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://cdn.socket.io/3.1.3/socket.io.min.js" integrity="sha384-cPwlPLvBTa3sKAgddT6krw0cJat7egBga3DJepJyrLl4Q9/5WLra3rrnMcyTyOnh" crossorigin="anonymous"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
namespace = '/test';
var socket = io(namespace);
socket.on('connect', function(msg) {
console.log(socket.id);
console.log("connected");
console.log(msg);
$('#log').append('<br>' + $('<div/>').text(msg).html());
});
socket.on('my_response', function(msg, cb) {
$('#log').append('<br>' + $('<div/>').text('logs #' + msg.count + ': ' + msg.data).html());
});
socket.on('message', function(msg, cb) {
$('#log').append('<br>' + $('<div/>').text('logs #' + msg.count + ': ' + msg.data).html());
});
$('form#emit').submit(function(event) {
socket.emit('my_event', {dataaa: $('#emit_data').val()});
return false;
});
$('form#disconnect').submit(function(event) {
socket.emit('disconnect_request');
return false;
});
});
</script>
</head>
<body style="background-color:white;">
<h1 style="background-color:white;">Socket</h1>
<form id="emit" method="POST" action='#'>
<input type="text" name="emit_data" id="emit_data" placeholder="Message">
<input type="submit" value="Send Message">
</form>
<form id="disconnect" method="POST" action="#">
<input type="submit" value="Disconnect Server">
</form>
<h2 style="background-color:white;">Logs</h2>
<h5>jjj</h5>
<div id="log" ></div>
</body>
</html>
socketio 和engineio 的日志:
Server initialized for eventlet.
mAncYlHC04gFshXHAAAA: Sending packet OPEN data {'sid': 'mAncYlHC04gFshXHAAAA', 'upgrades': ['websocket'], 'pingTimeout': 20000, 'pingInterval': 25000}
mAncYlHC04gFshXHAAAA: Received packet MESSAGE data 0/test,
connected
emitting event "my_response" to 6KTIU7rspyEicmJKAAAB [/test]
mAncYlHC04gFshXHAAAA: Sending packet MESSAGE data 2/test,["my_response",{"data":"connected"}]
mAncYlHC04gFshXHAAAA: Sending packet MESSAGE data 0/test,{"sid":"6KTIU7rspyEicmJKAAAB"}
mAncYlHC04gFshXHAAAA: Received packet CLOSE data
gtunGNx8f_N37ANUAAAC: Sending packet OPEN data {'sid': 'gtunGNx8f_N37ANUAAAC', 'upgrades': ['websocket'], 'pingTimeout': 20000, 'pingInterval': 25000}
gtunGNx8f_N37ANUAAAC: Received packet MESSAGE data 0/test,
connected
The same code i ran locally with the default developmement server. There the websocket wwas working. There, in the log, I i can see the " Upgrade to websocket successful
" massage in the log.
Log from local:
Server initialized for eventlet.
G1WkNl__5TX6d3w6AAAA: Sending packet OPEN data {'sid': 'G1WkNl__5TX6d3w6AAAA', 'upgrades': ['websocket'], 'pingTimeout': 20000, 'pingInterval': 25000}
G1WkNl__5TX6d3w6AAAA: Received packet MESSAGE data 0/test,
emitting event "my_response" to PN_lJ0dX_hO7T5DlAAAB [/test]
G1WkNl__5TX6d3w6AAAA: Sending packet MESSAGE data 2/test,["my_response",{"data":"connected"}]
G1WkNl__5TX6d3w6AAAA: Sending packet MESSAGE data 0/test,{"sid":"PN_lJ0dX_hO7T5DlAAAB"}
G1WkNl__5TX6d3w6AAAA: Received request to upgrade to websocket
G1WkNl__5TX6d3w6AAAA: Upgrade to websocket successful
19tVV5u2d6zfqPE9AAAC: Sending packet OPEN data {'sid': '19tVV5u2d6zfqPE9AAAC', 'upgrades': ['websocket'], 'pingTimeout': 20000, 'pingInterval': 25000}
4vRerJfbpgoXd0C7AAAD: Sending packet OPEN data {'sid': '4vRerJfbpgoXd0C7AAAD', 'upgrades': ['websocket'], 'pingTimeout': 20000, 'pingInterval': 25000}
19tVV5u2d6zfqPE9AAAC: Received packet MESSAGE data 0/test,
emitting event "my_response" to nOCcGe1tS5xlYb6JAAAE [/test]
19tVV5u2d6zfqPE9AAAC: Sending packet MESSAGE data 2/test,["my_response",{"data":"connected"}]
19tVV5u2d6zfqPE9AAAC: Sending packet MESSAGE data 0/test,{"sid":"nOCcGe1tS5xlYb6JAAAE"}
19tVV5u2d6zfqPE9AAAC: Received request to upgrade to websocket
4vRerJfbpgoXd0C7AAAD: Received packet MESSAGE data 0/test,
emitting event "my_response" to 4o1N2tzxmyZAEerHAAAF [/test]
4vRerJfbpgoXd0C7AAAD: Sending packet MESSAGE data 2/test,["my_response",{"data":"connected"}]
4vRerJfbpgoXd0C7AAAD: Sending packet MESSAGE data 0/test,{"sid":"4o1N2tzxmyZAEerHAAAF"}
19tVV5u2d6zfqPE9AAAC: Upgrade to websocket successful
4vRerJfbpgoXd0C7AAAD: Received request to upgrade to websocket
4vRerJfbpgoXd0C7AAAD: Upgrade to websocket successful
G1WkNl__5TX6d3w6AAAA: Sending packet PING data None
G1WkNl__5TX6d3w6AAAA: Received packet PONG data
19tVV5u2d6zfqPE9AAAC: Sending packet PING data None
4vRerJfbpgoXd0C7AAAD: Sending packet PING data None
19tVV5u2d6zfqPE9AAAC: Received packet PONG data
4vRerJfbpgoXd0C7AAAD: Received packet PONG data
G1WkNl__5TX6d3w6AAAA: Sending packet PING data None
这是我浏览器端的截图:(后端代码运行在实际服务器上而不是本地)
sceenshot of network inspecion
似乎是从浏览器发送 upgrade:websocket
请求,然后收到 400 BAD REQUEST
响应并开始轮询。
可能是相关的:
这是 nginx server
server {
listen 80;
server_name global_ip;
location /static {
alias /home/web/eb-flask/static;
}
location / {
proxy_pass http://localhost:8000;
include /etc/nginx/proxy_params;
proxy_redirect off;
}
}