浅谈可视化大屏数据获取

大家好，我是阳树，今天呢，我们来聊聊可视化大屏的数据捕获问题，首先我抛出几个问题。

Q:你怎么保证数据的实时性？你怎么减少传输过程中的性能损耗？

短轮询

短轮询是一种基本的客户端-服务器通信模式。在短轮询中，客户端定期向服务器发送请求询问是否有新数据可用。服务器接收到请求后，如果有新数据可用，则立即返回数据；如果没有新数据，则返回一个空响应。客户端在接收到响应后，必须立即发起下一个请求以获取最新数据。

特点：
实现简单，但会导致频繁的请求和响应，增加了服务器的负载，并且可能会有一定的延迟，因为客户端必须等待服务器响应后才能获取新数据。

长轮询

长轮询是一种改进的客户端-服务器通信模式，旨在减少短轮询的频繁请求。在长轮询中，客户端发送一个请求到服务器，但服务器不会立即响应。相反，服务器会保持请求打开一段时间，直到有新数据可用或超时为止。一旦有新数据可用，服务器会立即响应请求并返回数据给客户端。客户端在接收到响应后，会立即再次发起一个长轮询请求。

主要优点：
减少了频繁的请求和响应，降低了服务器的负载。然而，由于客户端必须等待服务器响应，因此仍然存在一定的延迟。

Websocket

WebSocket 是一种全双工通信协议，允许在单个 TCP 连接上进行实时双向通信。与短轮询和长轮询不同，WebSocket 是一种持久连接，通过在客户端和服务器之间建立一个长时间打开的连接，实现实时通信。

主要特点：
包括低延迟、高效性和双向通信能力。一旦建立了 WebSocket 连接，服务器和客户端可以随时发送数据给对方，而不需要频繁的请求和响应。这使得 WebSocket 在实时聊天、实时数据更新等场景中非常有用。

我的浅浅尝试

其实在做我的大屏项目的时候，真的最开始就说短轮询来做，就做的非常的简陋，需要这个数据，我就拿一次这个数据，最开始的情况真的就是觉得能跑就行，并不 care 优化啥的。

直到我的项目做的差不多了，我才开始思考说，这个部分能不能优化。

但当时并没有了解过长轮询和 Websocket，所以我优化就做的相当的放荡不羁。

为了保证性能损耗减小，首先我引入了一个队列，队列的容量默认为 20，然后分别存 jsError, httpError 等等，存在哪呢？我们认为 localStorage 的 5M 已经足够用了，并不需要去使用 indexDB。一旦数据量达到了 20，我们就会进行倾倒，将数据传输到后端，然后清空 localStorage 中的此队列数据。

为了保证数据的时效性，我每半小时查看一次队列，如果队列不为空，我们就进行倾倒，将数据传输给后端，然后清空 localStorage 中的此队列数据。