Vonage-Community · devwithzachary · Dec 13, 2023 · Dec 12, 2023
diff --git a/messaging-js/chat.js b/messaging-js/chat.js
@@ -0,0 +1,113 @@
+const ALICE_JWT = "";
+const BOB_JWT = "";
+const CONVERSATION_ID = "";
+
+const aliceLoginBtn = document.getElementById("alice-login");
+const bobLoginBtn = document.getElementById("bob-login");
+
+const messageTextarea = document.getElementById("message-textarea");
+const messageFeed = document.getElementById("message-feed");
+const sendButton = document.getElementById("send");
+
+let userToken;
+let myMember;
+
+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 />";
+}
+
+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;
+}
+
+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;
+    }
+
+    client.on("conversationEvent", (event) => {
+        handleEvent(event);
+    });
+
+  // Listen for clicks on the submit button and send the existing text value
+  sendButton.addEventListener("click", () => {
+    client
+      .sendMessageTextEvent(CONVERSATION_ID, messageTextarea.value)
+      .then((timestamp) => {
+        console.log("Successfully sent text message at ", timestamp);
+        messageTextarea.value = "";
+      })
+      .catch((error) => {
+        console.error("Error sending text message: ", error);
+      });
+  });
+}
+
+aliceLoginBtn.addEventListener("click", () => {
+    userToken = ALICE_JWT;
+    run();
+});
+
+bobLoginBtn.addEventListener("click", () => {
+    userToken = BOB_JWT;
+    run();
+});
+
+
diff --git a/messaging-js/index.html b/messaging-js/index.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <style>
+            body {
+                font: 13px Helvetica, Arial;
+            }
+
+            button {
+                cursor: pointer;
+            }
+
+            #login {
+                width: 100%;
+                height: 100vh;
+                display: flex;
+                flex-direction: column;
+                justify-content: center;
+                align-items: center;
+            }
+
+            #message-textarea {
+                width: 85%;
+                font-size: 20px;
+            }
+
+            #messages {
+                display: none;
+            }
+
+            #message-feed {
+                font-size: 18px;
+                padding-bottom: 20px;
+                line-height: 22pt;
+                height: 300px;
+                overflow-y: auto;
+            }
+
+            #send {
+                width: 85%;
+            }
+        </style>
+    </head>
+
+    <body>
+        <section id="login">
+            <button id="alice-login">Log in as Alice</button>
+            <br /><br />
+            <button id="bob-login">Log in as Bob</button>
+        </section>
+
+        <section id="messages">
+            <div id="message-feed"></div>
+            <div>
+            <textarea id="message-textarea"></textarea>
+            <button id="send">Send</button>
+            </div>
+        </section>
+
+        <script src="./node_modules/@vonage/client-sdk/dist/vonageClientSDK.min.js"></script>
+        <script src="./chat.js"></script>
+    </body>
+</html>
diff --git a/messaging-js/package.json b/messaging-js/package.json
@@ -0,0 +1,14 @@
+{
+  "name": "messaging-js",
+  "version": "1.0.0",
+  "description": "Tutorial Chat application using Vonage Client SDK",
+  "main": "chat.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "@vonage/client-sdk": "^1.3.0"
+  }
+}