如何使用websocket在网页上动态示实时数据的折线图

Posted 2023-05-18

参考技术A 你既然已经知道了用websocket和flask，可以用flask-SocketIO这个插件，结合一个前端图表组件，比如：echarts、HighCharts或者amCharts，websocket接收到新数据实时更新表格即可。 参考技术B 需要在树莓派上搭建一个webserver（使用flask），将树莓派采集到的传感器实时数据（用python采集）以折线图(或柱状图)的方式动态显示在网页上。本回答被提问者采纳

如何在网页上存储来自 websocket 的实时数据？

【中文标题】如何在网页上存储来自 websocket 的实时数据？

【英文标题】：How to store real time data from a websocket on a webpage?

【发布时间】：2021-09-21 08:50:38

【问题描述】：

我正在将数据从 websocket 服务器（python 软件）流式传输到网页。当我访问网页时，会建立 websocket 连接，并且我有一些 HTML 代码开始绘制数据。随着新消息的出现，图表会更新。

目前，当我刷新页面时，所有传入的数据都会丢失，绘图会清空，并且必须等待新消息进入才能再次开始绘图。

理想情况下，我希望客户端始终监听服务器并将数据保存在某处，这样当我访问页面时，我可以看到一整天的图表，而不是从我加载网站时和刷新时页面图表不会重置。这可能吗？任何正确方向的帮助或指导将不胜感激，

谢谢

【参考方案1】：

即使重新启动也可以在网页上存储数据：

使用Cookie Session 在您的浏览器上存储数据。您也可以使用Local storage 或Session storage。比如当你更换/重启浏览器时它会丢失，它并不总是有效

向 python 服务器请求所有数据。这需要在服务器端进行更改，并将数据存储在服务器端。

使用第三个平台来存储数据。您可以从服务器推送它来检索它，或者只是从客户端发送到第三个，并在刷新网页时获取所有旧值。

我建议你第一个可以对应你想要的。否则，如果您更改浏览器/想要在加入页面之前获取创建的数据，您将需要其他东西来检索所有需要的数据。

【讨论】：

没问题 :)，哪种解决方案可以解决您的问题？

第三种方法，因为我需要绘制即使我不在网站上也会生成的数据。我已经放弃了 websocket，现在使用 SQL 来存储我的数据，并且网站可以在需要时获取它。

ok :) 所以如它回答，你能接受吗？