服务器给前端实时推送数据轻量化解决方案eventSource+Springboot

news2024/11/15 7:18:15

一、前端代码

body代码

<div id="result"></div>

js代码

$(function(){
    if(typeof(EventSource) != "undefined")
    {
        var source = new EventSource("/demo/getTime");
        source.onmessage = function(event) {
            console.log(event.data);
            $("#result").html(event.data);
        };
        source.addEventListener('error', function (event) {
            console.log("错误:" + event);
        });
        source.addEventListener('open', function (event) {
            console.log("建立连接:" + event);
        });
    } else {
        document.getElementById("result").innerHTML="抱歉,你的浏览器不支持 server-sent 事件...";
    }
})

二、后端代码

WebFlux 框架依赖jar包

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-webflux</artifactId>
</dependency>

控制器代码

@GetMapping(value = "/getTime",produces="text/event-stream;charset=UTF-8")
@ApiOperationSupport(order = 1)
@ApiOperation(value = "详情", notes = "传入name")
public Flux<String> getTime() {
	return Flux.interval(Duration.ZERO,Duration.ofSeconds(1)).map(i -> "最新时间:" + DateUtil.time() + "-" + i);
}

Flux.interval(Duration.ZERO,Duration.ofSeconds(1)),等待0秒开始,间隔1秒,Flux流数据里面的数字加1
三、效果展示
数据推送效果时间和数字一直在增加,后端在不断推送,前端订阅到数据更新到页面

相对于websocket简单很多,只需要很少的代码就实现前端数据的实时刷新,只不过eventSource是单向数据通信,websocket可实现双向通信。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/987249.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

MobileViT v3论文超详细解读(翻译+精读)

前言 今天读一下MobileViT v3的论文《MOBILEVITV3: MOBILE-FRIENDLY VISION TRANS- FORMER WITH SIMPLE AND EFFECTIVE FUSION OF LOCAL, GLOBAL AND INPUT FEATURES》这篇论文的实验部分写得还是很不错的&#xff0c;很值得我们借鉴。 论文原文&#xff1a; https://arxiv.…

迷茫

作者&#xff1a;阿秀 InterviewGuide大厂面试真题网站&#xff1a;https://top.interviewguide.cn 小伙伴们大家好&#xff0c;我是阿秀。 过去几年转码之风盛行&#xff0c;有些是通过报考培训班的形式转行&#xff0c;还有一些则是通过考研读研转码这种形式来转行&#xff0…

【Java 基础篇】Java Calendar 类:日期和时间处理指南

在 Java 中&#xff0c;日期和时间的处理是常见的任务之一。为了更灵活地处理日期和时间&#xff0c;Java 提供了 java.util.Calendar 类&#xff0c;它提供了一种面向对象的方式来操作日期和时间。本篇博客将详细介绍 Calendar 类的使用方法&#xff0c;特别是面向基础小白的读…

右值引用,移动语义,完美转发

文章目录 一、什么是左值、右值二、什么是左值引用、右值引用2.1 左值引用2.2 右值引用2.3 对左右值引用本质的讨论 三、右值引用和std::move使用场景3.1 右值引用优化性能&#xff0c;避免深拷贝浅拷贝重复释放深拷贝构造函数移动构造函数 3.2 移动语义&#xff08;move&#…

js案例:选字游戏

目录 效果预览图 游戏规则 整体思路 完整代码 html部分 js部分 效果预览图 游戏规则 1.游戏时间为30s&#xff0c;30s倒计时结束弹出游戏结束和对应的游戏分数。 2.根据中间大字的颜色&#xff0c;点击下面对应的文字。 大字的颜色 点击的文字&#xff08;列如&#…

外汇MT4教程:如何下载和安装MT4交易平台?

对于外汇爱好者来说&#xff0c;MT4交易平台是一个不可或缺的工具。如果您是新手&#xff0c;可能还不太了解如何下载和安装MT4交易平台。本文将为您介绍如何下载和安装MT4交易平台&#xff0c;以及如何使用它进行外汇交易。 第一步&#xff1a;下载MT4交易平台 首先您需要前往…

一款内网信息收集利用工具

FuckDomainMini 简介 这是一款基于java开发Windows的内网信息收集、利用工具 可以节省您的信息收集所花费的&#xff0c;又或者是做免杀所花费的时间 现在这个版本是先行版本&#xff0c;目前先行版只有一个功能&#xff0c;更多的功能还在调试与开发中。 尽情期待&#x…

成都瀚网科技有限公司:抖音商家怎么免费入驻?

随着抖音成为全球最受欢迎的短视频平台之一&#xff0c;越来越多的商家开始关注抖音上的商机。抖音商家的进驻可以帮助商家扩大品牌影响力和销售渠道。那么&#xff0c;如何免费进入抖音成为商家呢&#xff1f;下面就为大家介绍一下具体步骤。 1、抖音商家如何免费注册&#xf…

一元多项式

