-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathchatify.html
119 lines (103 loc) · 3.66 KB
/
chatify.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
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<!DOCTYPE html>
<html lang="en">
<head>
<title>Chatify!</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script src="/nowjs/now.js"></script>
<script>
$(document).ready(function(){
var scroll = 2000;
get = getUrlVars();
if(get["name"]!=null) now.name = get["name"];
else now.name = prompt("What's your name?", "");
if(get["group"]!=null) now.group = get["group"];
else now.group = 0;
now.receiveMessage = function(name, date, message){
if(name==now.name) color = "#0000FF";
else color = "#900000";
$("#messages").append("<br>" + date + " " + "<font color='"+color+"'>"+name + "</font>: " + message);
$('#messages').scrollTop(scroll);
}
now.receiveHistory = function(history){
$.each(history, function(key,value){
if(value["type"]=="msg") {
if(value["name"]==now.name) color = "#0000FF";
else color = "#900000";
$("#messages").append("<br>" + value["date"] + " <font color='"+color+"'>" + value["name"] + "</font>: " + value["message"]+"</font>");
}
else if(value["type"]=="connect") {
$("#messages").append("<br>" + value["date"] + " <font color='#00FF00'>"+value["name"]+" has joined the chat.</font>");
}
else if(value["type"]=="disconnect") {
$("#messages").append("<br>" + value["date"] + " <font color='#900000'>"+value["name"]+" has left the chat.</font>");
}
});
$("#messages").append("<br>" + "<font color='#00FF00'>You have joined the chat.</font>");
$('#messages').scrollTop(scroll);
}
now.listAllUsers = function(names) {
for (var i = 0; i < names.length; i++) {
now.updateUserList(names[i]);
}
}
now.updateUserList = function(name) {
$("#users").append("<span id='"+name+"'><br>" + name + "</span>");
}
now.announceUser = function(name, date) {
now.updateUserList(name);
$("#messages").append("<br>" + date + " <font color='#00FF00'>"+name+" has joined the chat.</font>");
$('#messages').scrollTop(scroll);
}
now.removeUser = function(name, date){
$("#"+name).remove();
$("#messages").append("<br>" + date + " <font color='#900000'>"+name+" has left the chat.</font>");
$('#messages').scrollTop(scroll);
}
now.changeName = function(name) {
now.name = name;
}
$("#send-button").click(function(){
sendMessage();
});
$('#text-input').bind('keypress', function(e) {
if(e.keyCode==13){ //Pressed Enter
e.preventDefault();
sendMessage();
}
});
sendMessage = function(){
now.distributeMessage($("#text-input").val());
$("#text-input").val("");
}
now.core.on('disconnect', function(){
$("#messages").append("<br>" + "<font color='#900000'>You have been disconnected.</font>");
$('#messages').scrollTop(scroll);
$("#users").empty();
});
// Read a page's GET URL variables and return them as an associative array.
function getUrlVars()
{
var vars = [], hash;
var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
for(var i = 0; i < hashes.length; i++)
{
hash = hashes[i].split('=');
vars.push(hash[0]);
vars[hash[0]] = hash[1];
}
return vars;
}
});
</script>
</head>
<body>
<table border=1px style="width:500px; max-height:50px;">
<tr>
<td style="width:80%; "><div id="messages" style="max-height:200px; min-height:200px; max-width:400px; overflow:auto; overflow-x:hidden;"></div></td>
<td style="width:20%;"><div id="users" style="max-height:200px; min-height:200px; max-width:100px; overflow:auto; overflow-x:hidden;"></div></td>
</tr>
</table>
<textarea rows=3 cols=40 id="text-input"></textarea>
<input type="button" value="Send" id="send-button">
</body>
</html>