数据大屏--->前端实时更新数据的几种方式

和科比合砍81分 2024-06-13 09:03:03 阅读 85

参考文章:实时数据更新

一、轮询:简单来说轮询就是客户端不停地调用服务端接口以获得最新的数据

1、短轮询:每隔3s向服务器发送一次请求- - -请求数据

优点:最大的优点就是实现简单

缺点:(1)无用的请求多,客户端不知道服务端什么时候数据更新,只能不停的向服务端发送请求,

(2)数据实时性差:客户端还是需要一段时间(3s)才能拿到最新的数据

2、长轮询:长轮询,客户端发起请求后,服务端发现当前没有新的数据,这个时候服务端没有立即返回请求,而是将请求挂起,在等待一段时间后(一般为30s或者是60s),发现还是没有数据更新的话,就返回一个空结果给客户端。客户端在收到服务端的回复后,立即再次向服务端发送新的请求。这次服务端在接收到客户端的请求后,同样等待了一段时间,这次好运的是服务端的数据发生了更新,服务端给客户端返回了最新的数据。客户端在拿到结果后再次发送下一个请求,如此反复。

优点:解决了短轮询每隔几秒向服务端频繁发送请求的问题;

缺点:(1)服务端资源大量消耗,服务端数据未更新时需要挂起客户端的请求

(2)难以处理数据更新频繁的情况

二、webSocket:用最简单的话来介绍WebSocket就是:客户端和服务器之间建立一个持久的长连接,这个连接是双工的,客户端和服务端都可以实时地给对方发送消息。首先客户端会给服务端发送一个HTTP请求,这个请求的Header会告诉服务端它想基于WebSocket协议通信,如果服务端支持升级协议的话,会给客户端发送一个Switching Protocal的响应,它们之间后面都是基于WebSocket协议来通信了。—需要服务端配合操作;

webSocket优点: (1)客户端和服务端建立的连接次数小,理想情况下客户端只需要发送一个HTTP升级协议就可以升级到WebSocket连接,后面的消息推送都是通过这个通道进行通信,无需再次建立连接.

(2)消息实时性高:因为客户端和服务端的连接一直是建立的,而且是全双工通信;

缺点:某些代理层软件(如Nginx)默认配置的长连接时间是有限制的,可能只有几十秒,这个时候客户端需要自动重连。要想突破这个限制你就需要将从客户端到服务端之间所有的代理层的配置都改掉,在现实中这可能是不可行的;

在这里插入图片描述

三、SSE(server-sent Events) 是一个基于HTTP协议的服务端向客户端推送数据的技术,单向—股票推送

在这里插入图片描述

客户端向服务端发起一个持久化的HTTP连接,服务端接收到请求后,会挂起客户端的请求,有新消息时,再通过这个连接将数据推送给客户端。需要注意的是和WebSocket长连接不同,SSE的连接是单向的,也就是说它不允许客户端向服务端发送消息。

优点: (1)连接次数小,一般客户端和服务端只有一个持久的HTTP连接,因此性能也是很好的

(2)数据实时性高:因为服务端和客户端是持久的连接,所以有新消息的话可以直接推送到客户端;

缺点:(1)单向通信:SSE建立的HTTP长连接是单向的,不允许客户端向服务端推送数据

(2)配置错误的话,客户端需要不断和服务端进行重连.



声明

本文内容仅代表作者观点,或转载于其他网站,本站不以此文作为商业用途
如有涉及侵权,请联系本站进行删除
转载本站原创文章,请注明来源及作者。