项目中,时常用到定时刷新数据的情况,如果使用前端实现,通常会使用轮询调用的方法, 这样会影响内存占用。所以使用SSE订阅会是一个更好的方法。即后端实时推送,前端负责更新数据即可。
1、在登录之后,获取用户信息的时候,创建一个SSE对象,建立消息订阅,
示例为建立订阅,存入vuex中。
注意:xxxxx的内容为调用后台的接口url, 请求头中需携带token(也可以前后台协商定义)
2、监听心跳,心跳值为前后端连接的唯一标识,
注意:xxxxxx的内容为调用后台接口返回的字段,需要在vuex中增加存储方法
3、监听返回数据,存入vuex中
注意:xxxxxx的内容为调用后台接口返回的字段,需要在vuex中增加存储方法
4、在退出登录时,需要使用心跳值,调用关闭SSE连接的方法。
注意:当F5刷新浏览器网页时,应该监控刷新事件并关闭链接,然后重新订阅链接。我是在app.vue里面监听的,但是并未实现该功能。
各位大佬如果完成了监听刷新页面的功能,欢迎留言指导噢!