diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..dbf0821 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +node_modules/* \ No newline at end of file diff --git a/README.md b/README.md new file mode 100644 index 0000000..023fa99 --- /dev/null +++ b/README.md @@ -0,0 +1,9 @@ +# Chat Application Demo # + +Demo chat application code to showcase the usage of Socket.IO \ + +## Instructions ## + +* Git clone repository +* Run `npm install` +* Run `node app.js` diff --git a/app.js b/app.js new file mode 100644 index 0000000..5c413f4 --- /dev/null +++ b/app.js @@ -0,0 +1,52 @@ +// Module Dependencies +var express = require('express'), +app = express(), +path = require('path'), +server = app.listen(3000, function () { + console.log('Server up and listening to port 3000'); +}), +io = require('socket.io').listen(server); + +// Middleware +app.set('views', path.join(__dirname, 'views')); +app.set('view engine', 'jade'); +app.use(express.logger()); +app.use(express.static(path.join(__dirname, 'public'))); + +// Route +app.get('/', function(req, res) { + res.render('index.jade'); +}); + +// Socket.IO +var connectedSockets = {}; + +io.sockets.on('connection', function (socket) { + + // Store Socket + connectedSockets[socket.id] = null; + + // Handle New User Registrations + socket.on('newUser', function(data) { + // Save username + connectedSockets[socket.id] = data.username; + // Broadcast to other nodes + socket.broadcast.emit('newUserJoined', data.username); + }); + + // Handle new message + socket.on('sendMessage', function(data) { + io.sockets.emit('resMessage', data); + }); + + // Handle disconnection + socket.on('disconnect', function() { + // Find username of this socket + var username = connectedSockets[socket.id]; + console.log('Socket disconnected: ' + username); + delete connectedSockets[socket.id]; + // Broadcast user left event to other connected nodes + socket.broadcast.emit('userLeft', username); + }); + +}); diff --git a/package.json b/package.json new file mode 100644 index 0000000..b57ef3d --- /dev/null +++ b/package.json @@ -0,0 +1,13 @@ +{ + "name": "application-name", + "version": "0.0.1", + "private": true, + "scripts": { + "start": "node app.js" + }, + "dependencies": { + "express": "3.4.8", + "jade": "*", + "socket.io": "~0.9.16" + } +} diff --git a/public/css/style.css b/public/css/style.css new file mode 100644 index 0000000..db9243a --- /dev/null +++ b/public/css/style.css @@ -0,0 +1,67 @@ +body { + background: black; + font: 18px "Lucida Grande", Helvetica, Arial, sans-serif; +} + +.login { + width: auto; + max-width: 900px; + margin: 0 auto; + padding: 25% 0; + text-align: center; +} +.login input, .login input:focus { + width: 350px; + background: black; + border: none; + border-bottom: 1px solid white; + text-align: center; + font-size: 24px; + cursor: pointer; + color: white; + outline: 0; +} +.chat { + display: none; +} +.messages { + width: auto; + min-height: 480px; + max-height: 480px; + max-width: 900px; + margin: 0 auto; + margin-top: 9%; + overflow-y: auto; + background: #E5E5E5; +} +.messages > div { + margin: 10px; +} + +.controls { + max-width: 900px; + margin: 0 auto; + margin-top: 10px; +} + +.controls > input { + width: 100%; + border: none; + line-height: 2; + font-size: 24px; + text-align: center; + background: #E5E5E5; +} + +.info { + text-align: center; + color: maroon; + font-style: oblique; +} + +.current-user > .name { + color: blueviolet; +} +.other-user > .name { + color: chocolate; +} \ No newline at end of file diff --git a/public/js/app.js b/public/js/app.js new file mode 100644 index 0000000..ae7b23a --- /dev/null +++ b/public/js/app.js @@ -0,0 +1,73 @@ +$(document).ready( function () { + // Initial Setup + var currentUser, socket = io.connect(); + $('#username').focus(); + + // Method to focus on last appended message + function focusLast() { + $('.messages').scrollTop($('.messages').height()); + } + + // Emit new user joined event to server + $('#username').on('keypress', function (e) { + if(e.which == 13) { + if($('#username').val() != '') { + currentUser = $('#username').val(); + + // Send new event to server + socket.emit('newUser', {username: currentUser}); + + $('.login').css('display', 'none'); + $('.chat').css('display', 'block'); + + var entryMessage = "
t |