diff --git a/messaging-js/chat.js b/messaging-js/chat.js new file mode 100644 index 0000000..5418c49 --- /dev/null +++ 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 = `${sender.userName.replace(/${message.body.text.replace(/`; + } else { + text = `me (${formattedDate}): ${message.body.text.replace(/`; + } + return text + "
"; +} + +function handleEvent(event) { + let formattedMessage; + switch (event.kind) { + case "member:invited": + formattedMessage = `${event.body.user.name} was invited.
`; + break; + case "member:joined": + formattedMessage = `${event.body.user.name} joined.
`; + break; + case "member:left": + formattedMessage = `${event.body.user.name} left.
`; + 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(); +}); + + \ No newline at end of file diff --git a/messaging-js/index.html b/messaging-js/index.html new file mode 100644 index 0000000..04e651e --- /dev/null +++ b/messaging-js/index.html @@ -0,0 +1,63 @@ + + + + + + + +
+ +

+ +
+ +
+
+
+ + +
+
+ + + + + \ No newline at end of file diff --git a/messaging-js/package.json b/messaging-js/package.json new file mode 100644 index 0000000..0a219b8 --- /dev/null +++ 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" + } +}