Chat·续2
- Fetching Chat Messages
- Editing Chat Messages

Chat·续2

The event payload has the following fields:

action - One of add, edit, or delete.
message - The message that was added, edited, or deleted, of type Message.
messages - Deprecated. The same list as meeting.chat.messages.

To stop listening, pass the same handler to meeting.chat.off().

The meeting.chat object emits a chatUpdate event whenever a message is added, edited, or deleted.

import { useEffect } from "react";

function ChatListener({ meeting }) {
    useEffect(() => {
        const onChatUpdate = ({ action, message }) => {
            switch (action) {
                case "add":
                    console.log("New message", message);
                    break;
                case "edit":
                    console.log("Message edited", message);
                    break;
                case "delete":
                    console.log("Message deleted", message.id);
                    break;
            }
        };

meeting.chat.on("chatUpdate", onChatUpdate);
        return () => {
            meeting.chat.off("chatUpdate", onChatUpdate);
        };
    }, [meeting]);

return null;
}

The event payload has the following fields:

action - One of add, edit, or delete.
message - The message that was added, edited, or deleted, of type Message.
messages - Deprecated. The same list as meeting.chat.messages.

To be able to receive chat messages you need to implement a method onChatUpdates() method from callback RtkChatEventListener. You can subscribe to this events by calling meeting.addChatEventListener(rtkChatEventListener).

meeting.addChatEventListener(object : RtkChatEventListener {
  override fun onChatUpdates(messages: List<ChatMessage>) {
    // to load chat messages
  }

override fun onNewChatMessage(message: ChatMessage) {
    // when a new chat message is shared in the meeting
  }

override fun onMessageRateLimitReset() {
    // when the rate limit for sending messages of self is reset
  }
})

The onChatUpdates() method will be called whenever there is a change in the chat messages. The messages parameter is a list of ChatMessage objects that have been sent in the chat.

The onNewChatMessage() method will be called whenever a new chat message is shared in the meeting. The message parameter is a ChatMessage object that has been sent in the chat.

The onMessageRateLimitReset() method will be called when the rate limit for sending messages of self is reset and you can send messages again. The default rate limit is 180 messages within 60 seconds.

extension MainChatListener: RtkChatEventListener {
  func onChatUpdates(messages: [ChatMessage]) {
    // to load chat messages
  }

func onNewChatMessage(message: ChatMessage) {
    // when a new chat message is shared in the meeting
  }

func onMessageRateLimitReset() {
    // when the rate limit for sending messages of self is reset
  }
}

The onChatUpdates() method will be called whenever there is a change in the chat messages. The messages parameter is a list of ChatMessage objects that have been sent in the chat.

The onNewChatMessage() method will be called whenever a new chat message is shared in the meeting. The message parameter is a ChatMessage object that has been sent in the chat.

The meeting.chat object emits a chatUpdate event whenever a message is added, edited, or deleted.

meeting.chat.on("chatUpdate", ({ action, message }) => {
    switch (action) {
        case "add":
            console.log("New message", message);
            break;
        case "edit":
            console.log("Message edited", message);
            break;
        case "delete":
            console.log("Message deleted", message.id);
            break;
    }
});

The event payload has the following fields:

action - One of add, edit, or delete.
message - The message that was added, edited, or deleted, of type Message.
messages - Deprecated. The same list as meeting.chat.messages.

To stop listening, pass the same handler to meeting.chat.off().

Fetching Chat Messages

Use the fetch methods to load chat history page by page. All of them accept an options object with the following fields:

limit - Required. The maximum number of messages to return.
timestamp - The cursor, in milliseconds since the Unix epoch. Defaults to the current time.
direction - Whether to fetch messages sent before or after timestamp. Defaults to after.

Each method returns a promise that resolves to an array of Message objects.

Use the fetch methods to load chat history page by page. All of them accept an options object with the following fields:

limit - Required. The maximum number of messages to return.
timestamp - The cursor, in milliseconds since the Unix epoch. Defaults to the current time.
direction - Whether to fetch messages sent before or after timestamp. Defaults to after.

Each method returns a promise that resolves to an array of Message objects.

Use the fetch methods to load chat history page by page. All of them accept an options object with the following fields:

limit - Required. The maximum number of messages to return.
timestamp - The cursor, in milliseconds since the Unix epoch. Defaults to the current time.
direction - Whether to fetch messages sent before or after timestamp. Defaults to after.

Each method returns a promise that resolves to an array of Message objects.

Fetch Public Messages

Use meeting.chat.fetchPublicMessages() to fetch messages from the public chat. To load the most recent messages, fetch messages sent before the current time:

const messages = await meeting.chat.fetchPublicMessages({
    timestamp: Date.now(),
    limit: 25,
    direction: "before",
});

To load the next page of older messages, pass the timeMs of the oldest message you have as the new timestamp:

const oldestTimestamp = Math.min(...messages.map((m) => m.timeMs));

const olderMessages = await meeting.chat.fetchPublicMessages({
    timestamp: oldestTimestamp,
    limit: 25,
    direction: "before",
});

Use meeting.chat.fetchPublicMessages() to fetch messages from the public chat. To load the most recent messages, fetch messages sent before the current time:

const messages = await meeting.chat.fetchPublicMessages({
    timestamp: Date.now(),
    limit: 25,
    direction: "before",
});

To load the next page of older messages, pass the timeMs of the oldest message you have as the new timestamp:

const oldestTimestamp = Math.min(...messages.map((m) => m.timeMs));

const olderMessages = await meeting.chat.fetchPublicMessages({
    timestamp: oldestTimestamp,
    limit: 25,
    direction: "before",
});

