Chat

Last updated Oct 19, 2026 This guide explains how to send and receive chat messages in a meeting using Cloudflare RealtimeKit.

WebMobile

ReactWeb ComponentsAngular

Introduction

There are four types of messages that can be sent in chat:

  • Text messages
  • Images
  • Files
  • Custom messages, which can combine text, HTML, files, images, and videos in a single message

The meeting chat object is stored in meeting.chat, which has methods for sending, receiving, and fetching messages.

console.log("Chat object:", meeting.chat);

To load chat history, use the paginated fetch methods. To react to new, edited, and deleted messages in real time, listen for the chatUpdate event.

Deprecated

meeting.chat.messages is deprecated. It only contains the most recent 1,000 messages sent before you joined, plus any messages received after joining. Use meeting.chat.fetchPublicMessages(), meeting.chat.fetchPrivateMessages(), and meeting.chat.fetchPinnedMessages() instead.

There are four types of messages that can be sent in chat:

  • Text messages
  • Images
  • Files
  • Custom messages, which can combine text, HTML, files, images, and videos in a single message

The meeting chat object is stored in meeting.chat, which has methods for sending, receiving, and fetching messages.

meeting.chat;

To load chat history, use the paginated fetch methods. To react to new, edited, and deleted messages in real time, listen for the chatUpdate event.

Deprecated

meeting.chat.messages is deprecated. It only contains the most recent 1,000 messages sent before you joined, plus any messages received after joining. Use meeting.chat.fetchPublicMessages(), meeting.chat.fetchPrivateMessages(), and meeting.chat.fetchPinnedMessages() instead.

There are three types of messages that can be sent in chat:

  • Text messages
  • Images
  • Files

The meeting chat object is stored in meeting.chat, which has methods for sending and receiving messages.

meeting.chat

The meeting.chat.messages array contains all the messages that have been sent in the chat. This is an array of objects, where each object is of type com.cloudflare.realtimekit.chat.ChatMessage.

meeting.chat.messages

There are three types of messages that can be sent in chat:

  • Text messages
  • Images
  • Files

The meeting chat object is stored in meeting.chat, which has methods for sending and receiving messages.

meeting.chat

The meeting.chat.messages array contains all the messages that have been sent in the chat. This is an array of objects, where each object is of type RealtimeKit.ChatMessage.

meeting.chat.messages

There are four types of messages that can be sent in chat:

  • Text messages
  • Images
  • Files
  • Custom messages, which can combine text, HTML, files, images, and videos in a single message

The meeting chat object is stored in meeting.chat, which has methods for sending, receiving, and fetching messages.

meeting.chat;

To load chat history, use the paginated fetch methods. To react to new, edited, and deleted messages in real time, listen for the chatUpdate event.

Deprecated

meeting.chat.messages is deprecated. It only contains the most recent 1,000 messages sent before you joined, plus any messages received after joining. Use meeting.chat.fetchPublicMessages(), meeting.chat.fetchPrivateMessages(), and meeting.chat.fetchPinnedMessages() instead.

Message Type

The Message type is defined as follows:

interface BaseMessage<T extends MessageType> {
    type: T;
    userId: string;
    displayName: string;
    time: Date;
    timeMs?: number;
    id: string;
    isEdited?: boolean;
    read?: boolean;
    pluginId?: string;
    pinned?: boolean;
    targetUserIds?: string[];
}

interface TextMessage extends BaseMessage<MessageType.text> {
    message: string;
}

interface ImageMessage extends BaseMessage<MessageType.image> {
    link: string;
}

interface FileMessage extends BaseMessage<MessageType.file> {
    name: string;
    size: number;
    link: string;
}

interface MediaItem {
    link: string;
    type?: string;
    name?: string;
    size?: number;
}

interface CustomMessage extends BaseMessage<MessageType.custom> {
    message?: string;
    html?: string;
    files?: MediaItem[];
    images?: MediaItem[];
    videos?: MediaItem[];
}

type Message = TextMessage | ImageMessage | FileMessage | CustomMessage;

timeMs is the time the message was sent, in milliseconds since the Unix epoch. Use it as the cursor when paginating through messages. targetUserIds is set on private messages and contains the user IDs of the participants in the conversation.

The Message type is defined as follows:

interface BaseMessage<T extends MessageType> {
    type: T;
    userId: string;
    displayName: string;
    time: Date;
    timeMs?: number;
    id: string;
    isEdited?: boolean;
    read?: boolean;
    pluginId?: string;
    pinned?: boolean;
    targetUserIds?: string[];
}

interface TextMessage extends BaseMessage<MessageType.text> {
    message: string;
}

interface ImageMessage extends BaseMessage<MessageType.image> {
    link: string;
}

interface FileMessage extends BaseMessage<MessageType.file> {
    name: string;
    size: number;
    link: string;
}

interface MediaItem {
    link: string;
    type?: string;
    name?: string;
    size?: number;
}

interface CustomMessage extends BaseMessage<MessageType.custom> {
    message?: string;
    html?: string;
    files?: MediaItem[];
    images?: MediaItem[];
    videos?: MediaItem[];
}

type Message = TextMessage | ImageMessage | FileMessage | CustomMessage;

timeMs is the time the message was sent, in milliseconds since the Unix epoch. Use it as the cursor when paginating through messages. targetUserIds is set on private messages and contains the user IDs of the participants in the conversation.

The ChatMessage class is defined as follows:

