Modern Web Applications – Node.JS – Socket.IO



Modern Web Applications – Node.JS – Socket.IO

0 1


modern-web-apps

Presentation about Modern Web-Apps with Node.JS, Socket.IO and MongoDB held at Computer Science Club @Jacobs University Bremen

On Github dkundel / modern-web-apps

Modern Web Applications

Node.JS, Socket.IO, MongoDB

Created by Dominik Kundel / @dkundel

Overview

The technologies

The Server -> Node.JS The Communication -> Socket.IO The Data -> MongoDB

Hands On

Time to apply our knowledge by building a small demo application :)

Node.JS

Why Node.JS?

  • The Power of V8
  • Asynchronus nature
  • More than just for HTTP server
  • Node Package Manager (NPM)

What is NPM?

  • A fast and easy way to install dependencies
$> npm install socket.io
  • Dependency management
  • Install command line tools
$> npm install grunt-cli -g
  • Shipped with Node.JS

What is Node.JS?

  • Makes use of the power of JavaScript (or CoffeeScript)
  • Adds the notion of modules
  • Offers a set of standard modules
    • TCP connection
    • HTTP(S) servers
    • Standard (File) IO operations
    • Ability to write C/C++ addons/modules
  • Offers all tools to write command-line tools

How to set up a small TCP echo server

// file server.js
var net = require('net');

var server = net.createServer(function (socket) {
  socket.pipe(socket);
});

server.listen(1337, '127.0.0.1');

Run script:

$> node server.js

How to define a module

// file connection
module.exports.handle = function (socket) {
    socket.pipe(socket);
};

How to use a module

// file server.js
var net = require('net');
var Connection = require('./connection')

var server = net.createServer(Connection.handle);

server.listen(1337, '127.0.0.1');

package.json the place to manage your dependencies

{
  "name": "openjub-api",
  "version": "0.0.1",
  "description": "Building great tools for Jacobs University Bremen",
  "main": "server.js",
  "repository": {
    "type": "git",
    "url": "git://github.com/OpenJUB/openjub-api.git"
  },
  "keywords": [
    "Jacobs",
    "University",
    "OpenJUB"
  ],
  "author": "Dominik Kundel ",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/OpenJUB/openjub-api/issues"
  },
  "homepage": "https://github.com/OpenJUB/openjub-api",
  "apidocFilename": "API.md",
  "dependencies": {
    "mongoose": "~3.8.7",
    "express": "~3.4.8",
    "mongodb": "~1.3.23",
    // ...
    "prompt": "~0.2.12",
    "request": "^2.34.0"
  },
  "devDependencies": {
    "grunt": "~0.4.2",
    "grunt-contrib-clean": "~0.5.0",
    // ...
    "grunt-apidoc": "~0.3.0"
  }
}

Install depencies:

$> npm install

Socket.IO

Communication between Client & Server

Standard GET/POST requests AJAX WebSockets

Why WebSockets

  • 'Non-Linear' communication
  • Fast (minimal overhead)
  • Event driven

Why Socket.IO

  • WebSockets are not too standardized
  • Same code for Front-End and Back-End

How to Install Socket.IO

$> npm install socket.io

How to Setup a Socket.IO server

// file server.js
var app = require('http').createServer(handler)
  , io = require('socket.io').listen(app)
  , fs = require('fs')

app.listen(80);

function handler (req, res) {
  fs.readFile(__dirname + '/index.html',
  function (err, data) {
    if (err) {
      res.writeHead(500);
      return res.end('Error loading index.html');
    }

    res.writeHead(200);
    res.end(data);
  });
}

io.sockets.on('connection', function (socket) {
  socket.emit('news', { hello: 'world' });
  socket.on('my other event', function (data) {
    console.log(data);
  });
});

Run:

$> node server.js

How to Setup a Socket.IO client

// put this as a script block into your index.html
// include before "/socket.io/socket.io.js"
var socket = io.connect('http://localhost');
socket.on('news', function (data) {
  console.log(data);
  socket.emit('my other event', { my: 'data' });
});

MongoDB

What is MongoDB

  • NoSQL database
  • document-oritented storage
  • documents instead of rows
  • fields instead of columns

Why NoSQL and MongoDB

  • NoSQL DBs are flexible
  • data format got harder to predict
  • MongoDB is designed for large data
  • Offers an easy way to replicate and distribute the data
  • JavaScript like syntax

Command Line Time!

Let's Code!

Install Express.JS:

$> npm install -g express

Create the Project

$> express --session awesomeApp
$> cd awesomeApp
$> npm install

Install Modules

$> npm install mongodb mongoose socket.io --save

Run the Server

$> node app.js

Resources

Coming soon...

Thank You!