使用 websockets 同步 Flask 应用程序的客户端

Question

我遵循了有关在烧瓶上同步两个客户端的简单教程，我在本地运行它，但打开“本地主机”的两个选项卡不会使我的滑块同步。

https://www.matthieuamiguet.ch/blog/synchronize-clients-flask-application-websockets

我正在 venv 上研究 pycharm。

• 蟒蛇 3.9
• Flask-SocketIO 4.3.1
• 烧瓶 2.0.1

我得到“GET / HTTP/1.1” 200 -

我试过打开和关闭调试模式。

代码如下：

应用程序

from flask import Flask, render_template
from flask_socketio import SocketIO, emit

app = Flask(__name__)
socketio = SocketIO(app, cors_allowed_origins="*")

values = {
    'slider1': 25,
    'slider2': 0,
}

@app.route('/')
def index():
    return render_template('index.html', **values)

@socketio.on('value changed')
def value_changed(message):
    values[message['who']] = message['data']
    emit('update value', message, broadcast=True)

if __name__ == '__main__':
    socketio.run(app, host='0.0.0.0')

索引.html

<!DOCTYPE HTML>
<html>
<head>
    <title>Synchronized Sliders</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/socket.io/0.9.16/socket.io.min.js"></script>
    <script type="text/javascript" charset="utf-8">
        $(document).ready(function(){

            var socket = io.connect();

            socket.on('connect', function() {
                socket.emit('connect', {data: 'I\'m connected!'});
            });

            $('input.sync').on('input', function(event) {
                socket.emit('value changed', {who: $(this).attr('id'), data: $(this).val()});
                return false;
            });

            socket.on('update value', function(msg) {
                $('input#'+msg.who).val(msg.data)
            });

        });
    </script>
</head>
<body>
    <h1>Synchronized Sliders!</h1>

    <input id="slider1" class="sync" type="range" min="0" max="50" value="{{slider1}}" /> <br>
    <input id="slider2" class="sync" type="range" min="0" max="50" value="{{slider2}}" />

    <input id="txt1" class="sync" type="text" />

</body>
</html>

Answer 1

通过替换 index.html 找到解决方案

var socket = io.connect();

经过

var socket = io.connect(my ip);

您可以通过在 cmd 窗口中输入 ipconfig 并设置 IPv4 地址中的数字来检查它。