JavaScript

Setup

Now that you have a valid user token, it's time to initialize a new VonageClient instance and create a Session for the Member to use for our chat app.

Then we will get the user's Member information so that we can differentiate between their and the other user's messages.

Once we get that information successfully, we hide the login and display the chat UI.

Using getConversationEvents on the client, we retrieve a page of Events.

Next, we will iterate through the events so we can handle how each is displayed in the messages feed.

async function run() {
    const client = new vonageClientSDK.VonageClient();
    try {
        await client.createSession(userToken);

        // Get my Member information
        myMember = await client.getConversationMember(CONVERSATION_ID, "me");

        document.getElementById("messages").style.display = "block";
        document.getElementById("login").style.display = "none";

        // Load events that happened before the page loaded
        const params = {
            order: "asc",
            pageSize: 100,
        };
        const eventsPage = await client.getConversationEvents(CONVERSATION_ID, params);
        eventsPage.events.forEach((event) => handleEvent(event));
    } catch (error) {
        console.error("Error: ", error);
        return;
    }

    // more to be added later
}