enum class ChatMessageType {
  TEXT,
  IMAGE,
  FILE
}

open class ChatMessage(
  val userId: String,
  val displayName: String,
  val read: Boolean,
  val pluginId: String?,
  val type: ChatMessageType,
  val time: String,
  val createdAtMillis: Long,
  val targetUserIds: List<String>?,
)

class TextMessage(val message: String): ChatMessage(...)

class ImageMessage(val link: String): ChatMessage(...)

class FileMessage(
  val name: String,
  val link: String,
  val size: Long,
): ChatMessage(...)

The ChatMessage class is defined as follows:

public enum ChatMessageType {
    case text
    case image
    case file
}

open class ChatMessage {
    public let userId: String
    public let displayName: String
    public let read: Bool
    public let pluginId: String?
    public let type: ChatMessageType
    public let time: String
    public let createdAtMillis: Int64
    public let targetUserIds: [String]?
}

public final class TextMessage: ChatMessage {
    public let message: String
}

public final class ImageMessage: ChatMessage {
    public let link: String
}

public final class FileMessage: ChatMessage {
    public let name: String
    public let link: String
    public let size: Int64
}

The Message type is defined as follows:

interface BaseMessage<T extends MessageType> {
    type: T;
    userId: string;
    displayName: string;
    time: Date;
    timeMs?: number;
    id: string;
    isEdited?: boolean;
    read?: boolean;
    pluginId?: string;
    pinned?: boolean;
    targetUserIds?: string[];
}

interface TextMessage extends BaseMessage<MessageType.text> {
    message: string;
}

interface ImageMessage extends BaseMessage<MessageType.image> {
    link: string;
}

interface FileMessage extends BaseMessage<MessageType.file> {
    name: string;
    size: number;
    link: string;
}

interface MediaItem {
    link: string;
    type?: string;
    name?: string;
    size?: number;
}

interface CustomMessage extends BaseMessage<MessageType.custom> {
    message?: string;
    html?: string;
    files?: MediaItem[];
    images?: MediaItem[];
    videos?: MediaItem[];
}

type Message = TextMessage | ImageMessage | FileMessage | CustomMessage;

timeMs is the time the message was sent, in milliseconds since the Unix epoch. Use it as the cursor when paginating through messages. targetUserIds is set on private messages and contains the user IDs of the participants in the conversation.

Sending a Chat Message

Send a Text Message

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

To send a text message, use the meeting.chat.sendTextMessage() method. This accepts a string message and sends it to the room.

const message = "Is this the real life?";
await meeting.chat.sendTextMessage(message);

The method throws an error if the message is empty, exceeds the maximum text length, or if the local participant does not have permission to send text messages.

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

To send a text message, use the meeting.chat.sendTextMessage() method. This accepts a string message and sends it to the room.

const message = "Is this the real life?";
await meeting.chat.sendTextMessage(message);

The method throws an error if the message is empty, exceeds the maximum text length, or if the local participant does not have permission to send text messages.

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

To send a text message, use the meeting.chat.sendTextMessage() method. This accepts a string message and sends it to the room.

val message = "Is this the real life?"
meeting.chat.sendTextMessage(message)

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

To send a text message, use the meeting.chat.sendTextMessage() method. This accepts a string message and sends it to the room.

var message = "Is this the real life?"
meeting.chat.sendTextMessage(message)

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

To send a text message, use the meeting.chat.sendTextMessage() method. This accepts a string message and sends it to the room.

const message = "Is this the real life?";
await meeting.chat.sendTextMessage(message);

The method throws an error if the message is empty, exceeds the maximum text length, or if the local participant does not have permission to send text messages.

Send an Image

You can send an image with the help of meeting.chat.sendImageMessage(). This accepts an image of type File, and sends it to the participants in the meeting. Supported image formats are PNG, JPEG, and GIF.

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

async function onSendImage() {
    const image = document.getElementById("img");
    await meeting.chat.sendImageMessage(image.files[0]);
}

You can send an image with the help of meeting.chat.sendImageMessage(). This accepts an image of type File, and sends it to the participants in the meeting. Supported image formats are PNG, JPEG, and GIF.

import { useRef } from "react";

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

const onSendImage = async () => {
        const image = imageInputRef.current;
        if (image && image.files[0]) {
            await meeting.chat.sendImageMessage(image.files[0]);
        }
    };

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

You can send an image with the help of meeting.chat.sendImageMessage() and sends it to the participants in the meeting.

meeting.chat.sendImageMessage(imageUri) { err ->
  // Handle error if any
}

You can send an image with the help of meeting.chat.sendImageMessage() and sends it to the participants in the meeting.

meeting.chat.sendImageMessage(imageURL: url) { err in
  // Handle error if any
}

You can send an image with the help of meeting.chat.sendImageMessage(). This accepts an image object with uri, name, size, and type fields, and sends it to the participants in the meeting. Supported image formats are PNG, JPEG, and GIF.

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

async function onSendImage() {
    // 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.sendImageMessage(image);
}

Send a File

Sending a file is similar to sending an image. The only difference is that when you send an image, a preview will be shown in the meeting chat, which is not the case for sending files. That being said, an image can be sent as a file too using meeting.chat.sendFileMessage().

<label for="file">Select file:</label>
<input type="file" id="file" name="file" />
<button onclick="onSendFile()">Send File</button>

async function onSendFile() {
    const file = document.getElementById("file");
    await meeting.chat.sendFileMessage(file.files[0]);
}