【分布式websocket 】前端vuex管理客户端消息crud！使用localStorage来存储【第19期】

前言

聊天系统客户端是要存储消息的，因为所有所有的历史消息都从服务器拉的话一方面服务器压力大，另一方面也耗费用户流量。所以客户端存储消息是势在必行的。如何存储呢上一篇文章也写了，大概就是浏览器的话是localStorage或者IndexedDB。然后手机端和桌面端就是sqllite了。这样子消息的存储结构以及消息的增删改查也是需要一套的了。本篇文章将着重从自己的开源项目技术选型来进行分享。vuex进行增删改查。B站会录制视频同步分享。

目前已经写的文章有。并且有对应视频版本。
git项目地址 【IM即时通信系统（企聊聊）】点击可跳转
sprinboot单体项目升级成springcloud项目 【第一期】
前端项目技术选型以及页面展示【第二期】
分布式权限 shiro + jwt + redis【第三期】
给为服务添加运维模块 统一管理【第四期】
微服务数据库模块【第五期】
netty与mq在项目中的使用(第六期(废弃))】
分布式websocket即时通信(IM)系统构建指南【第七期】
分布式websocket即时通信(IM)系统保证消息可靠性【第八期】
分布式websocket IM聊天系统相关问题问答【第九期】
什么？websocket也有权限！这个应该怎么做？【第十期】
分布式ID是什么，以美团Leaf为例改造融入自己项目【第十一期】
IM聊天系统为什么需要做消息幂等？如何使用Redis以及Lua脚本做消息幂等【第12期】
微信发送一条消息经历哪些过程。企业微信以及钉钉的IM架构对比【第13期】
微信群为什么上限是500人，IM设计系统中的群聊的设计难点【第14期】
【分布式websocket】RocketMQ发送消息保证消息最终一致性需要做哪些处理？【第15期】

【分布式websocket】群聊中的各种难点以及解决推拉结合【第16期】

【分布式webscoket】未读消息如何设计？解决缓存与数据库数据一致性！推送未读消息流程【第17期】

IM系统客户端消息存储在手机电脑浏览器分别存储在什么地方?对消息加密策略？如何保证服务端消息和客户端消息一致性【第18期】
【分布式websocket】聊天系统消息加密如何做【第20期】
【分布式webscoket】IM聊天系统消息如何存储 如何分库分表以及Seata解决事务以及ShardingSphere-Scaling解决数据迁移【第21期】

客户端消息结构：

技术选型在浏览器端的localStorage，当然是有缺陷的。后续根据情况再进行优化。页面如下。
在这里插入图片描述

在这里插入图片描述

chats: []            数组 存放每一个聊天用户lastContent：	 存放最后一条消息用于显示tagrgetId: 		 标识唯一会话，可以考虑改成会话id，目前使用的是单聊是对方的id，群聊是群聊idtype ：			 标记是私聊还是群聊unreadCount:	 未读消息数量 （TODO）messgaes ：[]    存放每一个用户下面具体的聊天消息，数组type：		 用于标记消息是自己发的还是别人的，用于前端显示样式group:        用于区分消息是群聊还是单聊 ，创建消息的时候会使用到msgid:        消息唯一idavatarUrl:    用于页面上面显示聊天头像框content：	     消息内容tagrgetId：     标识唯一会话id
privateMsgMaxId: 拉取消息id

如下
客户端消息操作主要是 .

  • 添加 1.上线后拉取未读消息要存储未读消息 2.发送消息需要添加消息3.收到消息需要添加
  • 查询 进入聊天页面需要可以查到消息
  • 修改 消息发送失败需要修改状态发送失败
  • 删除 前端存储有限制只能维护一定时间的历史消息。更多的历史消息查询客户端

vuex基本概念概述

export default createStore({state,mutations,actions,getters,modules: {}
})

大概就是这么几个部分。
总结来说，Getter 用于获取由 state 计算得出的数据；
Mutation 用于同步地改变 state,
Action 则封装了异步操作，并最终通过 commit 来间接触发 mutations 更新状态。
state 就是封装变量的地方。

Vuex 允许将应用程序的状态集中存储在一个共享的 store 中，避免了组件之间通过 props 和 events 进行状态传递的复杂性和繁琐性。这使得状态管理更加清晰和易于维护。通过 Vuex 管理状态，整个应用程序共享同一个状态树，确保了状态的一致性和同步性。

场景介绍

