-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
90 lines (79 loc) · 3.26 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
<!doctype html>
<html>
<head>
<title>Socket.IO chat</title>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<style>
/** { margin: 0; padding: 0; box-sizing: border-box; }*/
html,body { height: 100%; margin: 0px; padding: 0px; box-sizing: border-box; }
body { font: 13px Helvetica, Arial; margin: 0; padding: 0; box-sizing: border-box; }
/*form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }*/
/*form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; }*/
/*form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }*/
.row, .container {height: 100%;}
.zebra-list { list-style-type: none; margin: 0; padding: 0; }
.zebra-list li { padding: 5px 10px; }
.zebra-list li:nth-child(odd) { background: #eee; }
#contact {
position: relative;
height: 100%;
}
#submitform {
position: absolute;
bottom: 0;
}
</style>
<script src="/socket.io/socket.io.js"></script>
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="col-md-8" id="contact">
<ul id="messages" class="zebra-list"></ul>
<form id="submitform" action="">
<div class="input-group">
<input id="m" type="text" autocomplete="off" class="form-control" />
<span class="input-group-btn">
<button type="submit" class="btn btn-primary">Send</button>
</span>
</div>
</form>
</div>
<div class="col-md-4">
<ul id="users" class="zebra-list"></ul>
</div>
</div>
<script>
$(document).ready(function() {
var socket = io();
var nick = prompt("What is your name?");
socket.emit("join", nick);
$('#submitform').submit(function(e){
e.preventDefault();
socket.emit('send', $('#m').val());
//console.log('emit ', $('#m').val());
$('#m').val('');
return false;
});
socket.on('chat', function(user, msg){
$('#messages').append($('<li>').html('<b>'+user+':</b> '+msg));
});
socket.on("update", function(msg) {
$('#messages').append($('<li>').text(msg));
});
socket.on("update-people", function(people){
$("#users").empty();
$.each(people, function(clientid, name) {
var $u = $('<li>').text(name);
if (name == nick) $u.addClass('current');
$('#users').append($u);
});
});
socket.on('disconnect', function(){
$('#messages').append($('<li>').text("Server disonnected"));
});
});
</script>
</body>
</html>