-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
executable file
·102 lines (94 loc) · 4.49 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
102
<!doctype html> <html>
<head>
<title>Socket.IO chat</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font: 13px Helvetica, Arial; }
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; }
#users { list-style-type: none; margin: 0; padding: 0;width:15%;float:right; }
#messages { list-style-type: none; margin: 0; padding: 0;overflow-x:none;overflow-y:scroll;width:85%;float:left; }
#messages li,#users li { padding: 5px 10px;width:100%; }
#messages li:nth-child(odd) { background: #eee; }
</style>
</head>
<body>
<input type="hidden" class="form-control" disabled name="name" placeholder="Your Name"/>
<div><ul id="messages"></ul><ul id="users"><li style="border-bottom:solid 1px #ccc;font-weight:bold;">Users Online</li></ul></div>
<form action="">
<input id="m" autocomplete="off" /><button>Send</button>
</form>
$(function() {
$(".help-slider").flexslider({touch:!0,animationLoop:!1,slideshow:!1,animation:"slide",direction:"horizontal",controlNav:!0,directionNav:!1,animationSpeed:600,useCSS:!0,video:!1});
});
<script src="https://cdn.socket.io/socket.io-1.2.0.js"></script>
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script>
var socket = io();
$(document).ready(function(){
window.onbeforeunload = function (e) {
socket.emit('disconnect');
};
/*
When the document loads we want to prompt the user for their username.
Upon submission we submit this, where it is checked to see if it exists in users table.
If it exists then we set user to online, and return a history of chat messages.
Otherwise we insert the user setting the status as online and again return history of chat messages
*/
$("#messages").height($("body").height()-40);
var username = prompt('Please enter a username');
$("input[name='name']").val(username);
socket.emit('user connect',username);
});
/* When we are told user has connected; We here process the messages that have been returned from the database (history) */
socket.on('user connected', function(messages,users){
$(messages).each(function(i,v){
if(v.name == $("input[name='name']").val())
$('#messages').prepend("<li><strong>You</strong>:" +v.message+ "</li>");
else
$('#messages').prepend($('<li>').text(v.name + ":" +v.message));
});
$(users).each(function(i,v){
$('#users').append("<li id='"+v.name+"'>" +v.name+ "</li>");
});
doFocus(); //This is meant for making the chat list auto scroll - this seems not to be working
});
socket.on('another user connected', function(newuser){
$('#users').append("<li id='"+newuser+"'>" +newuser+ "</li>");
});
/* Here we submit the message to the socket server for processing */
$('form').submit(function(){
socket.emit('chat message', $("input[name='name']").val(),$('#m').val());
$('#m').val('');
return false;
});
/* Here we process new chat messages & show them in the chat window */
socket.on('chat message', function(user,msg){
if(user == $("input[name='name']").val())
$('#messages').prepend("<li><strong>You</strong>:" +msg+ "</li>");
else
$('#messages').prepend($('<li>').text(user + ":" +msg));
doFocus();
});
socket.on('user disconnected', function(user){
$('#messages').prepend('<li>' + user + ' disconnected from the chat</li>');
var audio = new Audio('http://soundbible.com/mp3/Blop-Mark_DiAngelo-79054334.mp3');
audio.play();
$('#users #'+user).remove();
});
/* fuction for scrolling / resize chat windows - not working */
function doFocus()
{
console.log('focus');
window.scrollTo(0,document.body.scrollHeight);
$("#messages").height($(window).height()-40);
var audio = new Audio('http://soundbible.com/mp3/Blop-Mark_DiAngelo-79054334.mp3');
audio.play();
}
</script>
</body>
</html>