chat.github.io/index.html at master · Ashray-debug/chat.github.io · 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
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<!DOCTYPE html>
<html>
<head>
	<title>ChatIO</title>
	<style>
		body{
			background:#f9f9f9;
		}
		#container{
			width:700px;
			margin:0 auto;
		}
		#chatWindow{
			height:300px;
		}
		#mainWrapper{
			display:none;
		}
		#chatWrapper{
			float:left;
			border:1px #ccc solid;
			border-radius: 10px;
			background:#f4f4f4;
			padding:10px;
		}
		#userWrapper{
			float:left;
			border:1px #ccc solid;
			border-radius: 10px;
			background:#f4f4f4;
			padding:10px;
			margin-left:20px;
			width:150px;
			max-height:200px;
		}
		#namesWrapper{
			float:left;
			border:1px #ccc solid;
			border-radius: 10px;
			background:#f4f4f4;
			padding:10px;
			margin-left:20px;
		}
		input{
			height:30px;
			border:solid 1px #ccc;
		}
	</style>
</head>
<body>
	<div id="container">
		<div id="namesWrapper">
			<h2>ChatIO</h2>
			<p>Create Username:</p>
			<div id="error"></div>
			<form id="usernameForm">
				<input type="text" size="35" id="username">
				<input type="submit" value="Submit">
			</form>
		</div>

		<div id="mainWrapper">
			<h2>ChatIO</h2>
			<div id="chatWrapper">
				<div id="chatWindow"></div>
				<form id="messageForm">
					<input type="text" size="35" id="message" placeholder="Say Something...">
					<input type="submit" value="Submit">
				</form>
			</div>

			<div id="userWrapper">
				<div id="users"></div>
			</div>
		</div>
	</div>

	<script src="http://code.jquery.com/jquery-latest.min.js"></script>
		<script src="/socket.io/socket.io.js"></script>
		<script>
		$(function(){
			var socket = io.connect();
			var $messageForm = $('#messageForm');
			var $message = $('#message');
			var $chat = $('#chatWindow');
			var $usernameForm = $('#usernameForm');
			var $users = $('#users');
			var $username = $('#username');
			var $error = $('#error');
			$usernameForm.submit(function(e){
				e.preventDefault();
				socket.emit('new user', $username.val(), function(data){
					if(data){
						$('#namesWrapper').hide();
						$('#mainWrapper').show();
					} else{
						$error.html('Username is taken');
					}
				});
			});
			socket.on('usernames', function(data){
				var html = '';
				for(i = 0;i < data.length;i++){
					html += data[i] + '<br>';
				}
				$users.html(html);
			});
			$messageForm.submit(function(e){
				e.preventDefault();
				socket.emit('send message', $message.val());
				$message.val('');
			});
			socket.on('new message', function(data){
				$chat.append('<strong>'+data.user+'</strong>: '+data.msg+'<br>');
			});
		});
		</script>
</body>
</html>