实时获取功能结合了之前项目的整体架构,采用websocket方法,实时获取数据,将数据推送到前台,前台获取及显示的方案。
后台:
/**
* 实时获取在线用户人数
*/
//这里根据你的需求而定是多久自动获取一次,我这里是10秒刷新获取一次
@Scheduled(cron = "0/10 * * * * ? ")
public void getOnlineCount(){
List<Team> list=teamService.getCountOnlineUser();
int count = list.size();
//此处的push及为推送前台数据的方法
push("在线人数,"+count);
}
关于@Scheduled(如何自定义时间需求)
@Scheduled(cron = "0/10 * * * * ? ")//每10秒
关于Cron表达式表达式网站生成:
按顺序依次为:
秒(0~59)
分钟(0~59)
小时(0~23)
天(月)(0~31,但是你需要考虑你月的天数)
月(0~11)
天(星期)(1~7 1=SUN 或 SUN,MON,TUE,WED,THU,FRI,SAT)
7.年份(1970-2099)
其中每个元素可以是一个值(如6),一个连续区间(9-12),一个间隔时间(8-18/4)(/表示每隔4小时),一个列表(1,3,5),通配符。由于"月份中的日期"和"星期中的日期"这两个元素互斥的,必须要对其中一个设置?.
0 0 10,14,16 * * ? 每天上午10点,下午2点,4点
0 0/30 9-17 * * ? 朝九晚五工作时间内每半小时
0 0 12 ? * WED 表示每个星期三中午12点
“0 0 12 * * ?” 每天中午12点触发
“0 15 10 ? * *” 每天上午10:15触发
“0 15 10 * * ?” 每天上午10:15触发
“0 15 10 * * ? *” 每天上午10:15触发
“0 15 10 * * ? 2005” 2005年的每天上午10:15触发
“0 * 14 * * ?” 在每天下午2点到下午2:59期间的每1分钟触发
“0 0/5 14 * * ?” 在每天下午2点到下午2:55期间的每5分钟触发
“0 0/5 14,18 * * ?” 在每天下午2点到2:55期间和下午6点到6:55期间的每5分钟触发
“0 0-5 14 * * ?” 在每天下午2点到下午2:05期间的每1分钟触发
“0 10,44 14 ? 3 WED” 每年三月的星期三的下午2:10和2:44触发
“0 15 10 ? * MON-FRI” 周一至周五的上午10:15触发
“0 15 10 15 * ?” 每月15日上午10:15触发
“0 15 10 L * ?” 每月最后一日的上午10:15触发
“0 15 10 ? * 6L” 每月的最后一个星期五上午10:15触发
“0 15 10 ? * 6L 2002-2005” 2002年至2005年的每月的最后一个星期五上午10:15触发
“0 15 10 ? * 6#3” 每月的第三个星期五上午10:15触发
有些子表达式能包含一些范围或列表
例如:子表达式(天(星期))可以为 “MON-FRI”,“MON,WED,FRI”,“MON-WED,SAT”
“*”字符代表所有可能的值
因此,“”在子表达式(月)里表示每个月的含义,“”在子表达式(天(星期))表示星期的每一天
“/”字符用来指定数值的增量
例如:在子表达式(分钟)里的“0/15”表示从第0分钟开始,每15分钟
在子表达式(分钟)里的“3/20”表示从第3分钟开始,每20分钟(它和“3,23,43”)的含义一样
“?”字符仅被用于天(月)和天(星期)两个子表达式,表示不指定值
当2个子表达式其中之一被指定了值以后,为了避免冲突,需要将另一个子表达式的值设为“?”
“L” 字符仅被用于天(月)和天(星期)两个子表达式,它是单词“last”的缩写
但是它在两个子表达式里的含义是不同的。
在天(月)子表达式中,“L”表示一个月的最后一天
在天(星期)自表达式中,“L”表示一个星期的最后一天,也就是SAT
如果在“L”前有具体的内容,它就具有其他的含义了
例如:“6L”表示这个月的倒数第6天,“FRIL”表示这个月的最一个星期五
注意:在使用“L”参数时,不要指定列表或范围,因为这会导致问题
前台:
websocket部分
websocketonmessage(msg) {//接收服务器推送的信息
//打印收到服务器的内容
console.log(msg.data);
if(msg.data.includes("在线人数")){
var refreshCount = msg.data.split(",")
this.$bus.$emit('onlineCount',parseInt(refreshCount[1]));
console.log(refreshCount[1]);
}
else if(msg.data=="断开连接"){
this.websock.close();
}
},
显示部分
//获取在线用户人数
getonlineCountList(){
const params = new FormData();
params.append("token", sessionStorage.getItem("token"));
this.$post("/getonlineCount.json", params)
.then(res => {
if (res.status == "true") {
this.$bus.$emit('onlineCount',res.data);
} else {
this.$message.error(res.msg);
}
})
.catch(err => {
console.log(err);
});
}
关于$bus
使用过的都知道$bus是兄弟之间相互传值的项目中说实话用的地方不算多但是也会用到(每一个领域都是会有坑的呀)。
1、创建$bus文件
创建一个文件内容如下:
import Vue from 'vue'
export default new Vue();
2、引入$bus
main.js: import Bus from './views/bus/bus';
Vue.prototype.$bus = Bus; //注意这里的Vue是我上面引入的vue import Vue from 'vue'
3、使用传值
this.$bus.$emit("vaPage",value); //很像父子之间传值的方法
4、接收
this.$bus.$on("vaPage", v =>{ //vaPage传的时候的key是什么接收就必须是什么
console.log(v); //v是传来的值,可以接收多个参数
})
5、填坑之路
大家假设一下一个场景现在有3个组件分别是A(父组件),B(子组件),C(子组件)
这时候B,C之间的通信就可以用$bus了,比如我在B中进行了操作然后要刷新自己和C组件的dom咱们就可以通过this.$bus.$emit(key,value); 然后C接受this.$bus.$on("key",v=>{});可以在这个组件调用方法什么的你在这里调用方法的时候会发现我只写了一次调用初始化的函数为啥会调用多少而且不刷新页面的时候越来越多,这是需要使用到咱们的生命周期函数beforDestroy在当前组件销毁的时候注销这个$bus的方法:beforDestroy(){this.$bus.$off("val")//关闭$Bus}.
6、总结
使用$bus的时候在接受bus的组件中别忘了再beforDestroy函数中销毁bus,不销毁的话会一直叠加的调用这个方法:
beforDestroy(){
this.$bus.$off("vaPage"); //当这个组件销毁的时候bus也跟着一起销毁
}
然后在进行修改修改,就可以实现喽!!