位置: IT常识 - 正文

SSE:后端向前端发送消息(springboot SseEmitter)(sse后端向前端推送 前端只能收到 末尾的值)

编辑:rootadmin
SSE:后端向前端发送消息(springboot SseEmitter) 背景

推荐整理分享SSE:后端向前端发送消息(springboot SseEmitter)(sse后端向前端推送 前端只能收到 末尾的值),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:后端向前端返回数据,后端给前端的接口是什么,ssm前端到后端参数传递,ssm前端到后端参数传递,后端给前端的接口是什么,后端向前端传值的两种方法,sse后端向前端推送 前端只能收到 末尾的值,后端向前端传值的两种方法,内容如对您有帮助,希望把文章链接给更多的朋友!

有一个项目,前端vue,后端springboot。现在需要做一个功能:用户在使用系统的时候,管理员发布公告,则使用系统的用户可以看到该公告。 基于此,一个简单的方案:前端使用JS方法setInterval,重复调用后端公告获取接口。此方法有几点缺陷:

循环调用的时间间隔不好确定:太长了,获取公告的时效有延迟;太短了,给服务器造成压力,很多请求都是无用的(公告发布的时间不定,很可能几天都没有新公告);token的续期问题:项目中,前端请求,需要带上token,token有过期时间,如果用户一直使用(前后端有交互),会无感续期。如果有这种定时循环和后端交互的场景,就会造成token用不过期(循环的调用会触发续期),当然,可以在续期中,排除某个场景的请求,但是这样的设计不好,因为这种场景太多了,就会造成维护上的困难。

因此就想到了,如果后端主动向前端推送消息,这个问题就可以完美解决。

方案

有两种方案可以实现后端向前端推送消息:

使用websocket;使用sse;

这里介绍SSE的方式(如果系统中对这种消息的准确性和可靠性有严格的要求,则使用websocket,websocket的使用相对复杂的多); 如果想了解SSE的详细基础知识,可以参考阮一峰老师的这篇文章:Server-Sent Events 教程

SSE后端代码SSE:后端向前端发送消息(springboot SseEmitter)(sse后端向前端推送 前端只能收到 末尾的值)

SpringMVC中,已经集成了该功能,所以无需额外引入jar包,直接上代码:

@RestController@RequestMapping("/notice")public class NoticeController { @Autowired private NoticeService noticeService; @GetMapping(path = "createSseEmitter") public SseEmitter createSseEmitter(String id) { return noticeService.createSseEmitter(id); } @PostMapping(path = "sendMsg") public boolean sendMsg(String id, String content) { noticeService.sendMsg(id, content); return true; }}@Slf4j@Servicepublic class NoticeServiceImpl implements NoticeService { @Autowired @Qualifier("sseEmitterCacheService") private CacheService<SseEmitter> sseEmitterCacheService; @Override public SseEmitter createSseEmitter(String clientId) { if (StringUtil.isBlank(clientId)) { clientId = UUID.randomUUID().toString().replace("-", ""); } SseEmitter sseEmitter = sseEmitterCacheService.getCache(clientId); log.info("获取SSE,id={}", clientId); final String id = clientId; sseEmitter.onCompletion(() -> { log.info("SSE已完成,关闭连接 id={}", id); sseEmitterCacheService.deleteCache(id); }); return sseEmitter; } @Override public void sendMsg(String clientId, String content) { if (sseEmitterCacheService.hasCache(clientId)) { SseEmitter sseEmitter = sseEmitterCacheService.getCache(clientId); try { sseEmitter.send(content); } catch (IOException e) { log.error("发送消息失败:{}", e.getMessage(), e); throw new BusinessRuntimeExcepption(CustomExcetionConstant.IO_ERR, "发送消息失败", e); } } else { log.error("SSE对象不存在"); throw new BusinessRuntimeExcepption("SSE对象不存在"); } }}

这里,只列出了核心的代码,简而言之,需要做到两点即可:

前端首先是发起一个请求,创建SseEmitter,即createSseEmitter方法,该方法必须返回一个SseEmitter对象;返回的SseEmitter,后端必须要缓存起来(我用的是ehcache,也可以直接定义一个map来缓存);

为什么要这么做?看下文,后端代码一起来分析就明白了。

前端代码

由于,我请求该接口,需要带上token,所以直接使用EventSource不行,另外这个IE也不支持。所以选择了一个工具:event-source-polyfill。

