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

article/2025/8/20 14:59:38

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

实现方式：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、效果图

收到消息后如下图

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


http://chatgpt.dhexx.cn/article/9miAhct8.shtml

相关文章

Win11任务栏消息提醒功能如何开启教学

Win11任务栏消息提醒功能如何开启教学

Win11任务栏消息提醒功能如何开启教学。我们可以将电脑的消息提示功能开启起来&#xff0c;这样我们接收到各种程序的消息通知时&#xff0c;都可以通过这个功能及时的给出提示。那么Win11任务栏消息提醒功能如何开启&#xff0c;我们接下来看看具体的操作方法吧。 设置方法&am…
阅读更多...
用户登录登出功能实现

用户登录登出功能实现

用户登录登出功能实现 一、功能需求分析 1. 登录退出功能分析 流程图 功能 登录页面登录功能退出功能 二、登录页面 1. 接口设计 接口说明 类目说明请求方法GETurl定义/user/login/参数格式无参数 返回结果 登录页面 2.后端代码 user/views.py代码&#xff1a; fro…
阅读更多...
xubuntu系统偶发自动登出

xubuntu系统偶发自动登出

项目场景&#xff1a; 系统&#xff1a;xubuntu-16.04.3-desktop 问题描述 使用xubuntu系统期间&#xff0c;在root用户下进行相关开发&#xff0c;突然系统会回到普通用户登录界面&#xff0c;需要输入密码进入到普通用户下   它会终止所有打开的应用程序和进程&#xff0…
阅读更多...
Spring Security OAuth2 单点登录和登出

Spring Security OAuth2 单点登录和登出

文章目录 1. 单点登录1.1 使用内存保存客户端和用户信息1.1.1 认证中心 auth-server1.1.2 子系统 service-11.1.3 测试 1.2 使用数据库保存客户端和用户信息1.3 单点登录流程1.2.1 请求授权码&#xff0c;判断未登录&#xff0c;重定向登录页1.2.2 登录成功&#xff0c;重定向继…
阅读更多...
OneNote的正确登出方式

OneNote的正确登出方式

1. 账号已经是登录状态 点击oneNote右上角账户信息 》 注销按钮 &#xff08;退出登录&#xff0c;注意要确保笔记已经同步到云端&#xff09; 》会弹出以下提示窗口 》点击是 2. 关闭笔记本 点击左上角 》 文件 》信息》选中自己的笔记本 》设置 》关闭&#xff08;可防止…
阅读更多...
springboot2.7+springsecurity实现简单的登录登出

springboot2.7+springsecurity实现简单的登录登出

由于网上搜索的资料大部分都是使用的springsecurity的低于5.7的版本&#xff0c;springsecurity的配置类是通过继承WebSecurityConfigurerAdapter这个类来重写configure&#xff0c;以此来实现认证和授权。近期学习springsecurity使用的是5.7的版本&#xff0c;所以简单整理一下…
阅读更多...
Vue实现登录以及登出

Vue实现登录以及登出

首先先了解一下&#xff0c;我们的效果实现流程 首先登录概述及业务流程和相关技术点 1.登录页面的布局 2.创建两个Vue.js文件 3.一个我们来做登录页和注册页 4.登录页面的布局 5.配置路由 6…
阅读更多...
iOS快捷指令：一键登录/登出南京大学校园网

iOS快捷指令：一键登录/登出南京大学校园网

软件版本要求&#xff1a;iOS13及以上 演示机型&#xff1a;iPhone 12 mini 演示系统版本&#xff1a;iOS14.6 文章目录 导言核心步骤&#xff1a;最简单的一键登录指令自动化&#xff1a;连接NJU-WLAN后自动登录修改细节&#xff1a;让指令变得更优雅小练习&#xff1a;创建…
阅读更多...
瑞吉外卖 —— 2、后台登录和登出

瑞吉外卖 —— 2、后台登录和登出

目录 1、后台登录功能 1.1、接口分析 1.1.2、登录校验逻辑 1.2、代码 1.2.1、统一的返回结果实体类 1.2.2、controller 方法 1.3、测试 2、后台退出功能 2.1、分析 2.2、代码 3、未登录访问首页跳转到登录页面 3.1、分析 3.2、代码 1、后台登录功能 1.1、接口分析…
阅读更多...
oc账号无法登出，oc登出后官网还显示登陆状态？

oc账号无法登出，oc登出后官网还显示登陆状态？

