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

目录

目录

1、通过websocket拿取数据

2、获取聊天数据

[3、聊天信息存储 、更新](#3、聊天信息存储 、更新)

4、读取聊天记录

5、发送信息,信息获取

6、最终效果

1.聊天信息的存储格式

2、样式效果


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

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

1、通过websocket拿取数据

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

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

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

2、获取聊天数据

javascript 复制代码
	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的文件中。

javascript 复制代码
    // 存储聊天记录
	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、读取聊天记录

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

javascript 复制代码
	// 读取聊天记录
	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、发送信息,信息获取

javascript 复制代码
//登录人发送信息,更新本地存储
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、样式效果
相关推荐
蝶开三月4 小时前
php:使用socket函数创建WebSocket服务
网络·websocket·网络协议·php·socket
Backstroke fish5 小时前
Token刷新机制
前端·javascript·vue.js·typescript·vue
小曲程序5 小时前
vue3 封装request请求
java·前端·typescript·vue
Lysun0016 小时前
[less] Operation on an invalid type
前端·vue·less·sass·scss
耶啵奶膘7 小时前
uniapp+vue2全局监听退出小程序清除缓存
小程序·uni-app
刽子手发艺7 小时前
WebSocket详解、WebSocket入门案例
网络·websocket·网络协议
程序视点14 小时前
【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
前端·javascript·vue.js·typescript·vue·ecmascript
我开心就好o14 小时前
uniapp点左上角返回键, 重复来回跳转的问题 解决方案
前端·javascript·uni-app
Random_index14 小时前
#Uniapp篇:支持纯血鸿蒙&发布&适配&UIUI
uni-app·harmonyos
刚刚好ā15 小时前
js作用域超全介绍--全局作用域、局部作用、块级作用域
前端·javascript·vue.js·vue