过程 #define _CRT_SECURE_NO_WARNINGS #include<iostream> #include<string> #include<map> #include<vector> #include<queue> #include<algorithm> using namespace std;int n;double cP(const vector<double>& a, double x…

【Java 基础篇】Java日期和时间格式化与解析指南:SimpleDateFormat详解

日期和时间在软件开发中经常被用到&#xff0c;无论是用于记录事件、计算时间间隔还是格式化日期以供用户友好的展示。Java 提供了强大的日期和时间处理工具&#xff0c;其中 SimpleDateFormat 类是一个重要的工具&#xff0c;用于格式化日期和时间&#xff0c;同时也支持解析日…

【Apollo 自动驾驶】Win11 中 WSL2 安装配置 Apollo 环境

【Apollo 自动驾驶】Win11 中 WSL2 安装配置 Apollo 环境 【1】Win11 WSL2 安装配置 Nvidia Cuda 【1.1】检查计算机硬件的显卡信息 计算机图标右击 -> 管理 -> 设备管理器 -> 显示适配器&#xff1b; 【1.2】检查对应显卡并安装 Nvidia 显卡驱动 下载对应的 Nv…

C#winform导出DataGridView数据到Excel表

前提&#xff1a;NuGet安装EPPlus&#xff0c;选择合适的能兼容当前.net framwork的版本 主要代码&#xff1a; private void btn_export_Click(object sender, EventArgs e) {SaveFileDialog saveFileDialog new SaveFileDialog();saveFileDialog.Filter "Excel Files…

Mybatis传参parameterType方法汇总记录

这里分别记录使用过的七种传参方式&#xff1a; 1、在入参只有一个的情况下,Mapper.java中直接传即可 2、而在参数有两三个的情况下,Mapper.java中可以用Param注解来指定入参 程序就知道哪个参对应拼接完SQL的哪个条件字段 并且Mapper.xml中parameterType不用去指定&#xff…

解决eNSP和HCL Cloud兼容性的问题

问题&#xff1a;eNSP或HCL无法启动 不兼容的原因&#xff1a;eNSP支持Virtual Box是5.2.44&#xff1b;HCL支持的Virtual Box版本是6.0.14 解决方案&#xff1a;注册表欺骗 再进行重新安装前先把之前的都卸载掉&#xff1a;eNSP、VirtualBox、HCL等 1、先安装Virtual Box 5.…

JS中call(),apply()是什么,call(),apply()的原理是什么?如何手写一个call(),apply()?Symbol是什么,怎么用Symbol调优?含详细解析

&#x1f389;call() &#x1f495;call()的参数 thisArg&#xff1a;在调用 func 时要使用的 this 值 arg1, …, argN &#xff08;可选&#xff09; 函数的参数 ✨call()的描述&#xff1a; 首先声明 func是一个函数&#xff0c;person是一个对象 针对这段代码&#xff1a;f…

python中如何使用正则表达匹配\本身?(文末赠书)

点击上方“Python爬虫与数据挖掘”&#xff0c;进行关注 回复“书籍”即可获赠Python从入门到进阶共10本电子书 今 日 鸡 汤 将军向宠&#xff0c;性行淑均。 大家好&#xff0c;我是皮皮。 一、前言 前几天在Python钻石群【空】问了一个Python正则表达式的问题&#xff0c;一起…

CSS笔记(黑马程序员pink老师前端)定位

定位可以让盒子自由的在某个盒子内移动位置或者固定在屏幕中某个位置&#xff0c;并且可以压住其他盒子。 定位 定位模式 边偏移 定位模式说明static静态定位,按标准流特性摆放,没有边偏移,很少用relative相对定位,相对自身原有位置移动,原有位置继续占有&#xff08;不脱标…

《好笑的爱》阅读笔记

《好笑的爱》阅读笔记 是暑期认识的一位川大的同学推荐的&#xff0c;说他喜欢的一个作家是米兰昆德拉&#xff0c;喜欢他的短篇小说集《好笑的爱》。于是去武汉中心书城顺便买了两本书&#xff0c;另外还买了一本是《帷幕》&#xff0c;至今还没有看。 这本书总共包含了几篇短…

JDK8的 ConcurrentHashMap 源码分析

目录 1. 导读 2. ConcurrentHashMap 成员变量解读 3. ConcurrentHashMap 初始化 3.1 ConcurrentHashMap 无参构造源码解读 3.2 ConcurrentHashMap 带参构造源码解读 3.3 tableSizeFor 方法作用解读 3.4 ConcurrenthashMap初始化总结 4. ConcurrentHashMap 添加元素方法…

14 - 多线程之锁优化(下):使用乐观锁优化并行操作

前两讲讨论了 Synchronized 和 Lock 实现的同步锁机制&#xff0c;这两种同步锁都属于悲观锁&#xff0c;是保护线程安全最直观的方式。 我们知道悲观锁在高并发的场景下&#xff0c;激烈的锁竞争会造成线程阻塞&#xff0c;大量阻塞线程会导致系统的上下文切换&#xff0c;增…