先安装event-source-polyfillnpm install event-source-polyfill然后使用:import { EventSourcePolyfill } from "event-source-polyfill"; created() { let _this = this; this.source = new EventSourcePolyfill( "/" + process.env.VUE_APP_MANAGER_PRE_API_URL + "/notice/createSseEmitter?id=" + uuid(), { headers: { [process.env.VUE_APP_OAUTH_AUTHORIZATION]: store.getters.getToken, }, //重连时间间隔,单位:毫秒,默认45000毫秒,这里设置为10分钟 heartbeatTimeout: 10 * 60 * 1000, } ); this.source.onopen = () => { console.log("NOTICE建立连接"); }; this.source.onmessage = (e) => { _this.scrollMessage = e.data; console.log("NOTICE接收到消息"); }; this.source.onerror = (e) => { if (e.readyState == EventSource.CLOSED) { console.log("NOTICE连接关闭"); } else if (this.source.readyState == EventSource.CONNECTING) { console.log("NOTICE正在重连"); //重新设置header this.source.headers = { [process.env.VUE_APP_OAUTH_AUTHORIZATION]: store.getters.getToken, }; } else { console.log(e); } }; },

有几点说明:

new EventSourcePolyfill中,可以带入headerheartbeatTimeout是一个心跳时间,默认情况下间隔heartbeatTimeout后,会触发重新连接后端接口;this.source.headers,该行的作用是在重连的时候重新设置header,如果不这样,那么重连的时候,用的参数信息,还是和最开始的一样(包括本例中url中的id)。而由于我的项目中,如果token其他操作触发了刷新token,则有效token可能会变,所以,这里取缓存中放置的token,而不应该使用最初的token。 好了,这样就基本实现了我们所需要的功能了。特别注意

前端配置了代理,所以一直收不到后端发送的消息,尝试加入以下参数:

devServer: { compress:false, …………}问题

之前在写后端的时候提到了两个问题:为什么要返回SseEmitter对象?为什么要缓存SseEmitter对象? 其实看过SSE的原理,都应该明白:这就是一个长连接,前端调用创建SseEmitter对象的接口,虽然接口返回了,但是并未结束(这就是为什么要返回SseEmitter对象,如果返回的是一个其他对象,就和普通的接口没两样了, 该接口就直接结束了),请看下截图: 发起请求之后,一直是待处理,并未结束,10分钟之后,该请求被取消(前端设置的重连),然后重新发起连接,重新发起的连接也是在等待中。只有接收到消息后,这个请求的状态码才是200,但是这个时候才连接已经建立好了。其中的细节,这里不做讲述。 所以,如果再使用SseEmitter对象发送消息,则前端就可以收到对象的消息了(即实现后端向前端发送消息)。这里使用的SseEmitter对象,就是createSseEmitter接口返回的对象(也就是使用哪个SseEmitter对象,就可以向哪个前端发送消息)。这也就是为什么要缓存SseEmitter对象的原因了。

效果

通过调用发送消息接口,前端即可立即展示发送的消息:

本文链接地址:https://www.jiuchutong.com/zhishi/311892.html 转载请保留说明!

上一篇:帝国CMS如何以原文件名命名附件(帝国cms怎么用)

下一篇:uni-app组件-应用简单快速上线(uniapp组件使用)

  • 一般纳税人增值税怎么做账务处理
  • 独资企业赚的钱全是老板的吗
  • 海关缴款书上完税怎么办
  • 年度纳税申报表A105000纳税调整项目明细表中,收入
  • 契税印花税会计怎么做账务处理
  • 税收实体法和程序法分类
  • 红冲以前年度的费用怎么做账
  • 农民合作社交哪些税
  • 购置成本和订货成本是实际发生的吗
  • 出口货物退运管理办法
  • 建筑安装专票票样
  • 税局代开专票如何做账务处理?
  • 客户预付货款会计分录
  • 企业代缴个人所得税打印完税证明
  • 负债减少在什么方
  • 超过三个月开发票
  • 报税没有报怎么办
  • 小规模差额征税季度不超过30万的税收优惠
  • 投资款缴纳印花税税目是什么
  • 小型微利企业核定征收
  • 抄报汇总对比通用怎么写
  • 免税进口种子要符合哪些条件?
  • 公司租车交税
  • 逆流交易合并报表调整少数损益
  • 应收票据冲转是什么科目
  • php23种设计模式
  • 修改注册表限制cpu速度
  • 其他应收款贷方表示什么
  • php字符串数组函数
  • unik面部识别怎么用
  • 企业缴纳保险的比例
  • 纳税人销售免税货物
  • 增值税的纳税时间是多久
  • 小规模纳税人缴税的分录
  • 数据读取流程
  • bootstrap 栅格
  • 打造出ChatGPT的,是怎样一群人?
  • yolov5 output
  • mobilenet模型
  • 手把手带你做一件事
  • php程序技术
  • 经营租入固定资产账务处理
  • 免征增值税账务怎么处理
  • 税务稽查补税
  • mongodb win7
  • 应收账款和应付账款属于什么科目
  • 坏账损失的会计分录小企业会计准则
  • 房屋出租收入是其他业务收入吗
  • 普通发票开具的管理是?
  • 如何做一份有效的面包
  • 银行收到电子承兑怎么查
  • 个人所得税能说明什么
  • 制造费用科目一定无余额
  • 车船税不开发票怎么做账?
  • 工程预付款是否含规费和税金
  • 企业清算未收到发票
  • 违约金罚款计入什么科目
  • 以前年度损益调整属于哪类科目
  • 航天信息何去何从
  • 同期增长率如何计算
  • 账簿凭证的管理要求
  • mysql5.5改密码
  • linux/tmp
  • window10节电模式怎么关闭
  • linux仿mac
  • ubuntu更换版本
  • win7更新不了80072efe
  • win10如何删除右键菜单选项
  • android linux deploy
  • git 进阶
  • win10系统需不需要装杀毒软件
  • 在linux中使用apache发布web服务时默认web站点
  • cocos2d安装
  • shell脚本解压tar文件
  • 刨根问底造句
  • 如何使用开塞露排便
  • mongoose教程
  • python strip函数作用
  • js 函数写法
  • javascript如何学
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设