@tencentcloud/roomkit-web-vue3
Version:
<h1 align="center"> TUIRoomKit</h1> Conference (TUIRoomKit) is a product suitable for multi-person audio and video conversation scenarios such as business meetings, webinars, and online education. By integrating this product, you can add room management,
143 lines (142 loc) • 4.59 kB
JavaScript
import { watch, onUnmounted } from "vue";
import { storeToRefs } from "pinia";
import { useChatStore } from "../../../stores/chat.mjs";
import { useBasicStore } from "../../../stores/basic.mjs";
import { useI18n } from "../../../locales/index.mjs";
import TUIRoomEngine__default, { TencentCloudChat } from "@tencentcloud/tuiroom-engine-js";
import useRoomEngine from "../../../hooks/useRoomEngine.mjs";
function useMessageList() {
var _a;
const { t } = useI18n();
const roomEngine = useRoomEngine();
const chatStore = useChatStore();
const basicStore = useBasicStore();
const { roomId } = storeToRefs(basicStore);
const { messageList, isCompleted, nextReqMessageId } = storeToRefs(chatStore);
watch(
isCompleted,
(value) => {
isCompleted.value = value;
},
{ immediate: true, deep: true }
);
async function handleGetHistoryMessageList() {
var _a2;
const tim2 = (_a2 = roomEngine.instance) == null ? void 0 : _a2.getTIM();
const imResponse = await (tim2 == null ? void 0 : tim2.getMessageList({
conversationID: `GROUP${roomId.value}`,
nextReqMessageID: nextReqMessageId.value
}));
const {
nextReqMessageID: middleReqMessageId,
messageList: historyMessageList,
isCompleted: isCompleted2
} = imResponse.data;
messageList.value.splice(0, 0, ...historyMessageList);
const currentMessageList = messageList.value.filter(
(item) => item.type === "TIMTextElem"
);
chatStore.setMessageListInfo(
currentMessageList,
isCompleted2,
middleReqMessageId
);
}
async function getMessageList() {
var _a2;
let count = 0;
const result = {
currentMessageList: [],
isCompleted: false,
nextReqMessageId: ""
};
const tim2 = (_a2 = roomEngine.instance) == null ? void 0 : _a2.getTIM();
const getIMMessageList = async () => {
const conversationData = {
conversationID: `GROUP${roomId.value}`
};
if (result.nextReqMessageId !== "") {
conversationData.nextReqMessageID = result.nextReqMessageId;
}
const imResponse = await tim2.getMessageList(conversationData);
const { messageList: messageList2, isCompleted: isCompleted2, nextReqMessageID } = imResponse.data;
result.currentMessageList.splice(0, 0, ...messageList2);
result.isCompleted = messageList2.length > 0 ? isCompleted2 : true;
result.nextReqMessageId = nextReqMessageID;
if (result.isCompleted || result.currentMessageList.length >= 15) {
return;
}
count += 1;
if (count === 1) {
await getIMMessageList();
}
};
await getIMMessageList();
return result;
}
const onReceiveMessage = (options) => {
if (!options || !options.data) {
return;
}
const currentConversationId = `GROUP${roomId.value}`;
options.data.forEach((message) => {
if (message.conversationID !== currentConversationId || message.type !== TencentCloudChat.TYPES.MSG_TEXT) {
return;
}
const {
ID,
payload: { text },
nick: userName,
from: userId
} = message;
chatStore.updateMessageList({
ID,
type: "TIMTextElem",
payload: {
text
},
nick: userName || userId,
from: userId,
flow: "in",
sequence: Math.random()
});
});
};
async function setMessageListInfo() {
const { currentMessageList, isCompleted: isCompleted2, nextReqMessageId: nextReqMessageId2 } = await getMessageList();
const filterCurrentMessageList = currentMessageList.filter(
(item) => item.type === "TIMTextElem"
);
chatStore.setMessageListInfo(
filterCurrentMessageList,
isCompleted2,
nextReqMessageId2
);
}
function getDisplaySenderName(index) {
if (index === 0) return true;
return messageList.value[index].from !== messageList.value[index - 1].from;
}
let tim = (_a = roomEngine.instance) == null ? void 0 : _a.getTIM();
if (!tim) {
tim = TencentCloudChat.create({ SDKAppID: basicStore.sdkAppId });
}
TUIRoomEngine__default.once("ready", () => {
tim == null ? void 0 : tim.on(TencentCloudChat.EVENT.MESSAGE_RECEIVED, onReceiveMessage);
});
onUnmounted(() => {
tim == null ? void 0 : tim.off(TencentCloudChat.EVENT.MESSAGE_RECEIVED, onReceiveMessage);
});
return {
t,
handleGetHistoryMessageList,
messageList,
getMessageList,
setMessageListInfo,
getDisplaySenderName,
isCompleted
};
}
export {
useMessageList as default
};