在 HTML5 图表和表格中流式传输实时数据

Question

我使用 Flask 微框架开发了一个 python 网络应用程序。我有一些由 Bokeh 生成的交互式图和一些 HTML5 tables。我的问题是如何即时更新我的 table 和图表数据？

我是否应该使用线程 class 并设置计时器，然后每隔几秒重新运行我的代码并将更新的数据条目提供给 table 和图表？

我也研究了 flask-socketIO，但我发现的只是发送和接收消息，有没有办法使用 flask-socketIO 来达到这个目的？

我也用过一些 Bokeh-server，我应该朝那个方向发展吗？这是否意味着我需要运行两台服务器？我的烧瓶网络服务器和散景服务器？

我是刚接触这种工作。如果您能详细说明我需要做什么，我将不胜感激。

Answer 1

如果您已经在使用 d3.js（我认为如果您使用的是散景），则使用 d3 计时器比使用 setInterval 更优化，因为它不会继续运行如果该图不可见，因为它使用了 requestAnimationFrame。但是，我认为 setInterval 更易于阅读。

function getData(){
    $.get( "ajax/test.html", function( data ) {
      $( ".result" ).html( data );
    });
}

var getDataCallback = function() {
    return function() {
        getData();
        d3.timer(getDataCallback(), 1000);
        return true;
    }
};

d3.timer(getDataCallback(), 10000);

Answer 2

你真是把两个问题合二为一了。真的，你在这里有两个问题。首先，您需要一种机制来定期让客户端访问您的表格和图表的更新数据。其次，您需要客户端将这些更新合并到页面中。

对于第一个问题，基本上有两种选择。最传统的是定时向服务器发送Ajax个请求（即页面后台那个运行的请求）。另一种方法是使用 WebSocket 增强您的服务器，然后客户端可以建立永久连接，只要服务器有新数据，它就可以将其推送到客户端。使用哪个选项很大程度上取决于您的需要。如果更新频率不太高，我可能会使用后台 HTTP 请求，而不用担心将 Socket.IO 添加到组合中，这有其自身的挑战。另一方面，如果您需要一种动态的、不断更新的页面，那么 WebSocket 可能是个好主意。

一旦客户端有了新的数据，你就得处理第二个问题了。您处理该问题的方式特定于您使用的表格和图表。您基本上需要编写 Javascript 代码，将从服务器接收到的这些新值传递到这些组件中，以便更新页面。不幸的是，没有自动的方法来引起更新。您显然可以丢弃当前页面并使用新数据从头开始重建它，但这看起来不太好，因此您可能应该找到这些组件公开了哪些类型的 Javascript API 来接收更新。

希望对您有所帮助！

在 HTML5 图表和表格中流式传输实时数据

Streaming live data in HTML5 graphs and tables

html

python

flask

bokeh

flask-socketio