以设定的时间间隔从 flask_socketio 服务器发出事件

Question

我有一个 React 客户端，它需要使用 flask_socketio 服务器发出的消息，如果我在 'connect' 上发出一条消息，它可以正常工作，但是如果我在一段时间内继续发出它循环它不会在客户端被拾取。我认为这可能是由于在活动线程中执行的操作。我在网上找不到任何谈论这个问题的帖子。

下面是我的 React js 客户端代码。

class MyClient extends Component {

    constructor() {
        super();
        this.state = {
            endpoint:"http://127.0.0.1:5000",
            response: ""
        };
    }


    componentDidMount() {
        console.log("test")
        const {endpoint} = this.state;
        //Very simply connect to the socket
        const socket = socketIOClient(endpoint);
        //Listen for data
        socket.on("connect", dd => {

            socket.on("log", dx => this.setState({response: dx.data}));

          });

    }


    render() {

        const {response} = this.state;

        return (
            <div>
            <h1>Test {response}</h1>
            {console.log(response)}>
        </div>

        )
    }



}

客户端寻找从服务器发出的"log"，现在我增加了时间来模拟变化的数据。 当客户端加载时，我会看到数据，当我断开并重新连接服务器时，我会看到客户端上的新数据。我想知道如何连续发出数据

from flask import Flask, render_template, request, jsonify
from flask_socketio import SocketIO, emit
from flask_cors import CORS
from datetime import datetime
import time

now = datetime.now()

current_time = now.strftime("%H:%M:%S")


app = Flask(__name__)
app.config['SECRET_KEY'] = 'justasecretkeythatishouldputhere'

socketio = SocketIO(app,cors_allowed_origins="*")
CORS(app)


@app.route('/')
def index():
    return render_template('index.html')


@app.route('/api')
def api():
    query = dict(request.args)
    socketio.emit('log', dict(data=str(query)), broadcast=True)
    return jsonify(dict(success=True, message='Received'))


@socketio.on('connect')
def on_connect():
    time.sleep(1)
    t = str(time.clock())
    print(t)
    socketio.emit('log', {'data': t, 'time': t})


if __name__ == '__main__':
    socketio.run(app,port=5000)

下面的循环不起作用，我应该将它作为后台线程运行还是需要添加到 socketio 的异步属性。非常感谢任何帮助。

@socketio.on('connect')
def on_connect():
    while True:
        time.sleep(1)
        t = str(time.clock())
        print(t)
        socketio.emit('log', {'data': t, 'time': t})

Answer 1

在您的客户端，您可以使用setInterval 方法每隔几毫秒发出一个事件。

在服务器端，您可以发出可以发送数据的事件。

所以，总的来说，它会像下面这样：

客户端：

setInterval(function() {
    socket.emit('time');
}, 1) // 1 millisecond is almost close to continues

socket.on('time', function(data) {
    console.log(data)
});

服务器端：

@socket.on('time')
def time():
    now = datetime.now()
    current_time = now.strftime("%H:%M:%S")
    emit('time', current_time)

在浏览器的控制台日志中，您可以看到继续记录的数据。

我希望这会有所帮助。

注意：我在此处提供的客户端代码是纯 JavaScript。由于 React 是基于 JavaScript 的，所以会有一些或其他的方式来使用setInterval。