个人中心
gpt4 book ai didi

javascript - 如何在我的 Flaskr/Javascript 图表上显示过去的数据？

转载 作者：行者123 更新时间：2023-11-30 14:17:20 34 4
gpt4 key购买 nike

我正在构建一个 Flaskr 网络应用程序。从我的 Flask 后端发送一些数据，这些数据显示在带有 Javascript 前端的网页上。数据通过SocketIO发送。

我添加了一个图表来显示这些数据，但问题是每次打开页面时图表都会重置。所以当我打开网页时，我应该能够在打开之前看到图表的样子。很快，它应该有历史数据，而不是实时数据。

我知道我应该寻找一种方法来存储这些数据，但我对此还很陌生，我找不到解决方法。有人可以帮助我吗？

这是 Flask 客户端的样子:

from flask_socketio import SocketIO, emit
from flask import Flask, render_template, url_for, copy_current_request_context
from random import random
from time import sleep
from threading import Thread, Event


__author__ = 'slynn'

app = Flask(__name__)
app.config['SECRET_KEY'] = 'secret!'
app.config['DEBUG'] = True

#turn the flask app into a socketio app
socketio = SocketIO(app)

#random number Generator Thread
thread = Thread()
thread_stop_event = Event()


class RandomThread(Thread):
    def __init__(self):
        self.delay = 1
        super(RandomThread, self).__init__()

    def randomNumberGenerator(self):
        """
        Generate a random number every 1 second and emit to a socketio instance (broadcast)
        Ideally to be run in a separate thread?
        """
        #infinite loop of magical random numbers
        print("Making random numbers")
        while not thread_stop_event.isSet():
            number = round(random()*10, 3)
            print(number)
            socketio.emit('newnumber', {'number': number}, namespace='/test')
            sleep(self.delay)

    def run(self):
        self.randomNumberGenerator()


@app.route('/')
def index():
    #only by sending this page first will the client be connected to the socketio instance
    return render_template('index.html')

@socketio.on('connect', namespace='/test')
def test_connect():
    # need visibility of the global thread object
    global thread
    print('Client connected')

    #Start the random number generator thread only if the thread has not been started before.
    if not thread.isAlive():
        print("Starting Thread")
        thread = RandomThread()
        thread.start()

@socketio.on('disconnect', namespace='/test')
def test_disconnect():
    print('Client disconnected')





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

这就是 Javascript/图表部分的样子:

   $(document).ready(function() {
  //connect to the socket server.
  var socket = io.connect('http://' + document.domain + ':' + location.port + '/test');
  var numbers_received = [];


  //receive details from server
  socket.on('newnumber', function(msg) {
    console.log("Received" + msg.number);
    //maintain a list of ten numbers
    if (numbers_received.length >= 1) {
      numbers_received.shift()
    }


    numbers_received.push(msg.number);
    numbers_string = '';
    for (var i = 0; i < numbers_received.length; i++) {
      numbers_string = numbers_string + '<p>' + numbers_received[i].toString() + '</p>';
    }
    $('#log').html(numbers_string);
  });



  function getData() {


    }
    Plotly.plot('chart',[{
        y:[numbers_received[1]],
        type:'line'
        }]);

        console.log('TEST' + numbers_received[0]);

        var cnt = 0;
        setInterval(function(){
        Plotly.extendTraces('chart',{ y:[[numbers_received[0]]]}, [0]);

        cnt++;

        if(cnt >10000000) {
            Plotly.relayout('chart',{
                xaxis: {
                    range: [cnt-9,cnt]
                    }
                });
            }
    },15);

});

index.html

<!DOCTYPE html>
<html>
<head>
    <script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/socket.io/1.3.6/socket.io.min.js"></script>
    <script src="static/js/application.js"></script>

    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">


    <script src="https://cdn.plot.ly/plotly-latest.js" charset="utf-8"></script>

    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>


</head>
<body>

<div class="container">
  <div class="jumbotron">
    <h1>Asynchronous Flask Communication</h1>
    <p>Random numbers generated by the Flask server will appear below, asynchronously.</p>
    <p>Details <a href='https://www.shanelynn.ie/asynchronous-updates-to-a-webpage-with-flask-and-socket-io/' target='_blank'>here.</a></p>
  </div>
</div>


<div class="container" id="content">
    <div class="row">
        <p>Asynchronous page updates will appear here:</p>
        <h3>Number list:</h3>
        <div id="log">
    </div>
</div>

<div id="chart"></div>

</body>
</html>

最佳答案

只传递一个数字而不使用中央同步的问题在于，当您收到旧历史记录并对其进行处理时，API 已经生成了新数字，因此真正的任务是如何将当前状态或数字与即使您设法通过历史记录，也会实时生成以前生成的。

现状:

  • 从 API 成为活着。
  • 客户端在通过套接字连接到 API 时获取实时提要，然后从当前号码读取提要，直到断开连接。
  • 不会将之前生成的号码提供给任何客户。
  • 此外，如果客户端连接读取一段时间后关闭，然后再次连接，它会从当前点开始绘制。

在这种情况下，您需要让客户端获取所有先前生成的数字并绘制它们，然后再开始读取当前生成的数字。

技术难点:

  • 解决方案应该在中途同步，而客户收到旧的通过 JSON 或其他方式传输数据，您仍然需要在之后对齐绘图并一次又一次地执行同步功能，直到它达到与当前生成的数字相同的水平。
  • 您必须以一种方式管理所有客户端以前和当前生成的提要(除非理论上一个连接API 启动并从第一个获取提要)。

可能，您问题的理论解决方案不仅是实时工具，如 https://www.rethinkdb.com/ ，还有先前生成的数字的数据 at-rest 的概念。所以再次强调，理论上你必须调用递归函数来:

  • 您可以为每个生成的数字分配时间戳，以便与当前数字或您拥有的数字进行比较，并了解它是更高还是更低。
  • 绘制收集并存储到服务器中的旧数据，并在初始连接时提供。
  • 在绘制最旧的数据时绘制生成的数据(这些批处理是从您连接到完成旧数据的那一刻生成的)
  • 绘制第二次绘图期间生成的数据。
  • 检查您是否达到了当前水头。
  • 重复||如果 head 则继续仅绘制最新的。
  • 绘制函数应该能够处理列表或单个数字，从而支持两种情况，无论是在后面还是在收到单个数字时。

关于javascript - 如何在我的 Flaskr/Javascript 图表上显示过去的数据？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53356100/

34 4 0
文章推荐： c# - 如何仅在 wpf 列表框的一行上更改前景色？
文章推荐： ios - 如何获取特定 UITableViewCell 上方(或下方)的 TableView Cell
文章推荐： c# - autofac/c#: A generic factory for a specific base class?
文章推荐： javascript - 通过单击 AmChart4 使系列隐藏和显示
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com