Question

我对reactjs或socket.io的理解肯定存在一个简单的错误。我有一个服务器发送从2到5迭代的“速度”值，以及一个接收它们并显示它们的客户端。

问题：

预期行为：客户端显示每秒从1到5迭代的数字，并在5处停止。客户端记录它已收到4条带有更新速度值的消息（每秒发送一条新消息）

实际行为：客户端显示速度为1.客户端等待4秒。客户端显示速度为5，此时，日志已从服务器以迭代速度收到4条消息。

问题是什么？这几乎就像服务器同时发送所有4个速度的消息一样。

客户代码：

import React from 'react';
import {CircleGauge} from 'react-launch-gauge';
import io from 'socket.io-client';

class App extends React.Component {
    constructor(props, context) {
        super(props, context)
        this.state = {
            speed: 1
        };
    }
    componentDidMount() {
        const socket = io('http://localhost:5000');
        socket.on('data update', data => 
            this.setState( { speed: data }, 
                () => console.log("got the speed: " + this.state.speed)));
        socket.open();
    }

    render() {
        return (
            <div>
                <p> The velocity received is: {this.state.speed}  </p>
            </div>
        );
    }
}
export default App;

服务器代码：

from flask import Flask, render_template
from flask_socketio import SocketIO, emit
import time

sendData = False;

app = Flask(__name__)
socketio = SocketIO(app)

@socketio.on('connect')
def dataSent():
    print('they connected**********************************')
    for i in range(2,6):
        socketio.emit('data update', i)
        time.sleep(1)
        print(i)


if __name__ == '__main__':
    socketio.run(app, debug = True)

Answer 1

当客户端通过

请求websocket连接时

const socket = io(‘ws://localhost:5000’);

它必须等到首先建立连接，然后它才能对消息做任何事情。

时建立连接

@socketio.on(‘connect’)
def ...

结束了。所以看起来客户端等待所有发射完成，然后开始对消息做出反应。

您可能需要使for-loop异步，以便服务器在发出数据之前首先响应客户端的连接。例如，您可以将for循环划分为单独的函数并使用flask的后台任务：

@socketio.on(‘connect’)
def dataSent():
    print(‘...’)
    socketio.start_background_task(target=emitloop)

def emitloop():
    for i in range(2,6):
        socketio.emit(‘data update’, i)
        time.sleep(1)

（如果将flask配置为使用gevent作为后台任务，则需要安装gevent或flask的gevent插件。）

您也可以尝试使用基于函数的setState（即将函数传递给setState而不是状态对象），因为setState是异步的，反应可以将它们组合在一起。

react + socket.io发出不通过 - 基本错误

1 个答案: