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、样式效果
相关推荐
Smile_Gently1 小时前
前端:最简单封装nmp插件(组件)过程。
前端·javascript·vue.js·elementui·vue
nihui1236 小时前
Uniapp 实现顶部标签页切换功能?
javascript·vue.js·uni-app
ThomasChan12312 小时前
vue3.x 的 toRef详细解读
前端·javascript·vue.js·node.js·vue·bootstrap·less
尚学教辅学习资料13 小时前
基于SSM+uniapp的鲜花销售小程序+LW示例参考
小程序·uni-app·java毕设·鲜花销售
web_Hsir14 小时前
vue + uniapp + 高德地图实现微信小程序地图polyline、marker展示
vue.js·微信小程序·uni-app
新手小袁_J15 小时前
毕业设计—基于Spring Boot的社区居民健康管理平台的设计与实现
java·spring boot·后端·vue·毕业设计·毕设
2401_8854055115 小时前
智能硬件定位技术发展趋势
物联网·微信小程序·uni-app·智慧城市·智能硬件·宠物·智能手表
尚学教辅学习资料15 小时前
基于SpringBoot+vue+uniapp的投票小程序+LW示例参考
vue.js·spring boot·小程序·uni-app·java毕设·投票系统
武哥聊编程16 小时前
【原创精品】基于Springboot3+Vue3的停车场管理系统
java·spring boot·后端·mysql·vue·毕业设计