Vue3前端实现一个本地消息队列(MQ), 让消息延迟消费或者做缓存

MQ功能实现的具体代码(TsMQ.ts):

import { v4 as uuidx } from 'uuid';import emitter from '@/utils/mitt'// 消息类
class Message {// 过期时间,0表示马上就消费exp: number;// 消费标识,避免重复消费tag : string;// 消息体body : any;constructor( exp: number ,  body : any ) {if (exp == 0) {this.exp = 0;}else {this.exp = Date.now().valueOf() + exp;}this.body = body;this.tag = uuidx();}}export default class TsMQ {static tsMQ : TsMQ;cache : boolean;repository : Map<string, any[]>;/*设置只作为缓存使用*/setCache(cache : boolean)  {this.cache = cache;}/*获取单列的MQ对象*/static getInstance() : TsMQ {if(this.tsMQ == null) {this.tsMQ = new TsMQ();}return this.tsMQ;}constructor() {this.repository = new Map<string,any[]>();this.cache = false;setInterval(()=> {Array.from(this.repository.keys()).forEach( key => {let poll = this.repository.get(key) as any[];if(poll.length > 0) {poll.forEach( item => {if (item.exp == 0 || item.exp <= Date.now().valueOf() - 100) {// 如果是作为缓存使用就不会放入mitt就行推送if(!this.cache) {emitter.emit(key,item.body);}let single : any[] = this.repository.get(key) as any[];single = single.filter(dispose => {return dispose.tag !== item.tag;});this.repository.set(key,single);}});}});},100)}/** @describe 放消息入队列* @param queue : string 队列名称* @param exp : number 消息消费时间* @param  message : any 消息体*/pushMessage( queue : string , exp : number,  message : any ) {if(this.repository.has(queue)) {let single : any[] = this.repository.get(queue) as any[];single.push(new Message(exp,message));this.repository.set(queue,single);}else {let temp = [];temp.push(new Message(exp,message));this.repository.set(queue,temp);}}/** @describe 直接获取消息,可以配合做本地缓存,就要去掉constructor的轮询中的事件推送* @param queue : string 队列名称*/takeMessage( queue : string ) : any {let single : any[] = this.repository.get(queue) as any[];if( single && single.length > 0) {let message = single.shift();this.repository.set(queue,single);return message;}else {return '队列没有消息!';}}}
提示:其中需要用到三方的uuid和mitt,然后要消息持久化可以用到pinia来让消息持久化,本案列没有采用持久化
uuid的三方包安装命令
npm install uuid
mitt的三方安装命令 
npm install --save mitt 

 其中mitt文件的代码

import mitt from "mitt";const emitter = mitt();export default emitter;

使用方式:

投送消息
<script setup lang="ts">import TsMQ from '@/utils/TsMQ'import emitter from '@/utils/mitt'let tsMQ : TsMQ = TsMQ.getInstance();//投送消息function pushMQs() {console.log(`M2投递时间:${new Date().toLocaleString()}`)tsMQ.pushMessage("HelloWord",1000 * 20,{ name : 'M2', second:20 });tsMQ.pushMessage("HelloWord",1000 * 3,{ name : 'M1', second:3 });}</script><template><div id="app" style="display: flex;flex-direction: column;justify-content: center;height: 100%;width: 100%;margin: 0;padding: 0"><span @click="pushMQs">MQ投送</span></div>
</template>

提示:这里采用事件模拟投送消息 

