??????
目錄
目錄
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、樣式效果
)
