-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
80 lines (72 loc) · 1.8 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<!DOCTYPE html>
<html>
<head>
<title>Chat app using Socket IO and Node JS</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<h1 class="font-bold text-green-500
text-3xl text-center mt-5">
Messages
</h1>
<div>
<h2 class="font-semibold text-xl
text-center mt-5"
id="logo">
Chat App using Socket io
</h2>
</div>
<form class="flex flex-col justify-center
items-center mt-5"
id="form">
<input class="border border-gray-400
rounded-md mt-5 p-1"
type="text"
placeholder="Name"
id="myname">
<input class="border border-gray-400
rounded-md mt-5 p-1"
type="text"
placeholder="Message"
id="message">
<button class="bg-blue-500 rounded-md p-2
text-white mt-5">
Send
</button>
</form>
<div class="flex flex-col justify-center
items-center mt-5"
id="messageArea">
</div>
</body>
<script src="/socket.io/socket.io.js"></script>
<script>
let socket = io();
let form = document.getElementById('form');
let myname = document.getElementById('myname');
let message = document.getElementById('message');
let messageArea = document.getElementById("messageArea");
form.addEventListener("submit", (e) => {
e.preventDefault();
if (message.value) {
socket.emit('send name', myname.value);
socket.emit('send message', message.value);
message.value = "";
}
});
socket.on("send name", (username) => {
let name = document.createElement("p");
name.style.backgroundColor = "grey";
name.style.width = "100%";
name.style.textAlign = "center";
name.style.color = "white";
name.textContent = username + ":";
messageArea.appendChild(name);
});
socket.on("send message", (chat) => {
let chatContent = document.createElement("p");
chatContent.textContent = chat;
messageArea.appendChild(chatContent);
});
</script>
</html>