消息查询
// 创建一个计算属性，该属性基于其他响应式状态计算值const computedChats = computed(() => {let chat = null;console.log("computedChats route.query.groupId", route.query.groupId);if (state.current == 1) {chat = {targetId: state.toUser.openid,};} else {chat = {// targetId: state.toUser.openid,targetId: state.groupId,};}const idx = store.getters.findChatIdx(chat);if (idx == null || idx == undefined) {return [];}if (store.state.chats[idx] == null ||store.state.chats[idx] == undefined) {return [];}console.log("computedChats idx", idx);console.log("computedChats 寻找成功啦", store.state.chats[idx]);return store.state.chats[idx];});

封装了一个计算属性。用于监听state里面的消息变化。逻辑大概是拿到当前会话的id，单聊的话就是对话的openid。然后去store里面去找一下。找不到的返回空数组。找到的话返回当前聊天下的所有信息.

对应前台页面

渲染一下这个compute属性

   <list-scroll :scroll-data="computedChats.messages"><div class="swiper-container"><divclass="content"v-for="(item, index) in computedChats.messages":key="index"><div class="d-felx justify-start " v-if="item.type === 'self'"><div style="display: flex;"><van-imagewidth="35px"height="35px"fit="cover":src="userInfo.avatarUrl"/><div class="font-18 content1"><text>{{ item.content }}</text></div></div></div><divstyle="display: flex; justify-content: flex-end;"v-if="item.type === 'receive'"><div class="font-18 content2"><text>{{ item.content }}</text></div><div class=""><van-imagewidth="35px"height="35px"fit="cover":src="toUser.avatarUrl"/></div></div></div></div></list-scroll>

消息添加

