vue 定时订阅消息 SSE(Server-Send Events)

本文介绍了如何在项目中使用Server-SentEvents(SSE)订阅机制,避免前端轮询造成的内存问题。重点讲解了登录后获取用户信息、设置心跳监听、处理返回数据以及退出登录时关闭SSE连接的步骤,并提到监控刷新事件以关闭链接的需求。
摘要由CSDN通过智能技术生成

        项目中,时常用到定时刷新数据的情况,如果使用前端实现,通常会使用轮询调用的方法, 这样会影响内存占用。所以使用SSE订阅会是一个更好的方法。即后端实时推送,前端负责更新数据即可。

        1、在登录之后,获取用户信息的时候,创建一个SSE对象,建立消息订阅,

                示例为建立订阅,存入vuex中。

        注意:xxxxx的内容为调用后台的接口url,  请求头中需携带token(也可以前后台协商定义)

        2、监听心跳,心跳值为前后端连接的唯一标识,

                注意:xxxxxx的内容为调用后台接口返回的字段,需要在vuex中增加存储方法

       

        3、监听返回数据,存入vuex中

                注意:xxxxxx的内容为调用后台接口返回的字段,需要在vuex中增加存储方法

        4、在退出登录时,需要使用心跳值,调用关闭SSE连接的方法。

        注意:当F5刷新浏览器网页时,应该监控刷新事件并关闭链接,然后重新订阅链接。我是在app.vue里面监听的,但是并未实现该功能。

                各位大佬如果完成了监听刷新页面的功能,欢迎留言指导噢!

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值