Initial Commit

.gitignore

@@ -0,0 +1 @@
+node_modules/*

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`

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);
+  });
+
+});

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"
+  }
+}

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;
+}

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 = "<div class='info'><strong>You just joined the chat!</strong></div>";
+        $('.messages').append(entryMessage);
+
+        focusLast();
+        $('#newMessage').focus();
+      }
+    }
+  });
+
+  // Handle new user joined event
+  socket.on('newUserJoined', function(name) {
+    var newUser = "<div class='info'><strong>" + name + " joined the chat!</strong></div>";
+    $('.messages').append(newUser);
+  });
+
+  // Handles new message received
+  socket.on('resMessage', function(data) {
+    var sender = data.sender,
+    message = data.message,
+    className = (sender === currentUser) ? 'current-user' : 'other-user';
+
+    var newMessage = "<div class='" + className + "'><span class='name'>" + sender + "</span> : <span class='message'>" + message + "</span></div>";
+    $('.messages').append(newMessage);
+
+    focusLast();
+  });
+
+  // Emit new message event to server
+  $('#newMessage').on('keypress', function (e) {
+    if(e.which == 13) {
+      var message = $(this).val();
+      if( message != '') {
+        var messageObj = {
+          sender: currentUser,
+          message: message
+        };
+        socket.emit('sendMessage', messageObj);
+        $(this).val('');
+      }
+    }
+  });
+
+  // Handles user left event emitted by server
+  socket.on('userLeft', function(name) {
+    var userLeft = "<div class='info'><strong>" + name + " has left the chat!</strong></div>";
+    $('.messages').append(userLeft);
+    focusLast();
+  });
+
+
+});

routes/index.js

@@ -0,0 +1,8 @@
+
+/*
+ * GET home page.
+ */
+
+exports.index = function(req, res){
+  res.render('index', { title: 'Express' });
+};

routes/user.js

@@ -0,0 +1,8 @@
+
+/*
+ * GET users listing.
+ */
+
+exports.list = function(req, res){
+  res.send("respond with a resource");
+};

views/index.html

@@ -0,0 +1,20 @@
+<html>
+<head> 
+  <title>Chat app demo</title>
+  <link rel="stylesheet" href="css/style.css" type='text/css'>
+  <script src='js/jquery.min.js'></script>
+  <script src='socket.io/socket.io.js'></script>
+  <script src='js/app.js'></script>
+</head>
+<body>
+  <section>
+    <div class="login"><input type="text" id="username"></div>
+  </section>
+  <section>
+    <div class="messages"></div>
+    <div class="controls">
+      <input type="text" id="newMessage" placeholder='Enter your new message'>
+    </div>
+  </section>
+</body>
+</html>

views/index.jade

@@ -0,0 +1,15 @@
+doctype html
+html
+  head
+    title Chat App Demo
+    link(rel='stylesheet', href='css/style.css', type="text/css")
+    script(src="js/jquery.min.js")
+    script(src='/socket.io/socket.io.js')
+    script(src='js/app.js')
+  body
+    section.login
+      input(type='text' name='username' id='username' placeholder='Please enter your name')
+    section.chat
+      .messages
+      .controls
+        input#newMessage(type="text", name='New Message', placeholder="Type your new message here")