分为离线数据添加 和在线数据添加。
离线数据添加需要使用到action，异步的去后台拉取然后插入。
在线数据直接调用mutation数据插入。

 /*** 插入消息.* @param {*} state* @param {*} msgInfo 当前消息*/insertMessage(state, msgInfo) {console.log("insertMessage",msgInfo)state.privateMsgMaxId = msgInfo.msgId;state.groupMsgMaxId = msgInfo.msgId;// 如果是已存在消息，则覆盖旧的消息数据let chat = this.getters.findChat(msgInfo);if (chat == null) {this.commit("createChat", msgInfo);chat = this.getters.findChat(msgInfo);}if(chat == null){console.log("没有找到chat",chat);return;}chat.messages.push(msgInfo);this.commit("saveToStorage");},

第一步，先更新一下这个最大的消息id。然后去store里面去找当前消息。找到之后给当前chat里面推送消息。并且同步的保存到Storgae里面.

/***  state.chats 将更新后的存储.* @param {*} state*/saveToStorage(state) {let userId = state.userInfo.openid;let key = "chats-" + userId;let chatsData = {privateMsgMaxId: state.privateMsgMaxId,groupMsgMaxId: state.groupMsgMaxId,chats: state.chats,};localStorage.setItem(key, JSON.stringify(chatsData));},

这个存储的逻辑就是简单的将消息序列化后放到localStorage里面。

强调一下这个离线消息拉取的步骤；需要后台sql的配合。
 async pullOffline(ctx) {// 获取当前store中的privateMsgMaxIdconst privateMsgMaxId = ctx.state.privateMsgMaxId+"";console.log("privateMsgMaxId",ctx.state.privateMsgMaxId)const res = await getChatContentAll(privateMsgMaxId);const contentAll = res.contentfor (var i = 0; i < contentAll.length; i++) { ctx.commit("initInsertMessage", contentAll[i]); }}

调用后台接口getChatContentAll 然后获取未拉取的离线消息然后进行存储。

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

如若内容造成侵权/违法违规/事实不符，请联系瞎胡闹网进行投诉反馈，一经查实，立即删除！

相关文章

Docker 学习笔记一

Docker 学习笔记一

一、什么是docker Docker 是一个基于轻量级虚拟化技术的容器&#xff0c;整个项目基于Go语言开发&#xff1b;Docker是一个C/S架构&#xff0c;后端众多模块各司其职&#xff0c;docker的daemon是运行在主机上通过client可以进行通信。 docker 由三部分组成&#xff1a;镜像(…
阅读更多...
【第六章】简单网络实现手写数字分类-编程实现

【第六章】简单网络实现手写数字分类-编程实现

前言 让我们编写一个程序&#xff0c;学习如何使用随机梯度下降和MNIST训练数据来识别手写数字。我们将通过一个简短的Python程序来实现这一点&#xff0c;只需要74行代码&#xff01;首先我们需要获取MNIST数据。 本章代码和数据下载地址&#xff1a; https://download.csdn.…
阅读更多...
碳素光线疗法与中医

碳素光线疗法与中医

看得见的穴位碳素光线疗法 最近日本的医疗随着科学技术的发达&#xff0c;在基础研究、临床各领域取得了显著的发展。日本人的平均寿命比战前大幅延长&#xff0c;结核及其他疑难杂症、癌症等疾病也在逐渐被压制。其中&#xff0c;作为癌症的辅助疗法&#xff0c;日本癌症学会等…
阅读更多...
【PyTorch】成功解决ModuleNotFoundError: No module named ‘torch’

【PyTorch】成功解决ModuleNotFoundError: No module named ‘torch’

【PyTorch】成功解决ModuleNotFoundError: No module named ‘torch’ &#x1f308; 个人主页&#xff1a;高斯小哥 &#x1f525; 高质量专栏&#xff1a;Matplotlib之旅&#xff1a;零基础精通数据可视化、Python基础【高质量合集】、PyTorch零基础入门教程&#x1f448; 希…
阅读更多...
蓝桥杯单片机快速开发笔记——独立键盘

蓝桥杯单片机快速开发笔记——独立键盘

一、原理分析 二、思维导图 三、示例框架 #include "reg52.h" sbit S7 P3^0; sbit S6 P3^1; sbit S5 P3^2; sbit S4 P3^3; void ScanKeys(){if(S7 0){Delay(500);if(S7 0){while(S7 0);}}if(S6 0){Delay(500);if(S6 0){while(S6 0)…
阅读更多...
Flink 集群部署模式

Flink 集群部署模式

文章目录 前言一、会话模式&#xff08;Session Mode&#xff09;二、单作业模式&#xff08;Per-Job Mode&#xff09;三、应用模式&#xff08;Application Mode&#xff09; 前言 Flink支持多种集群部署模式&#xff0c;以满足不同场景和需求。以下是Flink的主要集群部署模…
阅读更多...
Rust学习02：推荐一本入门书，免费的

Rust学习02：推荐一本入门书，免费的

都说Rust的学习曲线很陡峭&#xff0c;试过才知雀实不容易。 先说我的基础&#xff0c;非科班&#xff0c;自学Python&#xff0c;写过几个小程序。 我买书从来不扣扣嗖嗖的&#xff0c;所以先啃了几本Rust的入门书&#xff0c;包括&#xff1a; Tim McNamara的《Rust实战》&am…
阅读更多...
javaEE——线程的等待和结束

javaEE——线程的等待和结束

文章目录 Thread 类及常见方法启动一个线程中断一个线程变量型中断调用 interrupt() 方法来通知观察标志位是否被清除 等待一个线程获取当前线程引用休眠当前线程 线程的状态观察线程的所有状态观察 1: 关注 NEW 、 RUNNABLE 、 TERMINATED 状态的切换 多线程带来的风险为什么会…
阅读更多...
基于SpringBoot框架实现的B2B平台的医疗病历交互系统

基于SpringBoot框架实现的B2B平台的医疗病历交互系统

采用技术 基于SpringBoot框架实现的B2B平台的医疗病历交互系统的设计与实现~ 开发语言&#xff1a;Java 数据库&#xff1a;MySQL 技术&#xff1a;SpringBootMyBatis 工具&#xff1a;IDEA/Ecilpse、Navicat、Maven 页面展示效果 管理员角色 医院管理 医院注册 医院文…
阅读更多...
pytorch 入门基础知识一（Pytorch 01）

pytorch 入门基础知识一（Pytorch 01）

一 深度学习基础相关 深度学习三个主要的方向&#xff1a;计算机视觉&#xff0c;自然语言&#xff0c;语音识别。 机器学习核心组件&#xff1a;1 数据集(data)&#xff0c;2 前向传播的model(net)&#xff0c;3 目标函数(loss)&#xff0c; 4 调整模型参数和优化函数的算法…
阅读更多...
C#混淆心得

C#混淆心得

C#混淆心得 近期遇到混淆C#代码的需求&#xff0c;在网上找了很多办法&#xff0c;在此记录一下。 混淆的本质就是让代码变丑&#xff0c;让别人看不懂。 为什么要混淆&#xff1a; 1.保护核心代码 可以在一定程度上避免别人偷代码&#xff0c;从而保护重要的部分&#xf…
阅读更多...
vscode jupyter 如何关闭声音

vscode jupyter 如何关闭声音

网上之前搜的zen模式失败 仅仅降低sound失败 #以下是成功方式&#xff1a; 首先确保user和remote的声音都是0&#xff1a; 然后把user和remote的以下设置都设置为off就行了&#xff01; 具体操作参考 https://stackoverflow.com/questions/54173462/how-to-turn-off-or-on-so…
阅读更多...
传输层/UDP/TCP协议

传输层/UDP/TCP协议

再谈端口号 TCP/IP协议用“源IP”&#xff0c;“源端口号”&#xff0c;“目的IP”&#xff0c;“目的端口号”&#xff0c;“协议号”&#xff0c;这样一个五元组来标识一个通信&#xff08;可以用netstat -n来查看&#xff09;。 端口号的划分和知名端口号 我们之前就说过&am…
阅读更多...
综合知识篇05-设计模式考点（2024年软考高级系统架构设计师冲刺知识点总结系列文章）

综合知识篇05-设计模式考点（2024年软考高级系统架构设计师冲刺知识点总结系列文章）

专栏系列文章： 2024高级系统架构设计师备考资料（高频考点&真题&经验）https://blog.csdn.net/seeker1994/category_12593400.html案例分析篇00-【历年案例分析真题考点汇总】与【专栏文章案例分析高频考点目录】（2024年软考高级系统架构设计师冲刺知识点总结-案例…
阅读更多...
【Java】容器｜Set、List、Map及常用API

【Java】容器｜Set、List、Map及常用API

目录 一、概述 二、List 1、List的常用API 2、ArrayList 3、List遍历 三、Set 1、Set的常用方法: 2、HashSet 3、遍历集合&#xff1a; 四、Map 1、Map常用API 2、HashMap 3、遍历Map 五、迭代器 一、概述 在Java中所有的容器都属于Collection接口下的内容 1…
阅读更多...
如何监控用户对网站的操作行为？

如何监控用户对网站的操作行为？

需求&#xff1a; 1、对所有用户的操作进行监控&#xff0c;包括用户行为的录制 2、通过用户操作热度地图&#xff0c;来监控每个功能的使用频率&#xff0c;从而来决策产品的下一步迭代 一、浏览器自带的录频方法 MediaDevices.getUserMedia() 二、html2canvas页面截屏方法 …
阅读更多...
2022年安徽省职业院校技能大赛 (高职组)“云计算”赛项样卷

2022年安徽省职业院校技能大赛 (高职组)“云计算”赛项样卷

#需要资源或有问题的&#xff0c;可私博主&#xff01;&#xff01;&#xff01; #需要资源或有问题的&#xff0c;可私博主&#xff01;&#xff01;&#xff01; #需要资源或有问题的&#xff0c;可私博主&#xff01;&#xff01;&#xff01; 第一场次&#xff1a;私有云(5…
阅读更多...
cool 中的Midway ----node.js的TypeORM的使用

cool 中的Midway ----node.js的TypeORM的使用

1.介绍 TypeORM | Midway TypeORM 是 node.js 现有社区最成熟的对象关系映射器&#xff08;ORM &#xff09;。本文介绍如何在 Midway 中使用 TypeORM 相关信息&#xff1a; 描述可用于标准项目✅可用于 Serverless✅可用于一体化✅包含独立主框架❌包含独立日志❌ 和老写…
阅读更多...
展开说说：Android之SharedPreferences

展开说说：Android之SharedPreferences

SharedPreferences 是一种轻量级的数据持久化存储机制。以key/value键值对形式存储在xml文件&#xff0c;用于保存一些应用程序数据。保存在 /data/data/PACKAGE_NAME/shared_prefs/xxx.Xml文件。 SharedPreferences 只能存储string&#xff0c;int&#xff0c;float&#xff…
阅读更多...
F5怎么样？保障AI服务的安全性和交付

F5怎么样？保障AI服务的安全性和交付

伴随着人工智能时代的快速发展&#xff0c;AI已成为企业数字化转型的得力工具&#xff0c;比如为用户提供更好的服务&#xff0c;降低企业成本等。与此同时&#xff0c;AI技术的应用也会带来应用安全等方面的新风险&#xff0c;可见其有着双刃剑效应。作为一家提供多云应用安全…
阅读更多...
最新文章

Copyright @ 2022~2023