Node JS

Welcome To The ServerWriting server-side APIs with Node.JS

Monday, March 18, 13

Whoami

Ynon Perek

http://ynonperek.com

ynon@ynonperek.com

Monday, March 18, 13

Agenda

Before You Build A Web Server

Node JavaScript and Concepts

Express Framework

Monday, March 18, 13

Before You Build A Server

What is the role of a web server ?

Monday, March 18, 13

Before You Build A Server

The web server connects multiple clients

The web server can aggregate data

The web server has more resources

Monday, March 18, 13

Before You Build A Server

Here It Is

GET data

Monday, March 18, 13

HTTP Protocol

Clients talk to web servers in a protocol called HTTP

HTTP is built around a request/response model

HTTP is text-based

Each message has headers and data

Monday, March 18, 13

HTTP Demo

HTTP Request Headers

GET / HTTP/1.1Host: ynonperek.comConnection: keep-aliveCache-Control: max-age=0User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_2) AppleWebKit/537.11 (KHTML, like Gecko) Chrome/23.0.1271.95 Safari/537.11Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8Accept-Encoding: gzip,deflate,sdchAccept-Language: en-US,en;q=0.8Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.3If-None-Match: "1354952510"If-Modified-Since: Sat, 08 Dec 2012 07:41:50 +0000

Monday, March 18, 13

HTTP Demo

HTTP Response Headers

