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

前端实现消息提醒

meetAlice

6344人浏览 · 2022-06-29 17:59:12

meetAlice · 2022-06-29 17:59:12 发布

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

实现方式：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、实际调用

<template>
    <div class="nav-header">
        <!-- 右侧操作 -->
        <div class="rightPerson">
            <span style="position: relative;cursor: pointer;" @click="isOpenMenu = !isOpenMenu">
                <img src="../../assets/header/message.png" alt="" style="margin-right: 30px;"/>
                <span class="message-red" v-show="waitItemNumber != 0 || waitDealwithNumber != 0">{{waitItemNumber + waitDealwithNumber}}</span>
                <div class="message-red-bottom" v-show="isOpenMenu">
                    <span @click="toWaitItemsFun">待审批事项
                        <span class="message-red" v-show="waitItemNumber != 0">{{waitItemNumber}}</span>
                    </span>
                    <span @click="toWaitDealwithFun">待处理事项
                        <span class="message-red" v-show="waitDealwithNumber != 0">{{waitDealwithNumber}}</span>
                    </span>
                </div>
            </span>
        </div>
    </div>
</template>

<script>
    import bus from "../../plugins/utils/bus";
    export default {
        name: "NavHeader",
        data() {
            return {
				isOpenMenu:false,
                waitItemNumber: 0,
                waitDealwithNumber:0,
                timer: null,
                timer1:null,
                //跳转传递的参数
                jumpParam:{
                    id:null,
                    title:"",
                    time:"",
                    path:""
                }
            };
        },
        created() {
            //审批之后更新右上角铃铛提醒数量
            bus.$on("waitItemsData", (data) => {
                this.getWaitListNum();
                setTimeout(() => {
                    this.$url.waitMESSAGENUM = JSON.parse(JSON.stringify(this.waitItemNumber));
                },500)
            });
            //处理之后更新右上角铃铛提醒数量
            bus.$on("waitDealWithData", (data) => {
                this.getWaitDealwithNum();
                setTimeout(() => {
                    this.$url.waitDealWithMESSAGENUM = JSON.parse(JSON.stringify(this.waitDealwithNumber));
                },500)
            });
        },
        beforeDestroy() {
            if(this.timer) {
                clearInterval(this.timer);
                this.timer = null;
            }
            if(this.timer1) {
                clearInterval(this.timer1);
                this.timer1 = null;
            }
            bus.$off("waitItemsData");
            bus.$off("waitDealWithData");
        },
        mounted() {
            //获取最新的待审批和待处理数量，显示在右上角铃铛
            this.getWaitListNum();
            this.getWaitDealwithNum();
            //获取待审批和待处理的数量后刷新待审批和待处理的全局记录，用于与下次的数量作比较判断数据是否有更新
            setTimeout(() => {
                this.$url.waitMESSAGENUM = JSON.parse(JSON.stringify(this.waitItemNumber));
                this.$url.waitDealWithMESSAGENUM = JSON.parse(JSON.stringify(this.waitDealwithNumber));
                //调用待审批和待处理的弹窗，开启20秒定时事件
                this.openMessageWindow();
                this.openDealWithMessageWindow();
            },500);
        },
        methods: {
            /**
             * @author yangjie
             * @time 2022-06-07 16:45:58
             * @description 调用消息弹窗服务打开待审批消息的弹窗
             * @return
             */
            openMessageWindow(){
                let that = this;
                that.timer = setInterval(() => {
                    //每20秒拿一次最新数量，与全局的记录作比较
                    that.getWaitListNum();
                    setTimeout(() => {
                        if(that.waitItemNumber>that.$url.waitMESSAGENUM) {
                            //如果有新数据更新一次最新数据，用于消息提醒
                            that.getWaitListValue();
                            that.$nextTick(()=>{
                                that.$post(that.$url.MESSAGE_URL, {
                                    param:JSON.stringify(this.jumpParam)
                                });
                                that.$url.waitMESSAGENUM = JSON.parse(JSON.stringify(that.waitItemNumber));
                            })
                        }
                    },500)
                },20 * 1000)
            },
            /**
             * @author yangjie
             * @time 2022-06-07 16:45:58
             * @description 调用消息弹窗服务打开待处理消息的弹窗
             * @return
             */
            openDealWithMessageWindow(){
                var that = this;
                that.timer1 = setInterval(() => {
                    var requestObj = {
                        submituid:that.$store.state.user.id,
                        status: 5,  //获取已同意和已驳回的数据
                        remark:"updatetime"
                    };
                    that.$post(that.$url.MANAGE_URL + "/dyTemplateProcess/selectSubmitTask?token=" + that.$store.state.token, requestObj).then(res => {
                        if (res.data.code == 1 && res.data.data.data && res.data.data.data.length > 0) {
                            that.waitDealwithNumber = Number(res.data.data.count);
                            if(that.waitDealwithNumber > that.$url.waitDealWithMESSAGENUM) {
                                that.$url.waitDealWithMESSAGENUM = JSON.parse(JSON.stringify(that.waitDealwithNumber));
                                that.jumpParam.id = res.data.data.data[0].id;
                                that.jumpParam.title = res.data.data.data[0].templateName;
                                that.jumpParam.time = res.data.data.data[0].submittime;
                                that.jumpParam.path = window.location.href.split("#")[0] + "#/collaborative/issuedItems";
                                that.$post(that.$url.MESSAGE_URL,{
                                    param:JSON.stringify(that.jumpParam)
                                })
                            }
                        } else {
                            that.waitDealwithNumber = 0;
                        }
                    }).catch(error => {
                        that.waitDealwithNumber = 0;
                    })
                },20 * 1000)
            },
             /**
              * @author yangjie
              * @time 2022-06-29 15:34:25
              * @description 获取待审批事项的总数量（用于右上角铃铛显示和与用于与上次比较判断出是否有新的待审批事项）
              * @return
              */
            getWaitListNum() {
                var that = this;
                let requestObj = {
                    nextuid:this.$store.state.user.id
                };
                this.$post(this.$url.MANAGE_URL + "/dyTemplateProcess/selectTodoTask?token=" + this.$store.state.token, requestObj).then(res => {
                    if (res.data.code == 1 && res.data.data.data && res.data.data.data.length > 0) {
                        that.waitItemNumber = Number(res.data.data.count);
                    } else {
                        that.waitItemNumber = 0;
                    }
                }).catch(error => {
                    that.waitItemNumber = 0;
                })
            },
            /**
             * @author yangjie
             * @time 2022-06-29 15:32:24
             * @description 获取最后一条待审批事项的值（传给c用于消息提醒）
             * @return
             */
            getWaitListValue(dataid) {
                var that = this;
                let requestObj = {
                    nextuid:this.$store.state.user.id
                };
                if(dataid){
                    requestObj.idList = dataid;
                }
                this.$post(this.$url.MANAGE_URL + "/dyTemplateProcess/selectTodoTask?token=" + this.$store.state.token, requestObj).then(res => {
                    if (res.data.code == 1 && res.data.data.data && res.data.data.data.length > 0) {
                        that.jumpParam.id = res.data.data.data[0].id;
                        that.jumpParam.title = res.data.data.data[0].templateName;
                        that.jumpParam.time = res.data.data.data[0].submittime;
                        this.jumpParam.path = window.location.href.split("#")[0] + "#/collaborative/waitItems";
                    } else {
                        that.waitItemNumber = 0;
                    }
                }).catch(error => {
                    that.waitItemNumber = 0;
                })
            },
            /**
             * @author yangjie
             * @time 2022-05-18 15:15:39
             * @description 获取待处理事项的总数量（用于右上角铃铛显示和与用于与上次比较判断出是否有新的待处理事项）
             * @return
             */
            getWaitDealwithNum(){
                var that = this;
                let requestObj = {
                    submituid:this.$store.state.user.id,
                    status: 5  //获取已同意和已驳回的数据
                };
                this.$post(this.$url.MANAGE_URL + "/dyTemplateProcess/selectSubmitTask?token=" + this.$store.state.token, requestObj).then(res => {
                    if (res.data.code == 1 && res.data.data.data && res.data.data.data.length > 0) {
                        that.waitDealwithNumber = Number(res.data.data.count);
                    } else {
                        that.waitDealwithNumber = 0;
                    }
                }).catch(error => {
                    that.waitDealwithNumber = 0;
                })
            },
            //查看待办事项
            toWaitItemsFun() {
                this.$router.push({
                    path: "/collaborative/waitItems" // 到待办事项
                });
            },
            /**
             * @author yangjie
             * @time 2022-05-18 15:45:27
             * @description 查看待处理事项
             * @return
             */
            toWaitDealwithFun(){
                this.$router.push({
                    path: "/collaborative/issuedItems" // 到待处理事项
                });
            }
        }
    }
</script>

<style scoped lang="scss">

</style>

5、效果图

收到消息后如下图

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

华为云开发者联盟

为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。

更多推荐

cover

解锁HDC 2024之旅：从购票到报名，全程攻略

华为云开发者联盟

cover

从原始边列表到邻接矩阵Python实现图数据处理的完整指南

华为云开发者联盟

cover

华为云云原生FinOps解决方案，释放云原生最大价值

华为云开发者联盟

所有评论(0)

查看更多评论

meetAlice

已为社区贡献1条内容