-
Notifications
You must be signed in to change notification settings - Fork 6
/
Copy pathindex.html
101 lines (90 loc) · 2.75 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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="./ac-css-reset/dist/ac-css-reset.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link type="text/css" rel="stylesheet" href="./css/style.css">
<title>ChatIO App</title>
</head>
<title>ChatIO App</title>
<body>
<main class="maincont">
<header>
<h1>ChatIO Chat App</h1>
<div class="chaticon right">
</div>
</header>
<!-- User registration -->
<section class="unamecont">
<h2>Enter a creative username and start chatting!</h2>
<form id='userform'>
<input id="uname" name="uname" placeholder="My name is.." type="text">
<input id="sub" name="sub" value="Chat »" type="submit"></input>
</form>
</section>
<!-- Chat UI -->
<section class="bodycont cf">
<h2>Happy Chatting!</h2>
<div class="chatwrap">
<div class="chatcont"> </div>
<form id="messageform">
<input id="msg" name="msg" placeholder="Enter Message" type="text">
<input id="subc" name="subc" value="Send »" type="submit">
</form>
</div>
<div class="nameswrap"></div>
</section>
</main>
<!-- Script -->
<script
src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"></script>
<script src="/socket.io/socket.io.js"></script>
<script type="text/javascript">
$(function(){
var socket = io.connect();
var $messageform = $('#messageform');
var $msg = $('#msg');
var $chat = $('.chatcont');
var $userscont = $('.nameswrap');
var $userform = $('#userform');
var $username = $('#uname');
var $unamecont = $('.unamecont');
var $bodycont = $('.bodycont');
$userform.submit(function(e) {
e.preventDefault();
socket.emit('new user', $username.val(), function(data) {
if ( data ) {
$unamecont.hide();
$bodycont.show();
} else {
alert("Username already exists.");
$username.val('');
}
});
});
$messageform.submit(function(e) {
e.preventDefault();
socket.emit('send message', $msg.val());
$msg.val('');
});
socket.on('update users', function(users) {
var html = '';
console.log(users);
for ( var i = 0; i < users.length ; i++ ) {
html += "» " + users[i] + "<br>";
console.log(html);
}
$userscont.html(html);
});
socket.on('new message', function(data) {
$chat.append('<strong>' + data.user + ' : </strong> ' + data.msg + '<br>');
});
});
</script>
</body>
</html>