WebSocket与定时任务搭配使用:前端页面数据实时刷新

最新推荐文章于 2024-07-24 17:05:18 发布
最新推荐文章于 2024-07-24 17:05:18 发布
阅读量766 收藏
点赞数 1
文章标签： websocket 网络协议 网络
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Big_math_er/article/details/132554254
版权

WebSocket的使用流程：1、引入spring-boot-starter-websocket依赖；2、配置类里面@Bean一个ServerEndpointExporter对象；3、编写一个websocket类，标注@Compnent和@ServerEndpoint("url")注解，按需重写onopen，onmessage，onclose方法，session.getBasicRemote().sendText(".....")像浏览器发送响应。

@Scheduled(cron = "*/5 * * * * *")注解是spring内置的，需要在启动类上@EnableScheduling。

onopen方法中存入到sessionHashMap中一个session，后面根据不同浏览器发送的不同voteId可以取出来自己的session。

 

定时任务中循环上面的 类中的sessionHashMap，完成前端页面的数据 "实时" 推送

J_7
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
物联网设备数据流转之数据如何实时推送至前端：WebSocket前端接收
Heartsuit的博客
06-05 5103
在实现 前端接收前，我们先说明白一件事，为什么要使用WebSocket？这要从 协议说起，我们知道 协议只能由客户端发起，而且是短链接，这就会导致我们在服务端拿到最新的数据时，没办法第一时间通知客户端。诸如我们当前涉及物联网设备数据展示的场景，用户一般都会要求看到的设备数据是最新的，这是一个极其正常的需求。那么针对这一简单的需求，我们一般会怎么做？实际项目中，在没接触 前（讲真，在那年少无知的蛮荒时代，我们甚至让用户手动刷新页面，或者前端定时刷新页面以获取最新的设备数据，eg: 1分钟、3分钟、5分
vue后端数据刷新_Vue+WebSocket 实现页面实时刷新长连接
weixin_39989190的博客
12-19 2246
最近vue项目要做数据实时刷新，折线图每秒重画一次，数据每0.5秒刷新一次，说白了就是实时刷新，因为数据量较大，用定时器估计页面停留一会就会卡死。。。与后台人员讨论过后决定使用h5新增的WebSocket来实现数据实时展示，记录一下过程以及碰到的问题；注意：页面刷新长连接会被关闭，其实进入当前页面建立长连接的目的就是页面不用F5刷新，所有数据自动实时刷新，如果还是来回F5大刷页面那就没有意义了。。...
webSocket+定时任务---＞实现前后端交互,定时刷新前端列表页面
QE_77的博客
04-09 524
websocket+定时任务 定时刷新列表
【SpringBoot中配置websocket，实现前端数据自动更新】
weixin_47185482的博客
06-15 566
websocket的应用——实现前端数据自动更新
服务器推送消息到前端实现页面数据实时刷新-分布式Websocket技术方案
莫忘莫忧的博客
03-08 1万+
服务器推送消息到前端实现页面数据实时刷新-分布式Websocket技术方案 背景 项目上有个新的需求，需要在系统数据发生改变时，前端页面要实时刷新页面数据。 简单的方案一：   最简单的方式就是直接在前端页面使用定时器定时刷新数据。   这个方案除非是定时的时间设置很短，否则还是会存在页面刷新不及时的情况。但是如果定时时间设置得过短，一旦客户端使用量变多，整个系统的请求数量会变的非常多，需要消耗许多服务器资源。故放弃这个方案。 方案二：   服务端推送的方式，通过使用Websocket，进入页面时，前端就与
springboot使用websocket做定时刷新任务 · 教程和websocket连接测试
来一杯Java的博客
05-31 2464
springboot websocket 使用和测试
WebSocket服务端定时刷新数据到不同页面
a_4_3_4_b_2的博客
06-19 1307
WebSocket服务端定时刷新数据到不同页面 解决websocket同时向两个不同页面推送不同数据 前端两个网页 index1.html <div></div> <script th:src="@{/static/jquery-3.1.1.min.js}"></script> <script> $(function () { ...
使用WebSocket解决页面数据实时同步
qq826776005的博客
11-20 1万+
功能: 一个页面需要在不同的PC端访问,在某一PC端对网页内容发生改变时,其他PC端页面数据实时更新显示. 实现: 采用webSocket+AOP通知的方式实现 思路: 当页面数据修改时,会通过后端保存方法存进数据库,这样我们就要一个入口,当数据保存方法被调用执行完后(AOP后置通知),触发webSocket消息机制,向前端发送更新提示,前端调用更新方法进行页面更新. 实现过程: 在...
webSocket实现数据的实时推送(附：前后端代码)
热门推荐
Javaの甘乃迪的博客
04-13 3万+
webSocket实现数据的实时推送(附：前后端代码)
vue2中实现接口轮询和页面数据定时刷新
前端-尔嵘
11-03 2795
在Vue中实现接口的定时刷新
springboot集成websocket和定时任务实现日志推送
04-10
在本文中，我们将深入探讨如何在Spring Boot应用中集成WebSocket和定时任务来实现实时日志推送。首先，让我们理解每个关键组件的作用及其在系统中的交互。 **WebSocket** 是一种在单个TCP连接上进行全双工通信的...
项目中实现前端页面更新提示用户刷新页面
06-06
在前端开发中，保持用户界面与服务器数据同步是至关重要的，尤其是在实时性要求较高的Web应用中。当后台数据发生变化时，前端页面需要及时更新以显示最新的信息。本篇将详细介绍如何在项目中实现前端页面更新并提示...
websocket消息实时推送
08-22
在这个"websocket消息实时推送"的小案例中，我们关注的是如何利用WebSocket技术来实现实时的数据更新，并在用户执行特定操作后通知页面刷新。 首先，我们要理解WebSocket的基础原理。WebSocket协议基于TCP，它通过...
fusionchart实时刷新数据总结
11-01
例如，使用Servlet或者Controller来处理HTTP请求，生成XML或JSON数据，然后配合前端JavaScript代码实现数据的定时拉取或实时推送。 总的来说，FusionCharts提供多种方式实现数据的实时刷新，开发者可以根据项目需求...
Echarts 柱状图自动刷新数据
11-01
- **动态数据加载**：如果数据源是实时的，如WebSocket或Ajax请求，可以在接收到新数据时直接更新数据并刷新图表。 ```javascript socket.onmessage = function (event) { var newData = JSON.parse(event.data); ...
《计算机网络》（学习笔记）
最新发布
qiqi_liuliu的博客
07-24 1973
网络（Network）由若干结点(Node)和连接这些结点的链路(Link)组成多个网络还可以通过路由器互连起来，这样就构成了一个覆盖范围更大的网络，即互联网（互连网）。因此，互联网是"网络的网络（Network of Networks）"因特网（Internet）是世界上最大的互连网络（用TCP/IP）internet是通用名词，互连的网络都叫internet注：互连、自治、集合。在计算机内部或在相邻设备之间近距离传输时，可不经过调制就在信道上直接进行的传输方式称为基带传输。
【SOLUTION】Spring Boot 集成 WebSocket
朝拜者
07-24 1173
在面对大文件上传时通常遇到无法即时获取上传进度的问题，在没有WebSocket之前都是异步上传，然后通过轮询的方式实时获取上传进度。Spring如果想实现异步方法，需要在方法上添加。注解，并且在启动类或配置类上添加。方法执行，而是立即返回任务id。是异步方法，所以这里不会等待。
UDP/TCP协议解析
reyas的博客
07-22 1289
我最近开了几个专栏，诚信互三！====> |||：：刷题教程来自网站。|||====> |||：：记录我学习C++的经历，看完你一定会有收获。|||====> |||：：记录我学习Linux的经历，看完你一定会有收获。|||====> |||：：记录我复习C#的经历，，不定期更新。|||====> |||：：记录我学习计算机网络，看完你一定会有收获。|||
前端页面怎么统一控制数据的刷新
03-31
前端页面统一控制数据的刷新可以通过以下方法实现： 1. 使用状态管理工具：例如React中的Redux、Vue中的Vuex等，可以将数据存储在全局状态中，通过派发action或mutation来更新数据，从而实现统一控制数据的刷新。 2. 使用事件总线：例如Vue中的$emit和$on、jQuery中的trigger和on等，可以通过自定义事件来通知各个组件进行数据更新。 3. 使用定时器：通过定时器定时获取最新数据，然后更新到页面中，从而实现数据的定时刷新。 4. 使用WebSocket：WebSocket可以建立实时的双向通信连接，当后端数据更新时，可以通过WebSocket将最新数据推送给前端页面，从而实现实时数据的刷新。 无论使用哪种方法，都需要在代码编写过程中注意遵循一定的代码规范和设计原则，以便更好地管理和维护代码。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值