前端实现实时消息提醒消息通知

需求：当用户收到待审批和待处理的消息后状态栏图标闪烁并进行弹窗提醒，点击消息跳转到指定的消息。

实现方式：web端+c端。

说明：

• 客户不需要非常的及时的接收消息，所以未对接websocket协议，使用20秒刷新一次的方法，首次记录下待审批数量和待处理数量，20秒刷新后与上次的数量作比较，比上次多了就查询出多的这条数据，调用c端的消息提醒服务，将参数传递过去，在弹窗里点击指定消息的时候，再又C端将参数绑定在跳转路径上，由前端查询出指定的数据并展示。
• C端实现方法不做说明（因为不懂所以说个大致思路，C端提供一个消息提醒exe，用户登录后web端检测当前是否已安装exe，没有提醒用户去下载，正常开启后，会在本地有一个服务，前端调用服务传参，正常打开消息弹窗，在点击某条消息时C端将前端传递的参数拼接到浏览器的地址里打开浏览器窗口，前端在mounted里获取数据并处理。）
• 使用window.webkitNotifications.createNotification方法进行提醒会有问题，只能在本地，将地址栏改为IP地址后不能正常使用。

前端实现方法：

1、定义全局变量

var configObj = {
    MESSAGE_URL:'http://127.0.0.1:8087/webServer',
    waitMESSAGENUM: 0,//待审批事项
    waitDealWithMESSAGENUM: 0,//待处理事项
};

2、通过注册表启用C端提供的exe程序

window.open("messageRemind://","_self");

3、判断消息服务是否存在，不存在提醒用户下载安装

isExe(){
	var that = this;
	this.$post(this.$url.MESSAGE_URL, {
		path:""
	})
	.then(res=>{
		//正常
		if(res && res.data && res.data.Message == "isexe"){
		//没有exe去安装
		}else{
			this.$confirm('未检测到提醒插件，是否安装?如不需要提醒功能点击取消即可。', "询问", {
				confirmButtonText: "确定",
				cancelButtonText: "取消",
				type: "warning"
			}).then(function () {
				window.open("messageRemind.exe","_blank");
				that.$message({
					showClose: true,
					message: "手动安装消息提醒插件完成后，请退出系统重新登陆！",
					duration:0
				});
			})
		}
	//    没有exe去安装
	}).catch((err)=>{
		this.$confirm('未检测到提醒插件，是否安装?如不需要提醒功能点击取消即可。', "询问", {
			confirmButtonText: "确定",
			cancelButtonText: "取消",
			type: "warning"
		}).then(function () {
			window.open("messageRemind.exe","_blank");
			that.$message({
				showClose: true,
				message: "手动安装消息提醒插件完成后，请退出系统重新登陆！",
				duration:0
			});
		})
	})
	},

4、实际调用

5、效果图

收到消息后如下图

点击闪烁的消息弹窗后如下图，点击跳转对应页面