Node JS

Welcome To The Server
Writing server-side APIs with Node.JS

Monday, March 18, 13

Whoami

Ynon Perek

http://ynonperek.com

ynon@ynonperek.com


Agenda

Before You Build A Web Server

Node JavaScript and Concepts

Express Framework


Before You Build A Server

What is the role of a
web server ?



The web server connects multiple clients

The web server can aggregate data

The web server has more resources



GET data

Here It Is


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


HTTP Demo

HTTP Request Headers

GET / HTTP/1.1
Host: ynonperek.com
Connection: keep-alive
Cache-Control: max-age=0
User-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.11
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Encoding: gzip,deflate,sdch
Accept-Language: en-US,en;q=0.8
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.3
If-None-Match: "1354952510"
If-Modified-Since: Sat, 08 Dec 2012 07:41:50 +0000


HTTP Demo

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


What Is A Web Server

A program that
“speaks” HTTP

Answer HTTP requests
from clients


What Is A Web Server

SERVER CODE

APPLICATION
CODE


Types of Web Servers

Generic web servers:
Apache, Nginx, IIS

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


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


How To Build A Web Server

Take an existing
skeleton

Color it any way you
like

Enjoy


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


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


Node.JS Basics
Module Pattern and Package Management


Agenda

Welcome To Node

The Global Object

The Module System

Node Packages

Common Node


Welcome To Node

Install by downloading the installer from:

http://nodejs.org/download/

Recommended Reading:

http://www.nodebeginner.org/


What’s Missing

No window

No document

No DOM

You can still use
console.log


Welcome To Node

var x = 5;
Run a simple JavaScript var y = 9;
file using
var z = x + y;
node hello.js
console.log('5 + 9 = ' + z);


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


Demo: Require


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');


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


Advantages

Cleaner namespaces

Better code is now easier to write


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


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


npm repository

Currently hosts ~25,000 packages

Search and browse online:

https://npmjs.org/


Demo: Using a package


Demo: package.json

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

}


Demo: app.js

var colors = require('colors');

console.log('Good Morning'.blue);
console.log('Hello World'.rainbow);


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


Common Node

Working With Buffers

Command Line Arguments

Working With Files

Sending Email

Getting Data From Other Websites


Node Buffers

Memory

Buffer


Node Buffers

JavaScript does not have native binary data type

Node adds the new type: Buffer


Thumb Rule

String = Buffer + Encoding



Construct a buffer with:

new Buffer( size )

new Buffer( array )

new Buffer( String, Encoding )



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



Convert a buffer to string with:

buf.toString( encoding, start, end )

default encoding is utf8


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


Command Line Arguments

Use process.argv array console.dir( process.argv );
to access all process
arguments if ( process.argv.length === 7 )
{
Note the first two are: console.log('Bingo !');
‘node’ (process name) }
‘app.js’ (file name)


Working With Files

All file operations have Sync and Async version

Sync blocks until the operation is done

ASync takes a callback


Reading A File ASync

Callback
Use fs.readFile to read var fs = require('fs');
a file ASync
var filename = process.argv[2];
fs.readFile( filename, function(err, data) {
Default encoding is if ( err != null ) {
utf8, but you can pass console.log('Error: ' + err);
another as the second process.exit(2);
}
argument
process.stdout.write( data );
process.stdout.write });

prints data as-is


Writing To A File ASync

var fs = require('fs');

use fs.writeFile to write var filename = 'output.txt';
data (String or Buffer)
fs.writeFile( filename, 'Hello Worldn',
to a file function(err, data) {
console.log('File Write Done');
Node the execution });

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


Read and Write Streams


Read Stream

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

Methods:

setEncoding(encoding)

pipe(destination)


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


Write Stream

Events: drain, error, close

Methods:

write( String or Buffer)

end( Optional String or Buffer)


Example: Writing To Stream

Use var fs = require('fs');

fs.createWriteStream var out =
fs.createWriteStream('output.txt');
to create a writable
stream out.write('Hellon');
out.write('-----nn');
out.write('Node Streams are cooln');
Use write(...) to
out.end();
append data


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


Sending Email

Use nodemailer to send emails from node.js app

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


Getting Data From Websites

GET data

Here It Is


Node HTTP Requests

The request module implements an HTTP client

use request( options, callback ) to get the data

callback signature:

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


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


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

}
});


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


Express: Web
Framework


Express

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


Express

It handles HTTP
request/response and
headers

It handles sessions

It handles errors

It serves static files

And more...


Who Uses Express

http://geekli.st/

https://count.ly/

http://balloons.io/

http://yummly.com/

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


var express = require('express');
var app = express();

Express Demo app.get('/', function(req, res) {
res.send('Hello Wrold');
});
Simple Static Server
app.listen(8080);


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(...)


Express Routes

A route handles incoming request

HTTP request methods:

OPTIONS, GET, POST,

PUT, DELETE, TRACE, CONNECT


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


Express Routes

You can also send files

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


Express Routes

Or complete JSON objects

express automatically sets content-type

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


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


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


Getting The Params In Node

app.get('/add', function(req, res) {
var x = Number( req.param('x') );
You can access var y = Number( req.param('y') );
request
parameters by res.send({
using req.param 'operation' : 'add',
function 'x' : x,
'y' : y,
Example: 'result' : x + y
});
});


When Things Go Wrong

What should the server do ?

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


One Solution:
Use URL Parameters

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


Getting URL Parameters

app.get('/mul/:x/:y', function(req, res) {
var x = Number( req.param('x') );
var y = Number( req.param('y') );
Node allows

treating part of
res.send({
the URL as a
'operation' : 'add',
parameter 'x' : x,
'y' : y,
This way no 'result' : x * y
param is });
missing
});


Another Solution
Handle Errors with next()


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()


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


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


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


Getting The Data
Use jQuery’s ajax calls from the client


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.


get/post Examples

$.get(‘test.php’);

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

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


$.ajax

Gain full control over the request

Can handle errors

get/post are actually just shortcuts for this one

Takes url and settings object


$.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/


Example: $.ajax

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


Demo: “live” wall with
ajax


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


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


Express
Middleware
Pipeline
How the middleware pipeline
works for you


Sample Pipeline

1
Request Favicon
2
Do you need a favicon ?
3 4

Yes - Here it is No - Next middleware


Sample Pipeline

1
Request logger
2
Write down the request to log
3

Next middleware


Sample Pipeline

1
Request Router
2
Is there a named route ?
3 4



Sample Pipeline

1
Request Static
2
Is there a matched public file ?
3 4



Sample Pipeline

1
Request Error
2
Bye Bye
3


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


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


Lab

Write a cross domain ajax middleware

Add CORS to each response headers

Bonus: Initialize with source domains


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


Thank You

Keynote and Extras: ynonperek.com

Photos From:

http://123rf.com

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


Node JS

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to Node JS (20)

More from Ynon Perek (20)

Recently uploaded (20)

Node JS