开始长轮询而不是 websocket 连接

时间:2021-06-07 09:59:43

标签: flask websocket socket.io flask-socketio

我正在尝试在后端使用 flask-socketio 和在前端使用 socketio 来实现 websocket。在本地它正在工作。但是当我使用 nginxgunicorn 在真实服务器上运行它时,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;
    }
} 

0 个答案:

没有答案
相关问题