diff --git a/README.md b/README.md index 97621d0..9168fdf 100644 --- a/README.md +++ b/README.md @@ -7,9 +7,15 @@ It includes a server built in node.js and a html client. You can read the full tutorial at: http://udidu.blogspot.com/2012/11/chat-evolution-nodejs-and-socketio.html +### Install dependencies: + +You need expressjs and socket.io. + + $ npm install + + ### To run: -Please be sure you have expressjs and socket.io modules installed before running this application. On Windows/Mac/Linux: @@ -18,7 +24,9 @@ On Windows/Mac/Linux: After running go to this address: http://locahost:8080/ - + +You can change listening port in server.js line 9. + ### Live demo @@ -27,7 +35,6 @@ For a live demo go to: http://uditalias.github.com/chat-nodejs/public - ### Credits This application uses the following: @@ -41,4 +48,4 @@ This application uses the following: - Chat history with MongoDB and LocalStorage - Private chat with users -###Enjoy! \ No newline at end of file +###Enjoy! diff --git a/package.json b/package.json new file mode 100644 index 0000000..756b2f6 --- /dev/null +++ b/package.json @@ -0,0 +1,16 @@ +{ + "name": "ChatApplication", + "description": "Multi-Room Chat Application", + "author": { + "name": "Udi Talias", + "email": "udi.talias@gmail.com", + "url": "http://udidu.blogspot.com" + }, + "dependencies": { + "express": "3.*.*", + "socket.io": "0.9.*" + }, + "scripts": { + "start": "node server.js" + } +} diff --git a/public/scripts/chat.io.js b/public/scripts/chat.io.js index ad2ace2..5a2ab73 100644 --- a/public/scripts/chat.io.js +++ b/public/scripts/chat.io.js @@ -12,7 +12,6 @@ currentRoom = null, // server information - serverAddress = 'http://localhost', serverDisplayName = 'Server', serverDisplayColor = '#1c5380', @@ -40,7 +39,7 @@ // bind DOM elements like button clicks and keydown function bindDOMEvents(){ - + $('.chat-input input').on('keydown', function(e){ var key = e.which || e.keyCode; if(key == 13) { handleMessage(); } @@ -58,7 +57,7 @@ $('#nickname-popup .begin').on('click', function(){ handleNickname(); }); - + $('#addroom-popup .input input').on('keydown', function(e){ var key = e.which || e.keyCode; if(key == 13) { createRoom(); } @@ -119,16 +118,16 @@ // and sending the nickname for the connected client socket.emit('connect', { nickname: nickname }); }); - + // after the server created a client for us, the ready event - // is fired in the server with our clientId, now we can start + // is fired in the server with our clientId, now we can start socket.on('ready', function(data){ // hiding the 'connecting...' message $('.chat-shadow').animate({ 'opacity': 0 }, 200, function(){ $(this).hide(); $('.chat input').focus(); }); - + // saving the clientId localy clientId = data.clientId; }); @@ -152,25 +151,25 @@ socket.on('chatmessage', function(data){ var nickname = data.client.nickname; var message = data.message; - + //display the message in the chat window insertMessage(nickname, message, true, false, false); }); - + // when we subscribes to a room, the server sends a list // with the clients in this room socket.on('roomclients', function(data){ - + // add the room name to the rooms list addRoom(data.room, false); // set the current room setCurrentRoom(data.room); - + // announce a welcome message insertMessage(serverDisplayName, 'Welcome to the room: `' + data.room + '`... enjoy!', true, false, true); $('.chat-clients ul').empty(); - + // add the clients to the clients list addClient({ nickname: nickname, clientId: clientId }, false, true); for(var i = 0, len = data.clients.length; i < len; i++){ @@ -185,19 +184,19 @@ $('.chat input').focus(); }); }); - + // if someone creates a room the server updates us // about it socket.on('addroom', function(data){ addRoom(data.room, true); }); - + // if one of the room is empty from clients, the server, // destroys it and updates us socket.on('removeroom', function(data){ removeRoom(data.room, true); }); - + // with this event the server tells us when a client // is connected or disconnected to the current room socket.on('presence', function(data){ @@ -237,7 +236,7 @@ // add a client to the clients list function addClient(client, announce, isMe){ var $html = $.tmpl(tmplt.client, client); - + // if this is our client, mark him with color if(isMe){ $html.addClass('me'); @@ -253,7 +252,7 @@ // remove a client from the clients list function removeClient(client, announce){ $('.chat-clients ul li[data-clientId="' + client.clientId + '"]').remove(); - + // if announce is true, show a message about this room if(announce){ insertMessage(serverDisplayName, client.nickname + ' has left the room...', true, false, true); @@ -268,11 +267,11 @@ function createRoom(){ var room = $('#addroom-popup .input input').val().trim(); if(room && room.length <= ROOM_MAX_LENGTH && room != currentRoom){ - + // show room creating message $('.chat-shadow').show().find('.content').html('Creating room: ' + room + '...'); $('.chat-shadow').animate({ 'opacity': 1 }, 200); - + // unsubscribe from the current room socket.emit('unsubscribe', { room: currentRoom }); @@ -314,7 +313,7 @@ // send the message to the server with the room name socket.emit('chatmessage', { message: message, room: currentRoom }); - + // display the message in the chat window insertMessage(nickname, message, true, true); $('.chat-input input').val(''); @@ -368,16 +367,16 @@ }, 1500); } } - + // after selecting a nickname we call this function // in order to init the connection with the server function connect(){ // show connecting message $('.chat-shadow .content').html('Connecting...'); - + // creating the connection and saving the socket - socket = io.connect(serverAddress); - + socket = io.connect(); + // now that we have the socket we can bind events to it bindSocketEvents(); } @@ -387,4 +386,4 @@ bindDOMEvents(); }); -})(jQuery); \ No newline at end of file +})(jQuery);