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

这篇具有很好参考价值的文章主要介绍了数据大屏--->前端实时更新数据的几种方式。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

参考文章:实时数据更新

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

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协议的服务端向客户端推送数据的技术,单向—股票推送

数据大屏动态获取数据的方法,前端文章来源地址https://www.toymoban.com/news/detail-854523.html

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

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

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

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

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

到了这里,关于数据大屏--->前端实时更新数据的几种方式的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 实时数据流无忧:用 SpringBoot 和 SSE 打造动态前端更新的终极指南

    你知道什么是开发者的梦魇吗?慢!慢!慢!在一个需要实时数据更新的应用中,如果数据像乌龟一样慢吞吞地爬行,那用户体验就会像坐过山车一样直线下降。所以今天,我们要化身为数据传输的超级英雄,用 SpringBoot 和 SSE(服务器发送事件)打造一个超酷、超快、而且超

    2024年02月02日
    浏览(28)
  • Vscode常用插件及设置(前端版,实时更新ing

    写完代码后鼠标右击将代码在浏览器中运行 汉化Vscode html、css、js、less图标显示 代码块写完后使用Live Server,每次修改代码Ctrl+S后浏览器无需再刷新即可跟着变化, 与win+左键或win+右键搭配爽歪歪,直接效率起飞!!! 外联样式提示插件 错误提示信息 将.less文件生成一个.

    2024年02月02日
    浏览(31)
  • 【前端学习记录】vue中使用el-upload组件时,上传文件进度条没有实时更新

    问题背景 今天在项目中遇到一个问题,使用el-upload组件时,上传文件进度条没有实时更新,需要手动点击一下才会更新。 原理及可尝试方案 el-upload 组件默认的进度条是通过 Ajax 请求上传文件,并且进度条通过监听 xhr.upload 的 progress 事件来实时更新。但是,有些浏览器在处

    2024年02月01日
    浏览(40)
  • Python如何随数据更新实时画图?Python实时动态绘图

    在数据分析和可视化场景中,我们常常需要实现实时动态图表,比如每分钟读取数据库新的记录,及时更新图表显示最新数据,而不是静态显示某个时间点的数据。本文将介绍使用Python matploblib库的animation功能实现实时动态绘图的方法。 问题背景 我们有一个Excel表,其中记录

    2024年02月12日
    浏览(36)
  • 前端大屏常用的几种适配方案

    方 案 实现方式 优点 缺点 vm vh 1.按照设计稿的尺寸,将px按比例计算转为vw和vh 1.可以动态计算图表的宽高,字体等,灵活性较高 2.当屏幕比例跟 ui 稿不一致时,不会出现两边留白情况 1.每个图表都需要单独做字体、间距、位移的适配,比较麻烦 scale 1.通过 scale 属性,根据屏

    2024年02月02日
    浏览(32)
  • Java面试基础|数据结构 -实时更新

    1.HashMap和ConcurrentHashMap介绍 核心是一个Node数组, 数据结构与hashMap相似 使用CAS操作来实现无锁的更新,提高了并发性。当更新节点时,它会使用CAS来替换节点的值或链接,如果CAS失败,表明有其他线程也在进行修改,当前线程可以重试或锁定节点 对于复杂的结构修改操作

    2024年01月17日
    浏览(37)
  • Rust采集天气预报信息并实时更新数据

    最近天气温度时高时低,虽说这是大自然的力量人无法抗拒,不能改变那么我们就做预防工作。今天我将用Rust写一个爬虫程序实现电脑桌面实时更新天气情况,这个是一个底层逻辑,需要多方面配合,不仅要有完善的代码还有爬虫IP试试更新才能保证数据最完整最新。 这是一

    2024年01月19日
    浏览(36)
  • vue中组件动态传值,实现数据实时更新

    在一些项目需求中需要父组件向子组件动态传值,比如父组件动态通过axios获取数据,然后传给子组件,子组件根据拿到的数据进行展示。 props传值的时候,只会首次传递绑定的值,不会变化 方式1 利用watch监听props变化 方式2 利用ref获取子组件,调用子组件的方法将值传递过

    2024年02月16日
    浏览(36)
  • 小程序弹幕自动滚动实时更新数据功能

    需求 最近遇到的需求,写一个弹幕功能 大致就是实现这样的效果 弹幕轮播,上下两排,一共30个弹幕,30个轮播完毕之后获取新的弹幕数据 实现方法  目前我想到的实现方法是用css的动画来实现这个功能 布局层级 给barrageBox盒子一个相对定位 给barrageList绝对定位 先将list盒子

    2024年01月20日
    浏览(32)
  • WPF绑定数据,增删改后实时更新TreeView/ListView

    WPF的界面的确好看,也引入了很多新功能,和winform相比更先进更强大......那么狗儿蛋,代价是什么? 代价就是WPF学起来比较费力。 数据绑定是WPF的特色之一,可以省去写代码更新UI界面的工作。这次打算做一个管理数据的小软件,自然的我也打算在界面上弄个TreeView,然后把

    2024年02月09日
    浏览(42)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包