HTTP/1.1 200 OKDate: Sat, 08 Dec 2012 07:41:57 GMTServer: Apache/2.2.16 (Debian)X-Powered-By: PHP/5.3.18-1~dotdeb.0Expires: Sun, 19 Nov 1978 05:00:00 GMTLast-Modified: Sat, 08 Dec 2012 07:41:57 +0000Cache-Control: no-cache, must-revalidate, post-check=0, pre-check=0ETag: "1354952517"Content-Language: enX-Generator: Drupal 7 (http://drupal.org)Vary: Accept-EncodingContent-Encoding: gzipContent-Length: 4482Keep-Alive: timeout=15, max=97Connection: Keep-AliveContent-Type: text/html; charset=utf-8

Monday, March 18, 13

What Is A Web Server

A program that “speaks” HTTP

Answer HTTP requests from clients

Monday, March 18, 13

What Is A Web Server

APPLICATION CODE

SERVER CODE

Monday, March 18, 13

Types of Web Servers

Generic web servers: Apache, Nginx, IIS

Language-specific servers: JBoss, Tomcat, Starman, Tornado, Event Machine, Thin

Monday, March 18, 13

Story Of Node.JS

Ryan Dahl wrote it as a tool to write web servers

Written in JS, and based on V8 engine

Started at 2009

Monday, March 18, 13

How To Build A Web Server

Take an existing skeleton

Color it any way you like

Enjoy

Monday, March 18, 13

Demo: Simple http server

var http = require('http'); var handler = function(request, response) {  response.write('RESISTANCE IS FUTILE');  response.end();}; var server = http.createServer( handler ); server.listen(8080);

Monday, March 18, 13

Q & A

Monday, March 18, 13

Lab: Getting Started

Write a Node server that sends your name to the browser

Write a Node server that returns the current time to the browser

Write a Node server that sends the requested url back to the browser

Use the docs: http://nodejs.org/api/http.html

Monday, March 18, 13

Node.JS BasicsModule Pattern and Package Management

Monday, March 18, 13

Agenda

Welcome To Node

The Global Object

The Module System

Node Packages

Common Node

Monday, March 18, 13

Welcome To Node

Install by downloading the installer from:

http://nodejs.org/download/

Recommended Reading:

http://www.nodebeginner.org/

Monday, March 18, 13

What’s Missing

No window

No document

No DOM

You can still useconsole.log

Monday, March 18, 13

Welcome To Node

Run a simple JavaScript file using

node hello.js

var x = 5;var y = 9; var z = x + y; console.log('5 + 9 = ' + z);

Monday, March 18, 13

Global Objects

In a browser, window is the global object and it is shared between all JS files

In Node, global object is defined per-file

It’s harder to pollute global namespace

Use other files with require

Monday, March 18, 13

Demo: Require

Monday, March 18, 13

Demo: Require

Load a file names twitter.js from current working directory

The file returns an object we can use

var t = require('./twitter.js'); t.tweet('I can has cheezburger');

Monday, March 18, 13

Demo: Require

Inside an included file, a special object named exports is provided, and returned to the caller.

exports.tweet = function( text ) {    console.log( text );}

Monday, March 18, 13

Advantages

Cleaner namespaces

Better code is now easier to write

Monday, March 18, 13

Node Package Management

Many modules are distributes online

There’s even an online list of available free modules you can use

There’s even a utility that automatically downloads modules from that repository

Monday, March 18, 13

A Node Package

A package is a collection of modules with a description JSON file

You can depend on a package for your application by specifying dependencies in your package.json file

Monday, March 18, 13

npm repository

Currently hosts ~25,000 packages

Search and browse online:

https://npmjs.org/

Monday, March 18, 13

Demo: Using a package

Monday, March 18, 13

Demo: package.json

{    "name" : "my-app",    "version" : "0.0.1",    "private" : true,    "dependencies" : {        "colors" : "*"    } }

Monday, March 18, 13

Demo: app.js

var colors = require('colors'); console.log('Good Morning'.blue);console.log('Hello World'.rainbow);

Monday, March 18, 13

Lab

Write a node module that provides the following functions:

sum(x, y, z, ... ) - returns the sum total of all numbers passed to it

longer_than( n, str1, str2, str3, ... ) - returns an array of all strings longer in length than number n

Write a test program that requires(...) for the module

Monday, March 18, 13

Q & A

Monday, March 18, 13

Common Node

Working With Buffers

Command Line Arguments

Working With Files

Sending Email

Getting Data From Other Websites

Monday, March 18, 13

Node Buffers

Buffer

Memory

Monday, March 18, 13

JavaScript does not have native binary data type

Node adds the new type: Buffer

Node Buffers

Monday, March 18, 13

Thumb Rule

String = Buffer + Encoding

Monday, March 18, 13

Working With Buffers

Construct a buffer with:

new Buffer( size )

new Buffer( array )

new Buffer( String, Encoding )

Monday, March 18, 13

Working With Buffers

Write data with:

buf.write( string, offset, length, encoding )

offset - where to start writing (default 0)

length - maximum length to write

encoding - defaults to utf8

Monday, March 18, 13

Working With Buffers

Convert a buffer to string with:

buf.toString( encoding, start, end )

default encoding is utf8

Monday, March 18, 13

Other Buffer Methods

buf.slice( start, end ): returns a new buffer for a memory slice. Data is shared.

buf.fill( value, offset, end ): fills a buffer with value.

API Docs: http://nodejs.org/api/buffer.html

Monday, March 18, 13

Use process.argv array to access all process arguments

Note the first two are: ‘node’ (process name)‘app.js’ (file name)

Command Line Arguments

console.dir( process.argv );

if ( process.argv.length === 7 ) { console.log('Bingo !');}

Monday, March 18, 13

Working With Files

All file operations have Sync and Async version

Sync blocks until the operation is done

ASync takes a callback

Monday, March 18, 13

Reading A File ASync

Use fs.readFile to read a file ASync

Default encoding is utf8, but you can pass another as the second argument

process.stdout.write prints data as-is

var fs = require('fs');

var filename = process.argv[2];fs.readFile( filename, function(err, data) { if ( err != null ) { console.log('Error: ' + err); process.exit(2); }

process.stdout.write( data );});

Callback

Monday, March 18, 13

Writing To A File ASync

use fs.writeFile to write data (String or Buffer) to a file

Node the execution order

var fs = require('fs');

var filename = 'output.txt';

fs.writeFile( filename, 'Hello World\n', function(err, data) { console.log('File Write Done'); });

console.log('Starting To Write To File');

Monday, March 18, 13

Read and Write Streams

Monday, March 18, 13

Read Stream

Events: readable, end, error, close(*)

Methods:

setEncoding(encoding)

pipe(destination)

Monday, March 18, 13

Read Stream Demo

var fs = require('fs'); var f1 = fs.createReadStream('f1.js');  f1.on('readable', function() {  var data = f1.read();  console.log( data.toString() );});

Monday, March 18, 13

Write Stream

Events: drain, error, close

Methods:

write( String or Buffer)

end( Optional String or Buffer)

Monday, March 18, 13

Example: Writing To Stream

Use fs.createWriteStream to create a writable stream

Use write(...) to append data

var fs = require('fs'); var out = fs.createWriteStream('output.txt'); out.write('Hello\n');out.write('-----\n\n');out.write('Node Streams are cool\n'); out.end();

Monday, March 18, 13

Lab

Write a node program that creates a new file and writes your name and home address inside. After writing, print out a message to the console.

Write a node program that takes two files as command line arguments, and copies the first to the second

Monday, March 18, 13

Sending Email

Use nodemailer to send emails from node.js app

Demo: https://github.com/andris9/Nodemailer/blob/master/examples/example_smtp.js

Monday, March 18, 13

Getting Data From Websites

Here It Is

GET data

Monday, March 18, 13

Node HTTP Requests

The request module implements an HTTP client

use request( options, callback ) to get the data

callback signature:

function( error, response, body ) { ... }

Monday, March 18, 13

Demo: Facebook Graph

var request = require('request'); request('http://graph.facebook.com/ynonp', function(err, response, body ) { var me = JSON.parse( body ); console.log( me.id );});

Monday, March 18, 13

Demo: Tweets About Israel

var request = require('request'); request('http://search.twitter.com/search.json?q=israel',

function(err, response, body ) {

var data = JSON.parse( body ); for ( var i=0; i < data.results.length; i++ ) { console.log('---'); console.log( data.results[i].from_user + ':' +

data.results[i].text );

}});

Monday, March 18, 13

Lab

YQL can help you find data online

Use the forecast at this URL:http://query.yahooapis.com/v1/public/yql?q=select%20item%20from%20weather.forecast%20where%20woeid%3D%221968212%22&format=json

and print out the temperatures in Celsius for today and tomorrow in Tel Aviv

Monday, March 18, 13

Q & A

Monday, March 18, 13

Express: Web Framework

Monday, March 18, 13

Express

A web framework is a package that helps you build your web application

Monday, March 18, 13

Express

It handles HTTP request/response and headers

It handles sessions

It handles errors

It serves static files

And more...

Monday, March 18, 13

Who Uses Express

http://geekli.st/

https://count.ly/

http://balloons.io/

http://yummly.com/

Full List: http://expressjs.com/applications.html

Monday, March 18, 13

Express DemoSimple Static Server

var express = require('express');var app = express();  app.get('/', function(req, res) {  res.send('Hello Wrold');}); app.listen(8080);

Monday, March 18, 13

Express Overview

Use require(‘express’) to get a reference to the express object

Use express() to get a reference to the express application object

Then configure routes with app.get(...) and app.post(...)

Monday, March 18, 13

Express Routes

A route handles incoming request

HTTP request methods:

OPTIONS, GET, POST,

PUT, DELETE, TRACE, CONNECT

Monday, March 18, 13

Express Routes

Each route takes a callback.

Keep your callbacks REAL FAST

While running a route handler, server is not available to handle other requests

app.get('/hello', function(req, res) {    res.send('Hello World');});

Monday, March 18, 13

Express Routes

You can also send files

app.get('/logo.png', function(req, res) {    res.sendfile('./public/images/logo.png');});

Monday, March 18, 13

Express Routes

Or complete JSON objects

express automatically sets content-type

app.get('/user.json', function(req, res) {    res.send({        username: 'amy',        password: 'tardis'    });});

Monday, March 18, 13

Request Parameters

A client can pass in extra parameters in the request

A GET request provides parameters after the URL

A POST request provides parameters in the body

Monday, March 18, 13

GET Parameters

If a URL is followed by a question mark (?), you can pass key/value paris separated by & to the server

Examples:

http://www.google.com/?q=javascript

http://www.demo.com?op=add&x=5&y=7

Monday, March 18, 13

Getting The Params In Node

You can access request parameters by using req.param function

Example:

app.get('/add', function(req, res) {    var x = Number( req.param('x') );    var y = Number( req.param('y') );     res.send({        'operation' : 'add',        'x' : x,        'y' : y,        'result' : x + y    });});

Monday, March 18, 13

When Things Go Wrong

What should the server do ?

GET http://mathserver.com/?x=5

Monday, March 18, 13

One Solution:Use URL Parameters

http://www.math.com/add/5/10/

Monday, March 18, 13

Getting URL Parameters

Node allows treating part of the URL as a parameter

This way no param is missing

app.get('/mul/:x/:y', function(req, res) {    var x = Number( req.param('x') );    var y = Number( req.param('y') );     res.send({        'operation' : 'add',        'x' : x,        'y' : y,        'result' : x * y    }); });

Monday, March 18, 13

Another SolutionHandle Errors with next()

Monday, March 18, 13

Express Routes

Use the 3-arguments route handler to report errors

third argument is a function:

If called with no arguments raises HTTP 404

If called with arguments raises HTTP 500

Don’t forget to return after using next()

Monday, March 18, 13

Express Routes

app.get('/user.json', function(req, res, next) {    var userid = req.param('id');    if ( userid == null ) {        next('Invalid User');        return;    }     res.send({ username: 'amy' });});

Monday, March 18, 13

Lab #1

Write an express web server that responds to the following routes:

GET /add - takes 2 params and returns their sum as a JSON object

GET /multiply - takes 2 params and returns their multiplication as a JSON object

GET /count - returns the total count of operations performed so far

Monday, March 18, 13

Lab #2

Write a “wall” server in express

POST /wall - adds a message to the wall

GET /wall - returns a JSON array with all messages

Write an HTML file with a form to test the POST request

Monday, March 18, 13

Getting The DataUse jQuery’s ajax calls from the client

Monday, March 18, 13

jQuery Functions

$.get - sends a get request to the server. Takes a url, optional data, success handler and data type.

$.post - sends a post request to the server. Takes a url, optional data, success handler and data type.

Monday, March 18, 13

get/post Examples

$.get(‘test.php’);

$.post(‘test.php’, { name : ‘john’, time: ‘2pm’ });

$.get(‘test.php’, function(data) { alert(data);});

Monday, March 18, 13

$.ajax

Gain full control over the request

Can handle errors

get/post are actually just shortcuts for this one

Takes url and settings object

Monday, March 18, 13

$.ajax Settings

error: error handler callback

success: success handler callback

context: the ‘this’ pointer of callbacks

data: data object to send

url: the url to use

Full docs: http://api.jquery.com/jQuery.ajax/

Monday, March 18, 13

Example: $.ajax

$.ajax({   type: "POST",   url: "some.php",   data: "name=John&location=Boston",   success: function(msg){     alert( "Data Saved: " + msg );   } });

Monday, March 18, 13

Demo: “live” wall with ajax

Monday, March 18, 13

Q & A

Monday, March 18, 13

Ajax: Lab 1

Add client GUI to the lab on page 44 (math server)

Allow sum/multiply and show the result

Every second, check number of actions performed and update the display

Monday, March 18, 13

Ajax: Lab 2

Create a weather application

Use Node.JS for server side.

Use wunderground to get weather report based on lat/long. URL:http://api.wunderground.com/api/API_KEY/geolookup/q/37.776289,-122.395234.json

App should show a picture of Sun or Rain based on current weather

Monday, March 18, 13

Express Middleware PipelineHow the middleware pipeline works for you

Monday, March 18, 13

Sample Pipeline

FaviconRequest

Do you need a favicon ?

Yes - Here it is No - Next middleware

1

2

3 4

Monday, March 18, 13

Sample Pipeline

loggerRequest

Write down the request to log

Next middleware

1

2

3

Monday, March 18, 13

Sample Pipeline

RouterRequest

Is there a named route ?

Yes - Here it is No - Next middleware

1

2

3 4

Monday, March 18, 13

Sample Pipeline

StaticRequest

Is there a matched public file ?

Yes - Here it is No - Next middleware

1

2

3 4

Monday, March 18, 13

Sample Pipeline

ErrorRequest

Bye Bye

1

2

3

Monday, March 18, 13

Error Handling In Pipeline

app.get('/user.json', function(req, res, next) {    var userid = req.param('id');    if ( userid == null ) {        return next('Invalid User');           }     res.send({ username: 'amy' });});

Monday, March 18, 13

Custom Express Middleware

Let’s write a simple middleware for returning visitors

If it’s the first visit, show a banner

If it’s a later visit, show another banner

Use jade for the template

Monday, March 18, 13

Lab

Write a cross domain ajax middleware

Add CORS to each response headers

Bonus: Initialize with source domains

Monday, March 18, 13

Other Middlewares

Authentication is performed by a middleware. Demo: https://github.com/visionmedia/express/tree/master/examples/auth

Static middleware will serve a static path

bodyParser automatically turns request body to an object

compress() automatically compresses responses

Monday, March 18, 13

Q & A

Monday, March 18, 13

Thank You

Keynote and Extras: ynonperek.com

Photos From:

http://123rf.com

http://www.flickr.com/photos/crazyeddie/1463295872/

Monday, March 18, 13