このガイドでは、Cloudflare RealtimeKit を使ってミーティングでチャットメッセージを送受信する方法を説明します。
チャットで送信できるメッセージの種類は次の 3 つです。
- テキストメッセージ
- 画像
- ファイル
ミーティングのチャットオブジェクトは meeting.chat に格納されており、送受信用のメソッドがあります。
console.log("Chat object:", meeting.chat);meeting.chat.messages 配列には、チャットで送信されたすべてのメッセージが含まれます。各要素は Message 型のオブジェクトです。
console.log("All chat messages:", meeting.chat.messages);チャットで送信できるメッセージの種類は次の 3 つです。
- テキストメッセージ
- 画像
- ファイル
ミーティングのチャットオブジェクトは meeting.chat に格納されており、送受信用のメソッドがあります。
meeting.chat;meeting.chat.messages 配列には、チャットで送信されたすべてのメッセージが含まれます。各要素は Message 型のオブジェクトです。
meeting.chat.messages;チャットで送信できるメッセージの種類は次の 3 つです。
- テキストメッセージ
- 画像
- ファイル
ミーティングのチャットオブジェクトは meeting.chat に格納されており、送受信用のメソッドがあります。
meeting.chatmeeting.chat.messages 配列には、チャットで送信されたすべてのメッセージが含まれます。各要素は com.cloudflare.realtimekit.chat.ChatMessage 型のオブジェクトです。
meeting.chat.messagesチャットで送信できるメッセージの種類は次の 3 つです。
- テキストメッセージ
- 画像
- ファイル
ミーティングのチャットオブジェクトは meeting.chat に格納されており、送受信用のメソッドがあります。
meeting.chatmeeting.chat.messages 配列には、チャットで送信されたすべてのメッセージが含まれます。各要素は RealtimeKit.ChatMessage 型のオブジェクトです。
meeting.chat.messagesチャットで送信できるメッセージの種類は次の 3 つです。
- テキストメッセージ
- 画像
- ファイル
ミーティングのチャットオブジェクトは meeting.chat に格納されており、送受信用のメソッドがあります。
meeting.chat;meeting.chat.messages 配列には、チャットで送信されたすべてのメッセージが含まれます。各要素は Message 型のオブジェクトです。
meeting.chat.messages;Message 型は次のように定義されています。
interface BaseMessage<T extends MessageType> {
type: T;
userId: string;
displayName: string;
time: Date;
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;
}
type Message = TextMessage | ImageMessage | FileMessage;Message 型は次のように定義されています。
interface BaseMessage<T extends MessageType> {
type: T;
userId: string;
displayName: string;
time: Date;
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;
}
type Message = TextMessage | ImageMessage | FileMessage;ChatMessage クラスは次のように定義されています。
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(...)ChatMessage クラスは次のように定義されています。
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
}Message 型は次のように定義されています。
interface BaseMessage<T extends MessageType> {
type: T;
userId: string;
displayName: string;
time: Date;
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;
}
type Message = TextMessage | ImageMessage | FileMessage;meeting.chat には、各種類のメッセージを送信するメソッドがあります。
テキストメッセージを送るには、meeting.chat.sendTextMessage() メソッドを使います。文字列のメッセージを受け取り、ルームへ送信します。
const message = "Is this the real life?";
await meeting.chat.sendTextMessage(message);meeting.chat には、各種類のメッセージを送信するメソッドがあります。
テキストメッセージを送るには、meeting.chat.sendTextMessage() メソッドを使います。文字列のメッセージを受け取り、ルームへ送信します。
const message = "Is this the real life?";
await meeting.chat.sendTextMessage(message);meeting.chat には、各種類のメッセージを送信するメソッドがあります。
テキストメッセージを送るには、meeting.chat.sendTextMessage() メソッドを使います。文字列のメッセージを受け取り、ルームへ送信します。
val message = "Is this the real life?"
meeting.chat.sendTextMessage(message)meeting.chat には、各種類のメッセージを送信するメソッドがあります。
テキストメッセージを送るには、meeting.chat.sendTextMessage() メソッドを使います。文字列のメッセージを受け取り、ルームへ送信します。
var message = "Is this the real life?"
meeting.chat.sendTextMessage(message)meeting.chat には、各種類のメッセージを送信するメソッドがあります。
テキストメッセージを送るには、meeting.chat.sendTextMessage() メソッドを使います。文字列のメッセージを受け取り、ルームへ送信します。
const message = "Is this the real life?";
await meeting.chat.sendTextMessage(message);meeting.chat.sendImageMessage() で画像を送信できます。File 型の画像を受け取り、ミーティングの参加者へ送ります。
<label for="img">Select image:</label>
<input type="file" id="img" name="img" accept="image/*" />
<button onclick="onSendImage()">Send Image</button>async function onSendImage() {
const image = document.getElementById("img");
await meeting.chat.sendImageMessage(image.files[0]);
}meeting.chat.sendImageMessage() で画像を送信できます。File 型の画像を受け取り、ミーティングの参加者へ送ります。
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/*"
ref={imageInputRef}
/>
<button onClick={onSendImage}>Send Image</button>
</>
);
}meeting.chat.sendImageMessage() で画像を送信し、ミーティングの参加者へ送ります。
meeting.chat.sendImageMessage(imageUri) { err ->
// Handle error if any
}meeting.chat.sendImageMessage() で画像を送信し、ミーティングの参加者へ送ります。
meeting.chat.sendImageMessage(imageURL: url) { err in
// Handle error if any
}meeting.chat.sendImageMessage() で画像を送信できます。File 型の画像を受け取り、ミーティングの参加者へ送ります。
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);
}ファイルの送信は、画像の送信と似ています。違いは、画像を送るとミーティングチャットにプレビューが表示される点です。ファイル送信ではプレビューは出ません。画像をファイルとして送ることもでき、その場合は 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]);
}ファイルの送信は、画像の送信と似ています。違いは、画像を送るとミーティングチャットにプレビューが表示される点です。ファイル送信ではプレビューは出ません。画像をファイルとして送ることもでき、その場合は meeting.chat.sendFileMessage() を使います。
import { useRef } from "react";
function ChatComponent() {
const fileInputRef = useRef(null);
const onSendFile = async () => {
const file = fileInputRef.current;
if (file && file.files[0]) {
await meeting.chat.sendFileMessage(file.files[0]);
}
};
return (
<>
<label htmlFor="file">Select file:</label>
<input type="file" id="file" name="file" ref={fileInputRef} />
<button onClick={onSendFile}>Send File</button>
</>
);
}ファイルの送信は、画像の送信と似ています。違いは、画像を送るとミーティングチャットにプレビューが表示される点です。ファイル送信ではプレビューは出ません。画像をファイルとして送ることもでき、その場合は meeting.chat.sendFileMessage() を使います。
meeting.chat.sendFileMessage(fileUri) { err ->
// Handle error if any
}ファイルの送信は、画像の送信と似ています。違いは、画像を送るとミーティングチャットにプレビューが表示される点です。ファイル送信ではプレビューは出ません。画像をファイルとして送ることもでき、その場合は meeting.chat.sendFileMessage() を使います。
meeting.chat.sendFileMessage(fileURL: url) { err in
// Handle error if any
}ファイルの送信は、画像の送信と似ています。違いは、画像を送るとミーティングチャットにプレビューが表示される点です。ファイル送信ではプレビューは出ません。画像をファイルとして送ることもでき、その場合は meeting.chat.sendFileMessage() を使います。
import DocumentPicker from "@react-native-documents/picker";
async function onSendFile() {
// Get the file uri and create an object with the following fields
const res = await DocumentPicker.pickSingle({
type: [DocumentPicker.types.allFiles],
});
const file = {
uri: res.uri,
name: res.name,
size: res.size,
type: res.type,
};
await meeting.chat.sendFileMessage(file);
}上記の 3 種類のメッセージを送る共通メソッドとして、meeting.chat.sendMessage() もあります。渡したペイロードの種類に応じて、上のいずれかのメソッドを呼び出します。sendMessage() メソッドは、次の型の message パラメーターを受け取ります。
async function sendMessage(
message:
| { type: "text"; message: string }
| { type: "image"; image: File }
| { type: "file"; file: File },
) {
// ...
}テキストメッセージを送るときの sendMessage() の使い方は次のとおりです。
const message = "Is this just fantasy?";
await meeting.chat.sendMessage({ type: "text", message });上記の 3 種類のメッセージを送る共通メソッドとして、meeting.chat.sendMessage() もあります。渡したペイロードの種類に応じて、上のいずれかのメソッドを呼び出します。sendMessage() メソッドは、次の型の message パラメーターを受け取ります。
async function sendMessage(
message:
| { type: "text"; message: string }
| { type: "image"; image: File }
| { type: "file"; file: File },
) {
// ...
}テキストメッセージを送るときの sendMessage() の使い方は次のとおりです。
const message = "Is this just fantasy?";
await meeting.chat.sendMessage({ type: "text", message });上記の 3 種類のメッセージを送る共通メソッドとして、meeting.chat.sendMessage() もあります。渡したペイロードの種類に応じて、上のいずれかのメソッドを呼び出します。sendMessage() メソッドは、次の型の message パラメーターを受け取ります。
async function sendMessage(
message:
| { type: "text"; message: string }
| { type: "image"; image: File }
| { type: "file"; file: File },
) {
// ...
}テキストメッセージを送るときの sendMessage() の使い方は次のとおりです。
const message = "Is this just fantasy?";
await meeting.chat.sendMessage({ type: "text", message });新しいチャットメッセージを受信すると、meeting.chat オブジェクトがイベントを発行します。chatUpdate イベントを購読すると、新しいチャットメッセージの受信時にログを出せます。
meeting.chat.on("chatUpdate", ({ message, messages }) => {
console.log(`Received message ${message}`);
console.log(`All messages in chat: ${messages.join(", ")}`);
});ここで message は、はじめに定義した Message 型です。messages はミーティング内のすべてのチャットメッセージの一覧で、meeting.chat.messages と同じです。
チャットメッセージを受信すると、meeting.chat.messages リストも更新されます。
console.log(JSON.stringify(meeting.chat.messages));
meeting.chat.on("chatUpdate", () => {
console.log(JSON.stringify(meeting.chat.messages));
});新しいチャットメッセージを受信すると、meeting.chat オブジェクトがイベントを発行します。chatUpdate イベントを購読すると、新しいチャットメッセージの受信時にログを出せます。
import { useRealtimeKitSelector } from "@cloudflare/realtimekit-react";
// useRealtimeKitSelector hooks only works when `RealtimeKitProvider` is used.
const messages = useRealtimeKitSelector((m) => m.chat.messages);別の方法:
meeting.chat.on("chatUpdate", ({ message, messages }) => {
console.log(`Received message ${message}`);
console.log(`All messages in chat: ${messages.join(", ")}`);
});ここで message は、はじめに定義した Message 型です。messages はミーティング内のすべてのチャットメッセージの一覧で、meeting.chat.messages と同じです。
チャットメッセージを受信すると、meeting.chat.messages リストも更新されます。
console.log(JSON.stringify(meeting.chat.messages));
meeting.chat.on("chatUpdate", () => {
console.log(JSON.stringify(meeting.chat.messages));
});チャットメッセージを受信するには、コールバック RtkChatEventListener の onChatUpdates() メソッドを実装します。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
}
})チャットメッセージに変更があると、onChatUpdates() メソッドが呼ばれます。messages パラメーターは、チャットで送信された ChatMessage オブジェクトのリストです。
ミーティングで新しいチャットメッセージが共有されると、onNewChatMessage() メソッドが呼ばれます。message パラメーターは、送信された ChatMessage オブジェクトです。
自分のメッセージ送信レート制限がリセットされ、再び送信できるようになると、onMessageRateLimitReset() メソッドが呼ばれます。デフォルトのレート制限は、60 秒以内に 180 件です。
チャットメッセージを受信するには、コールバック RtkChatEventListener の onChatUpdates() メソッドを実装します。meeting.addChatEventListener(rtkChatEventListener) を呼び出して、このイベントを購読します。
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
}
}チャットメッセージに変更があると、onChatUpdates() メソッドが呼ばれます。messages パラメーターは、チャットで送信された ChatMessage オブジェクトのリストです。
ミーティングで新しいチャットメッセージが共有されると、onNewChatMessage() メソッドが呼ばれます。message パラメーターは、送信された ChatMessage オブジェクトです。
自分のメッセージ送信レート制限がリセットされ、再び送信できるようになると、onMessageRateLimitReset() メソッドが呼ばれます。デフォルトのレート制限は、60 秒以内に 180 件です。
新しいチャットメッセージを受信すると、meeting.chat オブジェクトがイベントを発行します。chatUpdate イベントを購読すると、新しいチャットメッセージの受信時にログを出せます。
meeting.chat.on("chatUpdate", ({ message, messages }) => {
console.log(`Received message ${message}`);
console.log(`All messages in chat: ${messages.join(", ")}`);
});ここで message は、はじめに定義した Message 型です。messages はミーティング内のすべてのチャットメッセージの一覧で、meeting.chat.messages と同じです。
チャットメッセージを受信すると、meeting.chat.messages リストも更新されます。
console.log(JSON.stringify(meeting.chat.messages));
meeting.chat.on("chatUpdate", () => {
console.log(JSON.stringify(meeting.chat.messages));
});meeting.chat には、各種類のメッセージを編集するメソッドがあります。
テキストメッセージを編集するには、meeting.chat.editTextMessage() メソッドを使います。messageId（型は string）と message（型は string）を受け取ります。
const message = meeting.chat.messages[0];
const messageId = message?.id;
const newMessage = "Is this the real life?";
await meeting.chat.editTextMessage(messageId, newMessage);meeting.chat には、各種類のメッセージを編集するメソッドがあります。
テキストメッセージを編集するには、meeting.chat.editTextMessage() メソッドを使います。messageId（型は string）と message（型は string）を受け取ります。
const message = meeting.chat.messages[0];
const messageId = message?.id;
const newMessage = "Is this the real life?";
await meeting.chat.editTextMessage(messageId, newMessage);meeting.chat には、各種類のメッセージを編集するメソッドがあります。
テキストメッセージを編集するには、meeting.chat.editTextMessage() メソッドを使います。messageId（型は string）と message（型は string）を受け取ります。
const message = meeting.chat.messages[0];
const messageId = message?.id;
const newMessage = "Is this the real life?";
await meeting.chat.editTextMessage(messageId, newMessage);meeting.chat.editImageMessage() で画像を編集できます。string 型の messageId と File 型の画像を受け取ります。
<label for="img">Edit image:</label>
<input type="file" id="img" name="img" accept="image/*" />
<button onclick="onEditImage()">Edit Image</button>async function onEditImage() {
const messageId = "...";
const image = document.getElementById("img");
await meeting.chat.editImageMessage(messageId, image.files[0]);
}meeting.chat.editImageMessage() で画像を編集できます。string 型の messageId と File 型の画像を受け取ります。
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/*"
ref={imageInputRef}
/>
<button onClick={onEditImage}>Edit Image</button>
</>
);
}meeting.chat.editImageMessage() で画像を編集できます。string 型の messageId と File 型の画像を受け取ります。
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);
}ファイルの編集は、画像の編集と似ています。ファイルを編集するには、meeting.chat.editFileMessage() を使います。
<label for="file">Edit file:</label>
<input type="file" id="file" name="file" />
<button onclick="onEditFile()">Edit File</button>async function onEditFile() {
const messageId = "...";
const file = document.getElementById("file");
await meeting.chat.editFileMessage(messageId, file.files[0]);
}ファイルの編集は、画像の編集と似ています。ファイルを編集するには、meeting.chat.editFileMessage() を使います。
import { useRef } from "react";
function ChatComponent() {
const fileInputRef = useRef(null);
const onEditFile = async () => {
const messageId = "...";
const file = fileInputRef.current;
if (file && file.files[0]) {
await meeting.chat.editFileMessage(messageId, file.files[0]);
}
};
return (
<>
<label htmlFor="file">Edit file:</label>
<input type="file" id="file" name="file" ref={fileInputRef} />
<button onClick={onEditFile}>Edit File</button>
</>
);
}ファイルの編集は、画像の編集と似ています。ファイルを編集するには、meeting.chat.editFileMessage() を使います。
import DocumentPicker from "@react-native-documents/picker";
async function onEditFile() {
const messageId = "...";
// Get the file uri and create an object with the following fields
const res = await DocumentPicker.pickSingle({
type: [DocumentPicker.types.allFiles],
});
const file = {
uri: res.uri,
name: res.name,
size: res.size,
type: res.type,
};
await meeting.chat.editFileMessage(messageId, file);
}上記の 3 種類のメッセージを編集する共通メソッドとして、meeting.chat.editMessage() もあります。渡したペイロードの種類に応じて、上のいずれかのメソッドを呼び出します。editMessage() メソッドは、次の型の messageId と message パラメーターを受け取ります。
async function editMessage(
messageId: string,
message:
| { type: "text"; message: string }
| { type: "image"; image: File }
| { type: "file"; file: File },
) {
// ...
}テキストメッセージを編集するときの editMessage() の使い方は次のとおりです。
const messageId = "...";
const message = "Is this just fantasy?";
await meeting.chat.editMessage(messageId, { type: "text", message });上記の 3 種類のメッセージを編集する共通メソッドとして、meeting.chat.editMessage() もあります。渡したペイロードの種類に応じて、上のいずれかのメソッドを呼び出します。editMessage() メソッドは、次の型の messageId と message パラメーターを受け取ります。
async function editMessage(
messageId: string,
message:
| { type: "text"; message: string }
| { type: "image"; image: File }
| { type: "file"; file: File },
) {
// ...
}テキストメッセージを編集するときの editMessage() の使い方は次のとおりです。
const messageId = "...";
const message = "Is this just fantasy?";
await meeting.chat.editMessage(messageId, { type: "text", message });上記の 3 種類のメッセージを編集する共通メソッドとして、meeting.chat.editMessage() もあります。渡したペイロードの種類に応じて、上のいずれかのメソッドを呼び出します。editMessage() メソッドは、次の型の messageId と message パラメーターを受け取ります。
async function editMessage(
messageId: string,
message:
| { type: "text"; message: string }
| { type: "image"; image: File }
| { type: "file"; file: File },
) {
// ...
}テキストメッセージを編集するときの editMessage() の使い方は次のとおりです。
const messageId = "...";
const message = "Is this just fantasy?";
await meeting.chat.editMessage(messageId, { type: "text", message });meeting.chat オブジェクトには、チャット操作を便利にするメソッドもあります。
特定のユーザーのメッセージを取得するには、そのユーザーの ID を meeting.chat.getMessagesByUser() メソッドに渡します。
// Find the userId of the user with name "Freddie".
const { userId } = meeting.participants.joined
.toArray()
.find((p) => p.name === "Freddie");
const messages = meeting.chat.getMessagesByUser(userId);meeting.chat オブジェクトには、チャット操作を便利にするメソッドもあります。
特定のユーザーのメッセージを取得するには、そのユーザーの ID を meeting.chat.getMessagesByUser() メソッドに渡します。
// Find the userId of the user with name "Freddie".
const { userId } = meeting.participants.joined
.toArray()
.find((p) => p.name === "Freddie");
const messages = meeting.chat.getMessagesByUser(userId);meeting.chat オブジェクトには、チャット操作を便利にするメソッドもあります。
特定のユーザーのメッセージを取得するには、そのユーザーの ID を meeting.chat.getMessagesByUser() メソッドに渡します。
// Find the userId of the user with name "Freddie".
const { userId } = meeting.participants.joined
.toArray()
.find((p) => p.name === "Freddie");
const messages = meeting.chat.getMessagesByUser(userId);特定の種類のメッセージは、meeting.chat.getMessagesByType() メソッドでも取得できます。たとえば、チャット内のすべての画像メッセージは次のスニペットで取得できます。
const imageMessages = meeting.chat.getMessagesByType("image");特定の種類のメッセージは、meeting.chat.getMessagesByType() メソッドでも取得できます。たとえば、チャット内のすべての画像メッセージは次のスニペットで取得できます。
const imageMessages = meeting.chat.getMessagesByType("image");特定の種類のメッセージは、meeting.chat.getMessagesByType() メソッドでも取得できます。たとえば、チャット内のすべての画像メッセージは次のスニペットで取得できます。
const imageMessages = meeting.chat.getMessagesByType("image");チャットには複数のメッセージをピン留めできます。ピン留めすると、メッセージオブジェクトに pinned: true 属性が付き、これでピン留め済みかどうかを判別できます。
メッセージをピン留めするには、次のようにします。
// Pin the first message in the chat (could be text, image, or file).
const { id } = meeting.chat.messages[0];
await meeting.chat.pin(id);ピン留めしたメッセージは meeting.chat.pinned に追加されます。
const { id } = meeting.chat.messages[0];
await meeting.chat.pin(id);
console.log(meeting.chat.pinned);
console.log(meeting.chat.pinned.length > 0); // Should be trueピン留めを解除するには、meeting.chat.unpin() メソッドを使います。
// Unpin the first pinned message.
const { id } = meeting.chat.pinned[0];
await meeting.chat.unpin(id);メッセージがピン留めされたとき、または解除されたときは、イベントで受け取れます。
meeting.chat.on("pinMessage", ({ message }) => {
console.log("A message was pinned", JSON.stringify(message));
});
meeting.chat.on("unpinMessage", ({ message }) => {
console.log("A message was unpinned", JSON.stringify(message));
});チャットには複数のメッセージをピン留めできます。ピン留めすると、メッセージオブジェクトに pinned: true 属性が付き、これでピン留め済みかどうかを判別できます。
メッセージをピン留めするには、次のようにします。
// Pin the first message in the chat (could be text, image, or file).
const { id } = meeting.chat.messages[0];
await meeting.chat.pin(id);ピン留めしたメッセージは meeting.chat.pinned に追加されます。
const { id } = meeting.chat.messages[0];
await meeting.chat.pin(id);
console.log(meeting.chat.pinned);
console.log(meeting.chat.pinned.length > 0); // Should be trueピン留めを解除するには、meeting.chat.unpin() メソッドを使います。
// Unpin the first pinned message.
const { id } = meeting.chat.pinned[0];
await meeting.chat.unpin(id);メッセージがピン留めされたとき、または解除されたときは、イベントで受け取れます。
meeting.chat.on("pinMessage", ({ message }) => {
console.log("A message was pinned", JSON.stringify(message));
});
meeting.chat.on("unpinMessage", ({ message }) => {
console.log("A message was unpinned", JSON.stringify(message));
});チャットには複数のメッセージをピン留めできます。ピン留めすると、メッセージオブジェクトに pinned: true 属性が付き、これでピン留め済みかどうかを判別できます。
メッセージをピン留めするには、次のようにします。
// Pin the first message in the chat (could be text, image, or file).
const { id } = meeting.chat.messages[0];
await meeting.chat.pin(id);ピン留めしたメッセージは meeting.chat.pinned に追加されます。
const { id } = meeting.chat.messages[0];
await meeting.chat.pin(id);
console.log(meeting.chat.pinned);
console.log(meeting.chat.pinned.length > 0); // Should be trueピン留めを解除するには、meeting.chat.unpin() メソッドを使います。
// Unpin the first pinned message.
const { id } = meeting.chat.pinned[0];
await meeting.chat.unpin(id);メッセージがピン留めされたとき、または解除されたときは、イベントで受け取れます。
meeting.chat.on("pinMessage", ({ message }) => {
console.log("A message was pinned", JSON.stringify(message));
});
meeting.chat.on("unpinMessage", ({ message }) => {
console.log("A message was unpinned", JSON.stringify(message));
});meeting.chat 名前空間には deleteMessage() メソッドがあります。string 型の messageId パラメーターを取ります。
const messageId = "...";
await meeting.chat.deleteMessage(messageId);meeting.chat 名前空間には deleteMessage() メソッドがあります。string 型の messageId パラメーターを取ります。
const messageId = "...";
await meeting.chat.deleteMessage(messageId);meeting.chat 名前空間には deleteMessage() メソッドがあります。string 型の messageId パラメーターを取ります。
const messageId = "...";
await meeting.chat.deleteMessage(messageId);RealtimeKit セッションのすべてのチャットメッセージは、次の方法でプログラムから取得できます。
- Chat Replay API を使う
meeting.chatSyncedイベントの webhook を設定する
チャットのダウンロード URL を取得するには、Chat Replay API エンドポイント に HTTP GET リクエストを送ります。API は次を返します。
{
"success": true,
"data": {
"chat_download_url": "string",
"chat_download_url_expiry": "string"
}
}chat_download_url- セッションのチャットダンプ全体を、AWS S3 から CSV 形式でダウンロードできる URL ですchat_download_url_expiry-chat_download_urlの有効期限タイムスタンプです。URL が期限切れになったら、このエンドポイントを再呼び出しして新しいダウンロード URL を取得します
Chat Replay API エンドポイントの詳細は、Realtime Kit API のドキュメント を参照してください。
前の手順で取得した chat_download_url に HTTP GET リクエストを送り、CSV 形式のチャットダンプファイルをダウンロードできます。
HTTP URL からのファイルダウンロード手順は、クライアント側かサーバー側かで異なります。
クライアント側でダウンロードするには、次の手順です。
chat_download_urlにGETリクエストを送ります- レスポンスを blob に変換します
download属性付きの非表示の<a>HTML 要素を作り、hrefに blob を設定します<a>要素をクリックしてブラウザにダウンロードを開始させ、その後<a>要素を削除します
サーバーで Node.js のストリームを使ってダウンロードするには、次の手順です。
- ローカルファイル向けの writable stream を作成します
chat_download_urlにGETリクエストを送りますres.bodyで readable stream を取得し、最初の手順で作った writable stream に pipe します
CSV ファイルには、すべてのチャットメッセージと、参加者情報およびメタデータが含まれます。列見出しは次のとおりです。
id- チャットメッセージの一意な ID ですparticipantId- メッセージを送信した参加者の ID ですsessionId- チャットメッセージが送信されたセッション ID ですmeetingId- このセッションが属するミーティングの ID ですdisplayName- このメッセージを送信した参加者の表示名ですpinned- 現在のメッセージがピン留めされているかを示す boolean ですisEdited- 現在のメッセージが編集されているかを示す boolean ですpayloadType- チャットメッセージで送られたペイロードの種類を示す ENUM です。値はTEXT_MESSAGE、IMAGE_MESSAGE、FILE_MESSAGEのいずれかですpayload- チャットメッセージで送られた実際のペイロードですcreatedAt- このチャットメッセージが送信されたタイムスタンプです