Skip to content

Commit 86ba37a

Browse files
devwithzacharydevwithzachary
authored
Merge pull request #34 from Vonage-Community/DEVX-7897---adds-JS-Chat-App
Adds chat tutorial app files
2 parents 18e297b + 73d6830 commit 86ba37a

File tree

3 files changed

+190
-0
lines changed

3 files changed

+190
-0
lines changed

‎messaging-js/chat.js

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
const ALICE_JWT = "";
2+
const BOB_JWT = "";
3+
const CONVERSATION_ID = "";
4+
5+
const aliceLoginBtn = document.getElementById("alice-login");
6+
const bobLoginBtn = document.getElementById("bob-login");
7+
8+
const messageTextarea = document.getElementById("message-textarea");
9+
const messageFeed = document.getElementById("message-feed");
10+
const sendButton = document.getElementById("send");
11+
12+
let userToken;
13+
let myMember;
14+
15+
function formatMessage(sender, message) {
16+
const rawDate = new Date(Date.parse(message.timestamp));
17+
const options = {
18+
weekday: "long",
19+
year: "numeric",
20+
month: "long",
21+
day: "numeric",
22+
hour: "numeric",
23+
minute: "numeric",
24+
second: "numeric",
25+
};
26+
const formattedDate = rawDate.toLocaleDateString(undefined, options);
27+
let text = "";
28+
29+
if (message.from.memberId !== myMember.id) {
30+
text = `<span style="color:red">${sender.userName.replace(/</g,"&lt;")} (${formattedDate}): <b>${message.body.text.replace(/</g,"&lt;")}</b></span>`;
31+
} else {
32+
text = `me (${formattedDate}): <b>${message.body.text.replace(/</g,"&lt;")}</b>`;
33+
}
34+
return text + "<br />";
35+
}
36+
37+
function handleEvent(event) {
38+
let formattedMessage;
39+
switch (event.kind) {
40+
case "member:invited":
41+
formattedMessage = `${event.body.user.name} was invited.<br/>`;
42+
break;
43+
case "member:joined":
44+
formattedMessage = `${event.body.user.name} joined.<br/>`;
45+
break;
46+
case "member:left":
47+
formattedMessage = `${event.body.user.name} left.<br/>`;
48+
break;
49+
case "message:text":
50+
const sender = {
51+
displayName: event.from.displayName,
52+
memberId: event.from.memberId,
53+
userName: event.from.user.name,
54+
userId: event.from.user.id,
55+
};
56+
formattedMessage = formatMessage(sender, event);
57+
break;
58+
}
59+
messageFeed.innerHTML = messageFeed.innerHTML + formattedMessage;
60+
}
61+
62+
async function run() {
63+
const client = new vonageClientSDK.VonageClient();
64+
try {
65+
await client.createSession(userToken);
66+
67+
// Get my Member information
68+
myMember = await client.getConversationMember(CONVERSATION_ID, "me");
69+
70+
document.getElementById("messages").style.display = "block";
71+
document.getElementById("login").style.display = "none";
72+
73+
// Load events that happened before the page loaded
74+
const params = {
75+
order: "asc",
76+
pageSize: 100,
77+
};
78+
const eventsPage = await client.getConversationEvents(CONVERSATION_ID, params);
79+
eventsPage.events.forEach((event) => handleEvent(event));
80+
} catch (error) {
81+
console.error("Error: ", error);
82+
return;
83+
}
84+
85+
client.on("conversationEvent", (event) => {
86+
handleEvent(event);
87+
});
88+
89+
// Listen for clicks on the submit button and send the existing text value
90+
sendButton.addEventListener("click", () => {
91+
client
92+
.sendMessageTextEvent(CONVERSATION_ID, messageTextarea.value)
93+
.then((timestamp) => {
94+
console.log("Successfully sent text message at ", timestamp);
95+
messageTextarea.value = "";
96+
})
97+
.catch((error) => {
98+
console.error("Error sending text message: ", error);
99+
});
100+
});
101+
}
102+
103+
aliceLoginBtn.addEventListener("click", () => {
104+
userToken = ALICE_JWT;
105+
run();
106+
});
107+
108+
bobLoginBtn.addEventListener("click", () => {
109+
userToken = BOB_JWT;
110+
run();
111+
});
112+
113+

‎messaging-js/index.html

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<style>
5+
body {
6+
font: 13px Helvetica, Arial;
7+
}
8+
9+
button {
10+
cursor: pointer;
11+
}
12+
13+
#login {
14+
width: 100%;
15+
height: 100vh;
16+
display: flex;
17+
flex-direction: column;
18+
justify-content: center;
19+
align-items: center;
20+
}
21+
22+
#message-textarea {
23+
width: 85%;
24+
font-size: 20px;
25+
}
26+
27+
#messages {
28+
display: none;
29+
}
30+
31+
#message-feed {
32+
font-size: 18px;
33+
padding-bottom: 20px;
34+
line-height: 22pt;
35+
height: 300px;
36+
overflow-y: auto;
37+
}
38+
39+
#send {
40+
width: 85%;
41+
}
42+
</style>
43+
</head>
44+
45+
<body>
46+
<section id="login">
47+
<button id="alice-login">Log in as Alice</button>
48+
<br /><br />
49+
<button id="bob-login">Log in as Bob</button>
50+
</section>
51+
52+
<section id="messages">
53+
<div id="message-feed"></div>
54+
<div>
55+
<textarea id="message-textarea"></textarea>
56+
<button id="send">Send</button>
57+
</div>
58+
</section>
59+
60+
<script src="./node_modules/@vonage/client-sdk/dist/vonageClientSDK.min.js"></script>
61+
<script src="./chat.js"></script>
62+
</body>
63+
</html>

‎messaging-js/package.json

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
{
2+
"name": "messaging-js",
3+
"version": "1.0.0",
4+
"description": "Tutorial Chat application using Vonage Client SDK",
5+
"main": "chat.js",
6+
"scripts": {
7+
"test": "echo \"Error: no test specified\" && exit 1"
8+
},
9+
"author": "",
10+
"license": "ISC",
11+
"dependencies": {
12+
"@vonage/client-sdk": "^1.3.0"
13+
}
14+
}

0 commit comments

Comments
 (0)