Node JS

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

Monday, March 18, 13

Whoami

Ynon Perek

http://ynonperek.com

[email protected]




mailto:[email protected]

mailto:[email protected]

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



Here It Is

GET data


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


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


What Is A Web Server

A program that “speaks” HTTP

Answer HTTP requests from clients


What Is A Web Server

APPLICATION CODE

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


Q & A


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


http://nodejs.org/api/http.html

http://nodejs.org/api/http.html

Node.JS BasicsModule 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 useconsole.log


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


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/


https://npmjs.org/

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


Q & A


Common Node

Working With Buffers

Command Line Arguments

Working With Files

Sending Email

Getting Data From Other Websites


Node Buffers

Buffer

Memory


JavaScript does not have native binary data type

Node adds the new type: Buffer

Node Buffers


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


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

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

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


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

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


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


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


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


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




Getting Data From Websites

Here It Is

GET data


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


http://graph.facebook.com/ynonp'

http://graph.facebook.com/ynonp'

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


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






Q & A


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


https://count.ly

https://count.ly

http://balloons.io

http://balloons.io

http://yummly.com

http://yummly.com

http://expressjs.com/applications.html

http://expressjs.com/applications.html

Express DemoSimple Static Server

var express = require('express');var app = express(); app.get('/', function(req, res) { res.send('Hello Wrold');}); 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




http://www.demo.com?op=add&x=5%5E

http://www.demo.com?op=add&x=5%5E

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


When Things Go Wrong

What should the server do ?

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


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

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

One Solution:Use URL Parameters

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




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


Another SolutionHandle 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 DataUse 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/


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

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


Q & A


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


http://api.wunderground.com/api/API_KEY/geolookup/q/37.776289,-122.395234.json




Express Middleware PipelineHow the middleware pipeline works for you


Sample Pipeline

FaviconRequest

Do you need a favicon ?

Yes - Here it is No - Next middleware

1

2

3 4


Sample Pipeline

loggerRequest

Write down the request to log

Next middleware

1

2

3


Sample Pipeline

RouterRequest

Is there a named route ?


1

2

3 4


Sample Pipeline

StaticRequest

Is there a matched public file ?


1

2

3 4


Sample Pipeline

ErrorRequest

Bye Bye

1

2

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


https://github.com/visionmedia/express/tree/master/examples/auth




Q & A


Thank You

Keynote and Extras: ynonperek.com

Photos From:

http://123rf.com

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


http://123rf.com

http://123rf.com





Technology

Node JS