uniapp聊天记录本地存储(详细易懂)

      

目录

目录

1、通过websocket拿取数据

2、获取聊天数据

3、聊天信息存储 、更新

4、读取聊天记录

5、发送信息,信息获取

6、最终效果

1.聊天信息的存储格式

 2、样式效果


         写聊天项目,使用到了本地存储。需要把聊天信息保存在本地,实时获取。

        这个项目中,使用了websocket进行数据的交互,websocket部分就不写了,如果有需要可以看我关于websocket的博客

1、通过websocket拿取数据

        下面我有用到websocket的一些方向,但是没有写方法内容,这用了方法名。宝子们,可以看我直接写的文章,结合理解。

在vue项目中webSocket封装(传token)_vue3 websocketbean 设置header token-CSDN博客

        不需要传token的可以不传token,自己稍作更改,即可 。

2、获取聊天数据

	import {sendWebsocket,websocketSend,initWebSocket} from "../../utils/apis/ws.js";onMounted(async () => {//进入页面建立链接initWebSocket()const val = ref({id: userstore.userData.id,username: userstore.userData.username})//通过websocket发送信息sendWebsocket(wsMessage, wsError);websocketSend(val.value)//命名文件,进行读取聊天信息(在聊天信息中找到,自己和对应id朋友的聊天记录)filename.value = `chat_${sendData.value.to}_${sendData.value.from}`;//接口数据,读取本地存储的数据chatLog.value = readChatRecords(sendData.value.from, sendData.value.to)[filename.value];})// 监听服务器传来的变化const wsMessage = (data) => {console.log(data, "监听服务器传来的变化");//得到websockt返回的数据wsstore.WsChat = data;if (data.from && data.to) {//如果发送人的id和接收人的id都存在,那么进入聊天记录存储方法,进行聊天存储和更新saveChatRecord(data.from, data.to, data)}//读取聊天信息,//const res = readChatRecords(data.from, userstore.userData.id)};

3、聊天信息存储 、更新

        对于一个名为A的用户和一个名为B的用户的聊天记录,可以将它们存储在一个名为chat_A_B.json的文件中。

    // 存储聊天记录function saveChatRecord(userId, toUserId, message) {// 找到本地存储最外面的对象 , userstore.userData.id 登录人的 id.const fileName = `chat_${userstore.userData.id}.json`;//创建里面的对象,自身id和接收信息的人id.用于区别和不同朋友的聊天记录const chat = `chat_${userId}_${toUserId}`;try {//获取本地的聊天信息,如果没有生成{"chatHistory": {}}const chatContent = uni.getStorageSync(fileName) || '{"chatHistory": {}}';//将获取的数据const chatRecords = JSON.parse(chatContent);//在获取数据中查找是否有自己和好友的聊天信息存储if (!chatRecords.chatHistory.hasOwnProperty(chat)) {//如果没有创建一个新的空数组chatRecords.chatHistory[chat] = [];}// 将新消息追加到聊天记录数组中chatRecords.chatHistory[chat].push(message);//本地存储uni.setStorageSync(fileName, JSON.stringify(chatRecords));} catch (e) {console.error(e);}}}

4、读取聊天记录

        在用户打开聊天窗口时,我们应获取相应的聊天记录

	// 读取聊天记录function readChatRecords(userId, toUserId) {//找到登录人的存储文件const fileName = `chat_${userId}.json`;try {//获取信息,如果不存在,返回{"chatHistory": {}}const chatContent = uni.getStorageSync(fileName) || '{"chatHistory": {}}';return JSON.parse(chatContent).chatHistory;} catch (e) {console.error(e);return [];}}

5、发送信息,信息获取

//登录人发送信息,更新本地存储
const Send = async () => {//获取信息发送时间sendData.value.time = getNowTime()//想接口发送数据websocketSend(sendData.value)//将发送的聊天信息保存在本地saveChatRecord(sendData.value.to, sendData.value.from, sendData.value);//获取本地存储的数据进行页面更新chatLog.value = readChatRecords(sendData.value.from, sendData.value.to)[filename.value];console.log(chatLog.value, "发送完信息,获取数据");// 将输入框清空sendData.value.content = ""}//在登录人发送信息后本地存储数据更新,监测到更新后,读取存储数据,进行页面更新
watch(() => ws.WsChat, (newValue, oldValue) => {console.log(`count发生了变化,老值为${oldValue},新值为${newValue}`);//监测本地存储中是否有数据更新,即是否收到新的消息chatLog.value = readChatRecords(sendData.value.from, sendData.value.to)[filename.value];}, {immediate: true})

6、最终效果

1.聊天信息的存储格式

        id为9的账号都存储在chat_9.json文件中,chat_7_9是id为9的账号和朋友id为7的账号的聊天记录。chat_8_9是id为9的账号和朋友id为8的账号的聊天记录。

 2、样式效果

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

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

相关文章

GPT对话知识库——ARM-Cortex架构分为哪几个系列?每个系列有几种工作模式?各种工作模式之间的定义和区别?每种架构不同的特点和应用需求?

提问模型:GPT-4-TURBO-PREVIEW 提问时间:2024.03.02 1,问: Cortex-M系列有几种工作模式 1,答: Cortex-M系列微控制器是ARM公司开发的一类低功耗、高性能的32位微处理器,广泛应用于嵌入式系统中…

Centos7使用man查找命令时,报错No manual entry for xxxx

Centos7使用man查找命令时,报错No manual entry for xxxx 在Linux中使用man指令查找指令信息时,报No manual entry for xxxx。 比如使用man指令查找sleep3号手册时,出现以下错误: 这是由于没有安装man-pages这个rpm包导致的&#…

掌握基本排序算法:冒泡、选择、插入和快速排序

在计算机科学的世界里,排序是一项基本而重要的操作。无论是数据库管理、搜索引擎,还是日常编程,高效的排序算法都是提高性能的关键。本文将介绍四种基本的排序算法:冒泡排序、选择排序、插入排序和快速排序,并探讨它们…

从0开始学习NEON(1)

1、前言 在上个博客中对NEON有了基础的了解,本文将针对一个图像下采样的例子对NEON进行学习。 学习链接:CPU优化技术 - NEON 开发进阶 上文链接:https://blog.csdn.net/weixin_42108183/article/details/136412104 2、第一个例子 现在有一张图片,需…

获取 Windows 通知中心弹窗通知内容(含工具汉化)

目录 前言 技术原理概述 测试代码和程序下载连接 本文出处链接:https://blog.csdn.net/qq_59075481/article/details/136440280。 前言 从 Windows 8.1 开始,Windows 通知现在以 Toast 而非 Balloon 形式显示( Bollon 通知其实现在是应用…

在ubuntu上安装hadoop完分布式

准备工作 Xshell安装包 Xftp7安装包 虚拟机安装包 Ubuntu镜像源文件 Hadoop包 Java包 一、安装虚拟机 创建ubuntu系统 完成之后会弹出一个新的窗口 跑完之后会重启一下 按住首先用ctrlaltf3进入命令界面,输入root,密码登录管理员账号 按Esc 然后输入 …

数据结构常用的字符串函数(中英双释)

头文件:string.h 1.strchr const char * strchr ( const char * str, int character ); Locate first occurrence of character in string str C string. character Character to be located. Return Value A pointer to the first occurrence of character in s…

适用于恢复iOS数据的 10 款免费 iPhone 恢复软件

现在,您可以获得的 iPhone 的存储容量比大多数人的笔记本电脑和台式电脑的存储容量还要大。虽然能够存储数千张高分辨率照片和视频文件、安装数百个应用程序并随身携带大量音乐库以供离线收听固然很棒,但在一个地方拥有如此多的数据可能会带来毁灭性的后…

2.2_5 调度算法

文章目录 2.2_5 调度算法一、适用于早期的批处理系统(一)先来先服务(FCFS,First Come First Serve)(二)短作业优先(SJF,Shortest Job First)(三&a…

SpringMVC总结

SpringMVC SpringMVC是隶属于Spring框架的一部分,主要是用来进行Web开发,是对Servlet进行了封装。 对于SpringMVC我们主要学习如下内容: SpringMVC简介 请求与响应 REST风格 SSM整合(注解版) 拦截器 SpringMVC是处理Web层/表现层的框架&#xff…

易语言源代码5000例

仅供学习研究交流使用 加群下载

探索MyBatis-Plus的高阶用法

引言 MyBatis-Plus 是 MyBatis 的增强工具包,提供了许多方便快捷的功能来简化开发,提高效率。除了基本的 CRUD 操作外,MyBatis-Plus 还提供了一些高级功能,本文将探讨 MyBatis-Plus 的高阶用法,帮助开发者更好地利用该…

Linux服务器搭建超简易跳板机连接阿里云服务器

简介 想要规范内部连接阿里云云服务器的方式,但是最近懒病犯了,先搞一个简易式的跳板机过渡一下,顺便在出一个教程,其他以后再说! 配置方法 创建密钥 登录阿里云,找到云服务器ECS控制台,点击…

【小白友好】LeetCode 打家劫舍 III

https://leetcode.cn/problems/house-robber-iii/description/ 前言 建议还是先看看动态规划的基础题再看这个。动态规划是不刷题,自己100%想不出来的。 基础题: 23 小白想法 现在我们想遍历的数据结构不是数组了,而是一颗树。在树上的d…

C++递推

统计每个月兔子的总数 #include<bits/stdc.h> using namespace std; int n,sum0; void f(int); int main() {int a[1000];cin>>n;a[1]1;a[2]2;for(int i3;i<1000;i){a[i]a[i-1]a[i-2];}cout<<a[n];return 0; } void f(int n){}猴子吃桃子 #include<b…

2024年华为OD机试真题-电脑病毒感染-Python-OD统一考试(C卷)

题目描述: 一个局域网内有很多台电脑,分别标注为0 - N-1的数字。相连接的电脑距离不一样,所以感染时间不一样,感染时间用t表示。 其中网络内一个电脑被病毒感染,其感染网络内所有的电脑需要最少需要多长时间。如果最后有电脑不会感染,则返回-1 给定一个数组times表示一个…

在Spring Boot中如何实现异常处理?

在Spring Boot中&#xff0c;异常处理可以通过几种方式实现&#xff0c;以提高应用程序的健壮性和用户体验。这些方法包括使用ControllerAdvice注解、ExceptionHandler注解、实现ErrorController接口等。下面是一些实现Spring Boot异常处理的常用方法&#xff1a; 1. 使用Cont…

Git实战(2)

git work flow ------------------------------------------------------- ---------------------------------------------------------------- 场景问题及处理 问题1&#xff1a;最近提交了 a,b,c,d记录&#xff0c;想把b记录删掉其他提交记录保留&#xff1a; git reset …

【C++ 编程指南】

C 编程指南 ■ C环境安装■ C 基本语法■ 预定义宏■ # 和 ## 运算符■ C 引用■ C 命名空间■ 定义命名空间■ using 指令■ 嵌套的命名空间 ■ String类■ 类■ 类的static静态成员 ■ C 继承■ 继承类型 public、protected 或 private■ 访问控制和继承■ 多继承■ 数据抽象…

机器学习-面经

经历了2023年的秋招&#xff0c;现在也已经入职半年了&#xff0c;空闲时间将面试中可能遇到的机器学习问题整理了一下&#xff0c;可能答案也会有错误的&#xff0c;希望大家能指出&#xff01;另外&#xff0c;不论是实习&#xff0c;还是校招&#xff0c;都祝福大家能够拿到…