将 Flask 应用程序的客户端与 websocket 同步答案

【问题标题】：Synchronize clients of a Flask application with websockets将 Flask 应用程序的客户端与 websocket 同步
【发布时间】：2021-07-17 01:37:17
【问题描述】：

我已经按照这个简单的教程在烧瓶上同步两个客户端，我在本地运行它但是打开两个“localhost”选项卡不会使我的滑块同步。

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

我正在研究 pycharm，在 venv 上。

Python 3.9
Flask-SocketIO 4.3.1
Flask 2.0.1

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

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

代码如下：

app.py

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')

index.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>

【问题讨论】：

一些更新：我在运行时添加了附加选项：--host myip --port ####，我可以从本地网络中的另一台计算机访问，但滑块不同步.
您面临的具体问题是什么？
根据教程，一个客户端应该能够修改一个滑块并看到它反映在另一个客户端上，它应该更新而无需刷新页面。我没有看到任何变化。甚至刷新也不行。
控制台或终端是否有错误信息？
没有。这是我的输出

标签： python flask

【解决方案1】：

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

var socket = io.connect();

通过

var socket = io.connect(my ip);

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

【讨论】：