Node JS
-
Upload
ynon-perek -
Category
Technology
-
view
5.276 -
download
3
description
Transcript of Node JS
Welcome To The ServerWriting server-side APIs with Node.JS
Monday, March 18, 13
Whoami
Ynon Perek
http://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