socketio-simple-chat-app/index.html at master · anggamanggala21/socketio-simple-chat-app · GitHub

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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<html>
	<head>
		<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0,shrink-to-fit=no">
		<title>Node Chat App by Angga Manggala</title>
	</head>
	<style type="text/css">
		body {
			padding: 0px;
			margin: 0px;
		}
		.container-body {
			height: 83vh;
			margin: 30px;
		}
		.chat-text {
			background: white;
			padding: 10px;
			color: black;
		}
	</style>
	<body>

		<div class="container-body">

			<div style="background: #3742fa; margin-top: 0px; margin-bottom: 0px; padding: 15px 15px; color: white; display: flex; justify-content: space-between;">
				<p style="margin: 0px; font-size: 20px; font-weight: bold;">CHAT APP</p>
				<button onclick="logout()" style="background: #ff6348; border: none; padding: 0px 20px; color: white; border-radius: 50px;">Logout</button>
			</div>
			<div id="chat-room" style="padding: 0px 20px; height: calc(100% - 100px); overflow-y: scroll; border: 1px solid #3742fa; background: #f7f7f7;">

			</div>

			<form action="javascript:send()" style="display: flex; align-items: flex-between; margin-top: 10px">
				<input placeholder="Input message here ..." id="chat-val" style="width: calc(100% - 100px); margin-right: 10px; padding: 10px; border: 1px solid #3742fa;"/>
				<button type="submit" style="width: 100px; border: none; background: #3742fa; color: white;">SEND</button>
			</form>

		</div>

		<script src="/socket.io/socket.io.js"></script>
		<script>
			if (!localStorage.getItem('user')) window.location = '/login'

			var socket = io();
			function send() {
			  	let val = document.getElementById("chat-val").value;
				socket.emit('chat', { user: localStorage.getItem('user'), msg: val });
			  	document.getElementById("chat-val").value = "";
			  	return false;
			}
			socket.on('chat', (msg) => {
				if (localStorage.getItem('chat')) {
					let messages = localStorage.getItem('chat')
					messages = JSON.parse(messages)
					messages.push(msg)
					localStorage.setItem('chat', JSON.stringify(messages))
				} else {
					localStorage.setItem('chat', JSON.stringify([msg]))
				}
			})

			socket.on('datas', (datas) => {
				load(datas)
			})

			function load(datas) {
				if (!datas || datas.length < 1) return
				let chatRoom = document.getElementById("chat-room");
				chatRoom.innerHTML = '';
				datas.forEach(el => {
					let chatRoom = document.getElementById("chat-room");

					let createText = document.createElement("DIV")
					let localUser = localStorage.getItem('user')
					createText.innerHTML = `
						<div style="display: flex; justify-content: ${ el.user == localUser ? `flex-end` : `flex-start` }; margin: 10px 0px	">
							<div style="background: #ffffff; display: inline-block; padding: 5px 10px; border-radius: 5px; box-shadow: 5px 5px 10px -1px #d7d7d7">
								<font style="font-size: 11px; color: #3742fa;">${ el.user }</font><br>
								<p style="margin: 0px; margin-top: 5px;">${ el.msg }</p>
							</div>
						</div>
					`;
					chatRoom.appendChild(createText);

				});
			}

			function logout() {
				localStorage.removeItem('user')
				window.location = '/login'
			}

		</script>
	</body>
</html>