Flask_socketIO 不与第二个客户端通信

Posted

技术标签:

【中文标题】Flask_socketIO 不与第二个客户端通信【英文标题】:Flask_socketIO does not comunicate with second client 【发布时间】:2019-03-16 16:35:12 【问题描述】:

我最近开始接触网络套接字,尤其是 Flask-SocketIO。 我对这个示例项目进行了一些尝试,并使其部分工作。

如果在我的本地浏览器中打开多个标签,滑块会更新并在所有标签之间同步,但如果我从另一个客户端打开页面,浏览器将不会同步。直到其他客户刷新他的页面。

有人可以解释一下这种行为吗?我对网络套接字有什么误解吗?

这是我的 python/flask 代码:

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>

提前致谢! :)

【问题讨论】:

【参考方案1】:

想通了。

var socket = io.connect('http://localhost:5000');

当然,其他人不会在本地主机上运行任何服务器。

【讨论】:

以上是关于Flask_socketIO 不与第二个客户端通信的主要内容,如果未能解决你的问题,请参考以下文章

将麦克风从客户端浏览器流式传输到远程服务器,并将音频实时传递到 ffmpeg 以与第二个视频源结合

Linux - 使用第二个进程建立 IPC 的选项

正则表达式删除与第二个字符串匹配的行?

页面匹配查询不存在。与第二个蛞蝓

使用 2 个管道进行金属渲染,第二个对象与第一个对象重叠

使用与第一个下拉列表相同的值填充第二个下拉列表