Use meeting.chat.fetchPublicMessages() to fetch messages from the public chat. To load the most recent messages, fetch messages sent before the current time:

const messages = await meeting.chat.fetchPublicMessages({
    timestamp: Date.now(),
    limit: 25,
    direction: "before",
});

To load the next page of older messages, pass the timeMs of the oldest message you have as the new timestamp:

const oldestTimestamp = Math.min(...messages.map((m) => m.timeMs));

const olderMessages = await meeting.chat.fetchPublicMessages({
    timestamp: oldestTimestamp,
    limit: 25,
    direction: "before",
});

Fetch Private Messages

Use meeting.chat.fetchPrivateMessages() to fetch the private conversation between the local participant and another participant. In addition to the pagination options, pass the other participant's userId.

const participant = meeting.participants.joined
    .toArray()
    .find((p) => p.name === "Freddie");

const privateMessages = await meeting.chat.fetchPrivateMessages({
    userId: participant.userId,
    timestamp: Date.now(),
    limit: 25,
    direction: "before",
});

const participant = meeting.participants.joined
    .toArray()
    .find((p) => p.name === "Freddie");

const privateMessages = await meeting.chat.fetchPrivateMessages({
    userId: participant.userId,
    timestamp: Date.now(),
    limit: 25,
    direction: "before",
});

const participant = meeting.participants.joined
    .toArray()
    .find((p) => p.name === "Freddie");

const privateMessages = await meeting.chat.fetchPrivateMessages({
    userId: participant.userId,
    timestamp: Date.now(),
    limit: 25,
    direction: "before",
});

Fetch Pinned Messages

Use meeting.chat.fetchPinnedMessages() to fetch messages that have been pinned.

const pinnedMessages = await meeting.chat.fetchPinnedMessages({
    timestamp: Date.now(),
    limit: 25,
    direction: "before",
});

Use meeting.chat.fetchPinnedMessages() to fetch messages that have been pinned.

const pinnedMessages = await meeting.chat.fetchPinnedMessages({
    timestamp: Date.now(),
    limit: 25,
    direction: "before",
});

Use meeting.chat.fetchPinnedMessages() to fetch messages that have been pinned.

const pinnedMessages = await meeting.chat.fetchPinnedMessages({
    timestamp: Date.now(),
    limit: 25,
    direction: "before",
});

Editing Chat Messages

Edit a Text Message

There is a method in meeting.chat to edit a message of each type.

To edit a text message, use the meeting.chat.editTextMessage() method. This accepts a messageId (type string) and a message (type string).

const messageId = "...";
const newMessage = "Is this the real life?";

await meeting.chat.editTextMessage(messageId, newMessage);

When a message is edited, participants receive a chatUpdate event with action set to edit, and the message has isEdited: true.

There is a method in meeting.chat to edit a message of each type.

To edit a text message, use the meeting.chat.editTextMessage() method. This accepts a messageId (type string) and a message (type string).

const messageId = "...";
const newMessage = "Is this the real life?";

await meeting.chat.editTextMessage(messageId, newMessage);

When a message is edited, participants receive a chatUpdate event with action set to edit, and the message has isEdited: true.

There is a method in meeting.chat to edit a message of each type.

To edit a text message, use the meeting.chat.editTextMessage() method. This accepts a messageId (type string) and a message (type string).

const messageId = "...";
const newMessage = "Is this the real life?";

await meeting.chat.editTextMessage(messageId, newMessage);

When a message is edited, participants receive a chatUpdate event with action set to edit, and the message has isEdited: true.

Edit an Image

You can edit an image with the help of meeting.chat.editImageMessage(). This accepts a messageId of type string and an image of type File. Supported image formats are PNG, JPEG, and GIF.

<label for="img">Edit image:</label>
<input
    type="file"
    id="img"
    name="img"
    accept="image/png, image/jpeg, image/gif"
/>
<button onclick="onEditImage()">Edit Image</button>

async function onEditImage() {
    const messageId = "...";
    const image = document.getElementById("img");
    await meeting.chat.editImageMessage(messageId, image.files[0]);
}

You can edit an image with the help of meeting.chat.editImageMessage(). This accepts a messageId of type string and an image of type File. Supported image formats are PNG, JPEG, and GIF.

import { useRef } from "react";

function ChatComponent() {
    const imageInputRef = useRef(null);

const onEditImage = async () => {
        const messageId = "...";
        const image = imageInputRef.current;
        if (image && image.files[0]) {
            await meeting.chat.editImageMessage(messageId, image.files[0]);
        }
    };

return (
        <>
            <label htmlFor="img">Edit image:</label>
            <input
                type="file"
                id="img"
                name="img"
                accept="image/png, image/jpeg, image/gif"
                ref={imageInputRef}
            />
            <button onClick={onEditImage}>Edit Image</button>
        </>
    );
}

You can edit an image with the help of meeting.chat.editImageMessage(). This accepts a messageId of type string and an image object with uri, name, size, and type fields. Supported image formats are PNG, JPEG, and GIF.

import DocumentPicker from "@react-native-documents/picker";

async function onEditImage() {
    const messageId = "...";
    // Get the image uri and create an object with the following fields
    const res = await DocumentPicker.pickSingle({
        type: [DocumentPicker.types.images],
    });
    const image = {
        uri: res.uri,
        name: res.name,
        size: res.size,
        type: res.type,
    };
    await meeting.chat.editImageMessage(messageId, image);
}

Edit a File

Editing a file is similar to editing an image. To edit a file, use meeting.chat.editFileMessage().