《C4D的十万个为什么》首发于 公众号&#xff1a;苦七君 免费搜索查看更多问题&#xff1a;kuqijun.com 问题&#xff1a; 在本电脑上&#xff0c;在C4D里面登出oc账号后&#xff0c;官网上还是显示登陆的。。导致账号被限制在此电脑上了&#xff0c;无法用其他电脑登陆。 正…
阅读更多...
vue-admin-实现登出功能

vue-admin-实现登出功能

实现登出功能 目标&#xff1a;实现用户的登出操作 登出仅仅是跳到登录页吗&#xff1f; 不&#xff0c;当然不是&#xff0c;我们要处理如下 同样的&#xff0c;登出功能&#xff0c;我们在vuex中的用户模块中实现对应的action 登出action src/store/modules/user.js // 登出…
阅读更多...
Python + Django4 搭建个人博客（十四）：实现用户登录和登出功能

Python + Django4 搭建个人博客（十四）：实现用户登录和登出功能

本篇开始我们来实现用户管理模块。 首先我们来实现一下用户的登录和登出。 创建APP 用户和文章属于不同的功能模块&#xff0c;为了方便管理&#xff0c;我们新建一个名为userprofile的App 运行startapp指令创建新的app&#xff1a; python manage.py startapp userprofile…
阅读更多...
Springboot+JWT+Redis实现登陆登出功能

Springboot+JWT+Redis实现登陆登出功能

1&#xff1a;什么是Token&#xff1f;&#xff1a;三部分组成&#xff1a;头有效负载签名 1.1 JWT创建中的一些方法讲解&#xff1a; public static String createTokenWithClaim(User user){//构建头部信息Map<String,Object> map new HashMap<>();map.put(&qu…
阅读更多...
单点登录与单点登出

单点登录与单点登出

一、标准流程描述 CAS官网的标准流程&#xff1a; SSO标准流程 流程描述&#xff1a; First Access&#xff1a; 第3步数据走向 第4步数据走向 第一次访问app.example.com&#xff08;service地址&#xff09;&#xff0c;请求参数中session为空&#xff0c;app service没做…
阅读更多...
[django项目] 实现用户登录登出功能

[django项目] 实现用户登录登出功能

用户登录登出功能 I. 功能需求分析 1>功能分析 1.1>流程图 1.2>功能接口 登录页面登录功能退出功能 II. 登陆页面 1>接口设计 1.1>接口说明 类目说明请求方法GETurl定义/users/login/参数格式无参数 1.2>返回结果 登陆页面 2.后端代码 user/views…
阅读更多...
后台登录登出

后台登录登出

后台登录登出 一&#xff0e;Session简介 在WEB开发中&#xff0c;服务器可以为每个用户浏览器创建一个会话对象&#xff08;session对象&#xff09;&#xff0c;注意&#xff1a;一个浏览器独占一个session对象(默认情况下)。因此&#xff0c;在需要保存用户数据时&#xff…
阅读更多...
JWT 的登出问题

JWT 的登出问题

Jwt 使用起来不难&#xff0c;而且让我们将“无状态”的概念更贴切的展示出来了&#xff0c;但是实践就真的这么完美吗&#xff1f;不是&#xff0c;因为jwt 的登出问题。 何为登出&#xff1a;就是用户自己点击登出后&#xff0c;或用户的角色/权限改变后&#xff0c;该token…
阅读更多...
Shiro入门之实现登录登出

Shiro入门之实现登录登出

概述 这里使用Shiro来实现用户的登录和登出功能。 前提&#xff1a;已经会Spring集成Shiro。即使没有下面也会提供源码&#xff0c;下面只说明Shiro部分的核心代码&#xff0c;如Mapper、Service类中的代码基本上就是从数据库中读取数据&#xff0c;而且源码有提供&#xff0…
阅读更多...
cas5.3.2单点登录-单点登出(十一)

cas5.3.2单点登录-单点登出(十一)

原文地址&#xff0c;转载请注明出处&#xff1a; https://blog.csdn.net/qq_34021712/article/details/81515317 ©王赛超 既然有单点登录,肯定就要有登出,之前的整合都是只针对了登录&#xff0c;对登出并没有关注,今天我们就来讲讲登出。 关于单点登出原理&#…
阅读更多...
数说故事车企数字化渠道管理创新方法——精准进行消费者洞察

数说故事车企数字化渠道管理创新方法——精准进行消费者洞察

随着疫情带来的变化&#xff0c;原来在一二线城市的购物中心店&#xff0c;受人流量的不确定性冲击越来越大&#xff0c;但成本的支出也越来越高。因此购物中心店&#xff0c;将有可能从原来的重“集客”功能&#xff0c;变成更多的从品牌、体验出发的形象中心店&#xff0c;“…
阅读更多...
推荐文章

Copyright @ 2022~2023