Render Conversation Messages on the Chat Page

Overview

This article describes how to use the ZIM SDK to render conversation messages on a basic one-on-one chat page.

Prerequisites

You have already integrated the ZIM SDK into your project and implemented basic message sending and receiving. For details, refer to Quick Start - Implement Basic Message Sending and Receiving.

Message Data Source Overview

The message data sources that need to be rendered on the page mainly include the following:

Historical conversation messages: When you first enter the chat page and view historical messages, you need to query historical conversation messages and render them to the chat interface.
Real-time received messages: Real-time received chat messages need to be rendered to the chat interface.
Local sent messages: Local sent chat messages (including sending, sending successfully, and sending failed statuses) need to be rendered to the chat interface.

Get Message Data and Render to the Chat Interface

As an example of a single chat conversation, when you navigate to the chat page, you need to save the corresponding single chat conversationID (the userID of the other party) and maintain a message list myMessageList for saving the current conversation.

Before obtaining message data, you also need to implement an addMessage utility method to merge message data.

function addMessage(addList: ZIMMessage[]) {
    if (!addList || addList.length === 0) return;

    const mutableList: ZIMMessage[] = myMessageList ? [...myMessageList] : [];

    for (const newMsg of addList) {
        let replaced = false;
        for (let i = 0; i < mutableList.length; i++) {
            const oldMsg = mutableList[i];
            if ((newMsg.messageID && oldMsg.messageID && newMsg.messageID === oldMsg.messageID) ||
                (newMsg.localMessageID && oldMsg.localMessageID && newMsg.localMessageID === oldMsg.localMessageID)) {
                mutableList[i] = newMsg;
                replaced = true;
                break;
            }
        }
        if (!replaced) {
            mutableList.push(newMsg);
        }
    }

    mutableList.sort((a, b) => a.orderKey - b.orderKey);
    myMessageList = mutableList;
}

function addMessage(addList: ZIMMessage[]) {
    if (!addList || addList.length === 0) return;

    const mutableList: ZIMMessage[] = myMessageList ? [...myMessageList] : [];

    for (const newMsg of addList) {
        let replaced = false;
        for (let i = 0; i < mutableList.length; i++) {
            const oldMsg = mutableList[i];
            if ((newMsg.messageID && oldMsg.messageID && newMsg.messageID === oldMsg.messageID) ||
                (newMsg.localMessageID && oldMsg.localMessageID && newMsg.localMessageID === oldMsg.localMessageID)) {
                mutableList[i] = newMsg;
                replaced = true;
                break;
            }
        }
        if (!replaced) {
            mutableList.push(newMsg);
        }
    }

    mutableList.sort((a, b) => a.orderKey - b.orderKey);
    myMessageList = mutableList;
}

Note

Each time you call a message-related interface (such as the interfaces shown below), you will get a message list ZIMMessage[]. The obtained message list needs to be merged to obtain a message list without duplicate messages and ordered messages for rendering on the message page. The message sorting rule is to sort by the orderkey property in ZIMMessage (the larger the orderkey, the newer the current message); the de-duplication rule is to determine whether the message object is the same message based on the localMessageID of the message, and replace the new data with the old data when it is duplicated.

Query Historical Messages and Render Them to the Chat Interface

Call the queryHistoryMessage interface to query historical messages from new to old (from the most recent message to the oldest message in chronological order) and render them to the chat interface.

const queryConfig: ZIMMessageQueryConfig = {
  count: 20,
  nextMessage: null // When the first query is empty
};

zim.queryHistoryMessage(
  myConversationID,
  ZIMConversationType.Peer,
  queryConfig,
  (conversationID, conversationType, messageList, errorInfo) => {
    addMessage(messageList);
    updateUI(); // Custom refresh message list function
  }
);

const queryConfig: ZIMMessageQueryConfig = {
  count: 20,
  nextMessage: null // When the first query is empty
};

zim.queryHistoryMessage(
  myConversationID,
  ZIMConversationType.Peer,
  queryConfig,
  (conversationID, conversationType, messageList, errorInfo) => {
    addMessage(messageList);
    updateUI(); // Custom refresh message list function
  }
);

Get Real-time Received Messages and Render Them to the Chat Interface

Listen to the peerMessageReceived interface to get real-time received messages and render them to the chat interface.


function onPeerMessageReceived(
    zim: ZIM,
    messageList: ZIMMessage[],
    info: ZIMMessageReceivedInfo,
    fromUserID: string
) {
    // Only process messages from the current conversation
    if (fromUserID !== myConversationID) return;

    // Merge messages into message list
    addMessage(messageList);

    // Update UI, such as refreshing message list
    updateUI();
}


function onPeerMessageReceived(
    zim: ZIM,
    messageList: ZIMMessage[],
    info: ZIMMessageReceivedInfo,
    fromUserID: string
) {
    // Only process messages from the current conversation
    if (fromUserID !== myConversationID) return;

    // Merge messages into message list
    addMessage(messageList);

    // Update UI, such as refreshing message list
    updateUI();
}

Render Local Sent Messages to the Chat Interface

Listen to the messageSentStatusChanged interface to get the change of the sending status of the local sent message (sending, sending successfully, and sending failed), and render the local sent message and its sending status to the chat interface.

zim.onMessageSentStatusChanged = (messageSentStatusChangeInfoList: ZIMMessageSentStatusChangeInfo[]) => {
    for (const info of messageSentStatusChangeInfoList) {
        if (info.message.conversationID !== myConversationID) continue;
        addMessage([info.message]);
    }
    updateUI(); // Custom refresh UI function
};

zim.onMessageSentStatusChanged = (messageSentStatusChangeInfoList: ZIMMessageSentStatusChangeInfo[]) => {
    for (const info of messageSentStatusChangeInfoList) {
        if (info.message.conversationID !== myConversationID) continue;
        addMessage([info.message]);
    }
    updateUI(); // Custom refresh UI function
};

By following the above steps, you can render historical messages, real-time received messages, and local sent messages (including sending status) in the chat page.