我最近开始涉足Web套接字，尤其是Flask-SocketIO。
我在这个示例项目中做了一些工作，并使其部分工作。
如果在本地浏览器中打开多个选项卡，则滑块会更新并在所有选项卡之间同步，但是如果我从其他客户端打开页面，则浏览器将不会同步。直到另一个客户端刷新他的页面。
有人可以向我解释这种行为吗？我一般会误解Web套接字吗？
这是我的python /烧瓶代码：
from flask import Flask, render_template
from flask_socketio import SocketIO, emit
app = Flask(__name__)
socketio = SocketIO(app)
values = {
'slider1': 25,
'slider2': 0,
}
@app.route('/')
def index():
return render_template('index.html',**values)
@socketio.on('connect')
def test_connect():
emit('after connect', {'data':'Lets dance'})
@socketio.on('Slider 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 lang="en">
<head>
<meta charset="UTF-8">
<title>Synchronized Slider</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.1.1/socket.io.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// sending a connect request to the server.
var socket = io.connect('http://localhost:5000');
// An event handler for a change of value
$('input.sync').on('input', function(event) {
socket.emit('Slider value changed', {who: $(this).attr('id'), data: $(this).val()});
return false;
});
socket.on('after connect', function(msg){
console.log('After connect', msg);
});
socket.on('update value', function(msg) {
console.log('Slider value updated');
$('#'+msg.who).val(msg.data);
});
});
</script>
</head>
<body>
<div class="container text-center">
<h1 >Slider Demo</h1>
<form class="mt-5">
<div class="form-group">
<label for="formControlRange">Demo Slider 1</label>
<input type="range" class="form-control-range sync" id="slider1" min="0" max="50" value="{{slider1}}">
</div>
<div class="form-group">
<label for="formControlRange">Demo Slider 2</label>
<input type="range" class="form-control-range sync" id="slider2" min="0" max="50" value="{{slider2}}">
</div>
</form>
</div>
</body>
</html>
提前致谢！ 🙂
python参考方案
弄清楚了。
var socket = io.connect('http://localhost:5000');
当然，其他人将没有在本地主机上运行的服务器。
Flask-RESTful-返回自定义响应格式 - python我已经按照以下Flask-RESTful文档定义了自定义响应格式。app = Flask(__name__) api = restful.Api(app) @api.representation('application/octet-stream') def binary(data, code, headers=None): resp =…
Flask模板中的全局变量 - python可能不是准确的标题，因为我是flask / python的新手。我正在开发一种内部工具，供不同团队使用。每个团队都有不同的部署阶段，例如alpha，beta|test，prod，并且它们还具有多个区域，例如NA，EU，AP等。现在，当我使用redirect_template时，我将发送stage和region作为变量，然后在模板中使用它们。但是，对每个red…
带后台线程的烧瓶应用程序 - python我正在创建一个flask应用程序，对于一个请求，我需要运行一些长时间运行的作业，而无需在UI上等待。我将创建一个线程并将消息发送到UI。该线程将计算并更新数据库。但是，UI在提交后会看到一条消息。下面是我的实现，但是它正在运行线程，然后将输出发送到我不喜欢的UI。如何在后台运行此线程？@app.route('/someJob') def …
Python pytz时区函数返回的时区为9分钟 - python由于某些原因，我无法从以下代码中找出原因：>>> from pytz import timezone >>> timezone('America/Chicago') 我得到：<DstTzInfo 'America/Chicago' LMT-1 day, 18:09:00 STD…
用大写字母拆分字符串，但忽略AAA Python Regex - python我的正则表达式：vendor = "MyNameIsJoe. I'mWorkerInAAAinc." ven = re.split(r'(?<=[a-z])[A-Z]|[A-Z](?=[a-z])', vendor) 以大写字母分割字符串，例如：'我的名字是乔。 I'mWorkerInAAAinc”变成…