Socket.io Uncaught RangeError: Превышен максимальный размер стека вызовов - PullRequest
Новая
       15

Socket.io Uncaught RangeError: Превышен максимальный размер стека вызовов

0 голосов
/ 30 апреля 2020

Я играл с Flask -SocketIO, чтобы сделать небольшую игру, и я столкнулся со странной проблемой на стороне клиента. Я следовал этому уроку о том, как синхронизировать клиентов, который дает следующие листинги кода (хотя следует отметить, что я обновил версию socket.io до 2.3.0 в ссылке cloudflare, чтобы работать с моим Flask -SocketIO версия):

Сторона сервера: 

from flask import Flask, render_template
from flask.ext.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('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')

Сторона клиента: 

<!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>

Я скопировал и вставил код, запустил сервер и загрузил localhost: 5000 в моем браузере (Chrome версия 81.0.4044.122), и страница загрузилась нормально. Однако я заметил, что ползунки не обновлялись между несколькими клиентами, поэтому я проверил консоль браузера, выдавшую ошибку Uncaught RangeError: Maximum call stack size exceeded, со следующим стеком вызовов: 

Uncaught RangeError: Maximum call stack size exceeded
    at r.<anonymous> ((index):13)
    at r.emit (index.js:83)
    at r.emit (index.js:83)
    at r.<anonymous> ((index):13)
    at r.emit (index.js:83)
    at r.emit (index.js:83)
    at r.<anonymous> ((index):13)
    at r.emit (index.js:83)
    at r.emit (index.js:83)
    at r.<anonymous> ((index):13)

Кажется, что вызовы чередоваться между строкой 13 кода на стороне клиента socket.emit('connect', {data: 'I\'m connected!'}); и двумя вызовами строки из исходного кода socket.io, связанного с установкой джиттера в значение отката.

Из того, что я понимаю, сообщение об ошибке обычно происходит от функций, рекурсивно вызывающих себя / другие функции взад и вперед, пока не будет превышен максимальный размер стека вызовов, но я не понимаю, почему это происходит здесь.

Кто-нибудь может увидеть, в чем проблема? Это довольно простой пример c, так что я думаю, что проблема должна быть где-то в моей настройке socket.io/Flask-SocketIO, но я не уверен, что делаю неправильно. Спасибо!

ОБНОВЛЕНИЕ Я удалил строку проблематики c (первый выброс из события 'connect'), и теперь все работает нормально ... Все еще не уверен, почему проблема произошло в первую очередь, хотя.

...