CS Club Tutorial Node.JS, MongoDB and Socket.IO

README.md

Overview

We will build a small web application to learn how to use the different technologies. For that we need to install some requirements:

Installation

Node.JS

Node.JS is cross-platform available. You can easily install it for any operating system by downloading the correct version here: http://nodejs.org/

Most package manager offer a way to install Node.JS but you should go to the website to install it from there :)

MongoDB

MongoDB comes in pre-compiled versions for almost all platforms. Just go to http://www.mongodb.org/downloads and download the respective binaries there. Unzip the file to a directory such as ~/MongoDB/ and make sure to add the path ~/MongoDB/bin to your PATH or create symbolic links using ln -s in a folder that is already in your PATH such as /usr/local/bin.

Alternatively you can use any package manager. However I recommend you to use the latest version of MongoDB and they are sometimes not available in the package managers. So rather try to get 2.6.0-rc2 from the official page.

Global Node packages

We will use Express.JS as a web server so we need to install it using the Node Package Manager (NPM) that we installed with Node.JS. So just open your favorite shell and run:

  $> npm install -g express

We will install all other necessary modules in the project locally.

index.jade

extends layout

block content
  h1= title
  p Welcome to #{title}

block inputarea
  form#newMessage.form-horizontal
    .form-group
    label.col-sm-2.control-label(for="userInput") User
    .col-sm-4
      input(placeholder="Username")#userInput.form-control
    .form-group
    label.col-sm-2.control-label(for="messageInput") Message
    .col-sm-10
      input(placeholder="Write Message")#messageInput.form-control
    .col-sm-12
      input(type="submit").btn.btn-sm.btn-default.btn-block

block messages
  #messages

layout.jade

doctype html
html
  head
    title= title
    link(href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css", rel="stylesheet")
    link(rel='stylesheet', href='/stylesheets/style.css')
    script(src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js")
    script(src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js")  
    script(src="/socket.io/socket.io.js")
    script(src="/javascripts/main.js")
  body
    .container
        block content
        block inputarea
        block messages

main.js

var $messages;

function template (data) {
  var html = '';
  html += '<div class="msg"><h4>';
  html += data.author;
  html += '</h4><p>';
  html += data.body;
  html += '</p></div>';

  return html;
};

function updateMsg (data) {
  $messages.prepend(template(data));
};

function initMsg (data) {
  for (var i = 0; i < data.length; i++) {
    $messages.append(template(data));
  }
};

jQuery(function() {
  $messages = $('#messages');

  var socket = io.connect(location.protocol+"//"+location.hostname+((location.port == "")?"":":"+location.port));

  socket.on('update:msg', updateMsg);
  socket.on('messages', initMsg);

  $('#newMessage').submit(function (event) {
    var author = $('#userInput').val();
    var body = $('#messageInput').val();
    var msg = {
      author: author,
      body: body
    };

    if (author.length === 0 || body.length === 0) {
      event.preventDefault();
      return;
    }

    socket.emit('create:msg', msg);

    event.preventDefault();
  });
});

style.css

#messages {
  margin-top: 8em;
  padding: 2rem;
  background: #eee;
}

#newMessage input[type="submit"] {
  margin-top: 1rem;
}

.msg {
  border-bottom: 1px solid darkgrey;
}

.msg h4 {

}

.msg p {

}

The non-hardcoded version of connecting to the socket.io server.

var socket = io.connect(location.protocol+"//"+location.hostname+((location.port == "")?"":":"+location.port));