Flask_socketIO не соединяется со вторым клиентом - PullRequest
Новая
       23

Flask_socketIO не соединяется со вторым клиентом

0 голосов
/ 16 марта 2019

Я недавно начал проникать в веб-сокеты и особенно Flask-SocketIO. Я немного поиграл с этим примером проекта и получил его частичную работу.

Если открыть несколько вкладок в моем локальном браузере, ползунок обновится и синхронизируется по всем вкладкам, но если я открою страницу с другого клиента, браузер не будет синхронизироваться. Нет, пока другой клиент не обновит свою страницу.

Может кто-нибудь объяснить мне это поведение? Что-то не так с веб-сокетами?

Это мой код питона / колбы: 

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 Ответ

0 голосов
/ 16 марта 2019

Понял. 

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

Конечно, у кого-то еще не будет сервера, работающего на localhost.

...