 消息订阅代码:
<script setup lang="ts">import TsMQ from '@/utils/TsMQ'import emitter from '@/utils/mitt'let tsMQ : TsMQ = TsMQ.getInstance();//订阅消息emitter.on("HelloWord",e => {console.log(`收到消息:${JSON.stringify(e)}\n消息时间:${new Date().toLocaleString()}`)}); function takeMQs() {console.log(tsMQ.takeMessage('HelloWord'));}</script><template><div id="app" style="display: flex;flex-direction: column;justify-content: center;height: 100%;width: 100%;margin: 0;padding: 0"><span @click="takeMQs">MQ获取</span></div>
</template>  

效果:

总结:我们可以看到我们实现了这个功能 ,其中可以用来作为缓存使用,同理可写

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/705768.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

手机打开 第三方 “微信、快手、QQ、电话、信息” 等

前期回顾 Vue3 TS Element-Plus —— 项目系统中封装表格搜索表单 十分钟写五个UI不在是问题_vue3 封装table 配置表格-CSDN博客https://blog.csdn.net/m0_57904695/article/details/135538630?spm1001.2014.3001.5501 目录 &#x1f916; 下载App如下图所示&#xff1a;…

HUAWEI Programming Contest 2024(AtCoder Beginner Contest 342)(A,B,C,D,E,F,G)

看不懂的英文&#xff0c;题意很难理解&#xff0c;这场还是有点难度的。 C需要处理&#xff0c;D是不太明显的dijikstra&#xff0c;E是线段树优化dp&#xff0c;F是个不好想的线段树&#xff0c;主席树应该也能做。 我觉得讲的很好的宝藏up主->B站视频讲解。之后会比较忙…

10 款数据恢复软件功能和有效性对比(2024 年更新)

数据丢失可能是一种痛苦的经历&#xff0c;无论是由于意外删除、硬件故障还是软件损坏。值得庆幸的是&#xff0c;数字时代带来了强大的数据恢复解决方案。 随着我们进入 2024 年&#xff0c;市场上充斥着旨在有效检索丢失数据的先进软件。在本文中&#xff0c;我们将探讨 2024…

Java WEB面试系列-02

1. Servlet 中如何获取 Session 对象? 使用HttpServletRequest对象的getSession方法获取session,通过getCookies获取Cookie。 2. Servlet 中过滤器有什么作用? Servlet监听器对特定的事件进行监听,当产生这些事件的时候,会执行监听器的代码。可以对应用的加载、卸载,对…

代码随想录 Leetcode494. 目标和

题目&#xff1a; 代码(首刷看解析 2024年2月26日&#xff09; 思路&#xff1a;根据题意&#xff0c;设两个背包&#xff0c;packageA存放前面是""的数字之和&#xff0c;packageB存放前面是“-”的数字之和 则sum packageA packageB; target packageA - packag…

科普:哪几类人适合做人力RPO蓝海项目?

在当今竞争激烈的市场环境中&#xff0c;人力资源管理对于企业的重要性日益凸显。人办理RPO(招聘流程外包)作为一种新兴的服务模式&#xff0c;帮助企业优化招聘流程&#xff0c;提高招聘效率和质量。那么&#xff0c;哪几类人适合做人力RPO蓝海项目呢?本文将为大家详细总结一…

QT之项目经验(windows下的sqlite,c++开发)

目录 一、需要时间去磨练gui的调整和优化 1. 借鉴网上开源项目学习 2. gui的布局及调整是磨人的一件事情 3. gui的布局也是可以用组件复刻的 4. 耗时的设备树 二、多线程异步弹窗 三、定时任务动态变更设定 1.确定按钮触发 2.此处监听定时任务时间的改变 3.此处对改变做出具…

ClickHouse 指南(三)最佳实践 -- 跳数索引

Data Skipping Indexes Data Skipping Indexes 2 1、简介 影响ClickHouse查询性能的因素很多。在大多数情况下&#xff0c;关键因素是ClickHouse在计算查询WHERE子句条件时是否可以使用主键。因此&#xff0c;选择适用于最常见查询模式的主键对于有效的表设计至关重要。 然…

k8s(5)

目录 使用Kubeadm安装k8s集群&#xff1a; 初始化操作&#xff1a; 每台主从节点&#xff1a; 升级内核&#xff1a; 所有节点安装docker &#xff1a; 所有节点安装kubeadm&#xff0c;kubelet和kubectl&#xff1a; 修改了 kubeadm-config.yaml&#xff0c;将其传输给…

k8s pv与pvc理解与实践

参考文章&#xff1a; https://blog.csdn.net/qq_41337034/article/details/117220475 一、 pv/pvc简述 Pv是指PersistentVolume&#xff0c;中文含义是持久化存储卷是对底层的共享存储的一种抽象&#xff0c;Pv由管理员进行配置和创建&#xff0c;只要包含存储能力&#xff…

iPhone利用文件管理器批量导出语音备忘录和照片到电脑

步骤1&#xff1a;使用文件服务器在 iPhone 和电脑间共享文件 参考文献&#xff1a;苹果官网操作指南 步骤1.1&#xff1a;iPhone上打开文件app&#xff0c;点击右上角三个点&#xff0c;选择“连接服务器” 步骤1.2&#xff1a;输入电脑的登录账号和密码 步骤1.3&#xff1a…

基于uniapp框架的古汉语学习考试系统 微信小程序python+java+node.js+php

1、一般用户的功能及权限 所谓一般用户就是指还没有注册的过客,他们可以浏览主页面上的信息。但如果需要其它操作时&#xff0c;要登录注册&#xff0c;只有注册成功才有的权限。 2、管理员的功能及权限 用户信息的添加和管理&#xff0c;古汉语信息加和管理和学习视频添加和管…

php脚本输出中文在浏览器中显示乱码

问题说明 这个问题一般出现在较低版本的php中&#xff0c;原因是php和浏览器的字符解析方式不对应 &#xff0c;导致中文字符被错误解析成乱码 &#xff08;注&#xff0c;此处的php版本任意切换是依赖于小皮面板&#xff08;phpstudy&#xff09;实现的&#xff0c;感兴趣可以…

websocket实现一个局域网在线摸鱼聊天室

1.思路 新建两个项目: 第一个前端项目,搭建聊天室页面,同时使用Websocket API,与服务端进行通信 第二个项目,使用node环境,下载ws包,搭建服务 年前就发现下包有问题,年后老淘宝镜像已经崩了,完全用不了,现在改https://registry.npmmirror.com 2.前端代码 <template>&…

初探HarmonyOS之ArkTs使用教程

ArkTs是HarmonyOS&#xff08;鸿蒙操作系统&#xff09;的官方应用开发语言&#xff0c;它结合了TypeScript的静态类型特性和JavaScript的动态特性&#xff0c;为开发者提供了高效、简洁且强大的编程体验。写这篇文章记录分享一下&#xff0c;简单带你了解ArkTs的基本使用&…

YOLOv5-Openvino和ONNXRuntime推理【CPU】

1 环境&#xff1a; CPU&#xff1a;i5-12500 Python&#xff1a;3.8.18 2 安装Openvino和ONNXRuntime 2.1 Openvino简介 Openvino是由Intel开发的专门用于优化和部署人工智能推理的半开源的工具包&#xff0c;主要用于对深度推理做优化。 Openvino内部集成了Opencv、Tens…

支持国密ssl的curl编译和测试验证(上)

目录 1. 编译铜锁ssl库2. 编译nghttp2库3. 编译curl4. 验证4.1 查看版本信息4.2 验证国密ssl握手功能4.3 验证http2协议功能 以下以ubuntu 22.04环境为例进行编译 本次编译采用铜锁sslnghttp2curl&#xff0c;使得编译出来的curl可以支持国密ssl&#xff0c;并且可以支持http2…

在 Ubuntu 中, 使用 fsck 命令来修复磁盘文件系统

在 Ubuntu 中&#xff0c;可以使用 fsck 命令来修复磁盘文件系统。fsck 是用于检查和修复文件系统的工具。 使用 fsck 命令修复磁盘文件系统的步骤如下&#xff1a; 首先&#xff0c;您需要在命令行终端窗口中以 root 用户身份登录。 使用 fdisk -l 命令列出所有磁盘设备。 …

IDEA的LeetCode插件的设置

一、下载插件 选择点击File->Setting->Plugins&#xff1a;搜索LeetCode 二、打开这个插件 选择View —>Tool Windows—>leetcode 三、登陆自己的账号 关于下面几个参数的定义&#xff0c;官方给的是&#xff1a; Custom code template: 开启使用自定义模板&…

Springboot教程(二)——过滤器、拦截器

过滤器 过滤器可以在调用控制器方法之前进行一些操作&#xff0c;过滤器类一般放在filter包下。 配置类注册 使用过滤器时&#xff0c;要实现Filter接口&#xff0c;并重写doFilter方法&#xff1a; class TestFilter : Filter {override fun doFilter(request: ServletReq…