Permalink
Browse files

added actual chatting functionality

  • Loading branch information...
logsol
logsol committed Mar 23, 2012
1 parent 8902009 commit d370a33263d9a0331539bccd2af2dfd7bede1202
Showing with 97 additions and 35 deletions.
  1. +55 −10 chat.js
  2. +33 −14 public/javascripts/chat.js
  3. +8 −7 public/stylesheets/style.css
  4. +1 −4 views/index.jade
View
65 chat.js
@@ -1,14 +1,14 @@
var http = require('http')
, io = require('socket.io');
-
var server = http.createServer()
, socket = io.listen(server)
, clients = {}
, self = this
, eventMap = {
- login: login
+ login: onLogin,
+ message: onMessage
};
exports.run = function(port){
@@ -26,7 +26,7 @@ socket.on('connection', function(link){
process(link, data);
});
link.on('disconnect',function(){
- console.log('Client %s has disconnected', link.id);
+ onDisconnect(link);
});
});
@@ -61,17 +61,62 @@ function emit(client, method, data){
console.log('emitting: ', method, data);
}
-function login(client, data){
+function message(to, text, from){
+ from = (from === undefined || from === null)
+ ? 'server'
+ : from.name;
+
+ emit(to, 'message', {
+ text: text,
+ from: from
+ });
+}
+
+function broadcast(text, from){
+ for(var x in clients){
+ message(clients[x], text, from);
+ }
+}
+
+function list(){
+ var list = [];
+ for(var x in clients){
+ if(clients[x].login) list.push(clients[x].name);
+ }
+ for(x in clients){
+ emit(clients[x], 'list', {
+ list: list
+ });
+ }
+}
+
+// Events
+
+function onLogin(client, data){
client.name = data.name;
client.login = true;
emit(client, 'login', {
- success: true,
- message: 'Welcome ' + client.name
+ success: client.login
});
+ list();
+ broadcast('Welcome ' + client.name);
}
-function message(client, message){
- emit(client, 'message', {
- text: message
- });
+function onMessage(from, data){
+ broadcast(data.text, from);
+}
+
+function onDisconnect(link){
+ var name, wasLoggedIn = false;
+ for(var x in clients){
+ if(clients[x].link === link){
+ wasLoggedIn = clients[x].login;
+ name = clients[x].name;
+ delete clients[x];
+ break;
+ }
+ }
+ if(wasLoggedIn)
+ list();
+ broadcast(name + ' has left.');
}
View
@@ -18,11 +18,12 @@ chat.registerEvents = function(){
chat.registerEvent('connect', chat.onConnect);
chat.registerEvent('login', chat.onLogin);
chat.registerEvent('message', chat.onMessage);
- chat.registerEvent('users', chat.onUsers);
+ chat.registerEvent('list', chat.onList);
}
chat.output = function(text){
$('#output').append($('<p></p>').text(text));
+ $("#output").animate({ scrollTop: $("#output").prop('scrollHeight') }, "slow");
}
chat.login = function(){
@@ -34,16 +35,19 @@ chat.login = function(){
};
chat.message = function(message){
- chat.send('message', {
- text: message
- });
+ if($.trim(message) !== ''){
+ chat.send('message', {
+ text: message
+ });
+ }
}
// Events
-chat.onError = function(message){
- $('#hint').text('ERROR: ' + message);
+chat.onError = function(data){
+ data = JSON.parse(data);
+ $('#hint').text('ERROR: ' + data.message);
};
chat.onClose = function(){
@@ -55,29 +59,44 @@ chat.onConnect = function(){
$('#hint').text('connected');
$('#username').focus();
$('#join').click(chat.login);
+ $('#username').keyup(function (e){
+ if(e.keyCode == 13){
+ chat.login();
+ }
+ });
};
chat.onLogin = function(data) {
data = JSON.parse(data);
- chat.output(data.message);
if(data.success){
- $('#login').hide();
- $('#message').show();
+ $('#login').hide('slow');
+ $('#message').show('slow');
+ $('#text').focus();
+ $('#text').keyup(function (e){
+ if(e.keyCode == 13){
+ chat.message($('#text').val());
+ $('#text').val('');
+ $('#text').focus();
+ }
+ });
$('#send').click(function(){
- chat.message($('#text').attr('value'));
+ chat.message($('#text').val());
+ $('#text').val('');
+ $('#text').focus();
});
}
}
chat.onMessage = function(data){
data = JSON.parse(data);
- chat.output(data.text);
+ chat.output(data.from + ': ' + data.text);
}
-chat.onUsers = function(users){
+chat.onList = function(data){
+ data = JSON.parse(data);
$('#users').empty();
- $.each(users, function(index, value){
- $('#users').append($('<li>').text(value));
+ $.each(data.list, function(index, user){
+ $('#users').append($('<li>').text(user));
});
}
@@ -7,10 +7,7 @@
body {
background-color: #111;
}
-pre, ul, button, input {
- background-color: #222;
- color: #ddd ;
-}
+
input, button {
padding: 3px 5px;
margin-right: 5px;
@@ -35,6 +32,7 @@ input, button {
position: absolute;
top: 40px;
left: 10px;
+ overflow-y: scroll;
}
#output p {
padding: 3px;
@@ -47,6 +45,7 @@ input, button {
left: 620px;
width: 200px;
height: 300px;
+ overflow-y: scroll;
}
#users li {
border-bottom: 1px dotted gray;
@@ -69,7 +68,9 @@ input, button {
width: 590px;
}
#message #send {
- position: absolute;
- left: 610px;
- top: 0;
+ margin-left: 3px;
+}
+#output, #users, button, input {
+ background-color: #222;
+ color: #ddd ;
}
View
@@ -1,10 +1,7 @@
#hint
#chat
- pre#output
+ div#output
ul#users
- li test
- li test2
- li test3
#login
input#username(type='text')
button#join join

0 comments on commit d370a33

Please sign in to comment.