JavaScript

メッセージ履歴の表示

ユーザーには「会話」のイベントを表示させたい。メッセージフィードに追加するイベントのフォーマットを決定するために、イベントの種類に基づいてフィルタリングすることができます。イベントを追加する handleEvent 関数に次のコードを追加する。 chat.js:

function handleEvent(event) {
    let formattedMessage;
    switch (event.kind) {
        case "member:invited":
            formattedMessage = `${event.body.user.name} was invited.<br/>`;
            break;
        case "member:joined":
            formattedMessage = `${event.body.user.name} joined.<br/>`;
            break;
        case "member:left":
            formattedMessage = `${event.body.user.name} left.<br/>`;
            break;
        case "message:text":
            const sender = {
                displayName: event.from.displayName,
                memberId: event.from.memberId,
                userName: event.from.user.name,
                userId: event.from.user.id,
            };
            formattedMessage = formatMessage(sender, event);
            break;
    }
    messageFeed.innerHTML = messageFeed.innerHTML + formattedMessage;
}

この例では、ユーザーのIDを使用して、そのユーザーが送信したメッセージと他のユーザーから受信したメッセージを異なる色で表示することで区別します。を作成する。 formatMessage 関数に以下のコードを追加する。 chat.js:

function formatMessage(sender, message) {
    const rawDate = new Date(Date.parse(message.timestamp));
    const options = {
        weekday: "long",
        year: "numeric",
        month: "long",
        day: "numeric",
        hour: "numeric",
        minute: "numeric",
        second: "numeric",
    };
    const formattedDate = rawDate.toLocaleDateString(undefined, options);
    let text = "";

    if (message.from.memberId !== myMember.id) {
        text = `<span style="color:red">${sender.userName.replace(/</g,"&lt;")} (${formattedDate}): <b>${message.body.text.replace(/</g,"&lt;")}</b></span>`;
    } else {
        text = `me (${formattedDate}): <b>${message.body.text.replace(/</g,"&lt;")}</b>`;
    }
    return text + "<br />";
}

最後に、新しい着信イベントのイベントリスナーをセットアップする必要がある。これは conversationEvent をクライアントに追加する。クライアント上の run 関数である：

client.on("conversationEvent", (event) => {
    handleEvent(event);
});

ウェブベースのチャットアプリの作成

ユーザー同士がメッセージをやりとりできるWebアプリケーションを作成する

対応機種：

JavaScript Kotlin Swift

手順

VonageClientをインスタンス化し、Sessionを作成する。