Upload
volien
View
215
Download
0
Embed Size (px)
Citation preview
M4201 Javascript Technologies
NodeJS
Jérôme Landré & Fabrice Meuzeret
DUT Métiers du Multimédia et de l'InternetI.U.T. de Troyes
Université de Reims Champagne-Ardenne
2
Overview
I- A video to begin with…
II- Introduction to Node.js
III- Blocking vs. Non-blocking code
IV- First example with Node.js
V- Web pages with Node.js
VI- Routes with Node.js
VII- MEAN
VIII- Interactions MySQL/Node.js
IX- Interactions AngularJS/Node.js
4
Node.js● There exist many video resources to learn
Node.js on YouTube● Among them, The codeSchool course on
Node.js is excellent:
https://www.youtube.com/watch?v=GJmFG4ffJZU
6
Introduction to Node.js● Node.js allows to create non-blocking network
applications on the server-side● Node.js uses javascript
● Node.js is not:– A web framework
– For beginners (low-level)
– Multi-thread
Node.jsGoogle Chrome
V8 JavaScript Runtime Quick because written in C !
11
Print a file● Blocking code:
read the file, "fill" the content variable
print "content"
do something else
12
Print a file● Blocking code:
read the file, "fill" the content variable
print "content"
do something else
13
Print a file● Blocking code:
read the file, "fill" the content variable
print "content"
do something else
14
Print a file● Blocking code:
read the file, "fill" the content variable
print "content"
do something else
15
Print a file● Blocking code:
read the file, "fill" the content variable
print "content"
do something else
● Non-blocking code:read the file
when it's done, print "content"
do something else
16
Print a file● Blocking code:
read the file, "fill" the content variable
print "content"
do something else
● Non-blocking code:read the file
when it's done, print "content"
do something else
17
Print a file● Blocking code:
read the file, "fill" the content variable
print "content"
do something else
● Non-blocking code:read the file
when it's done, print "content"
do something else
18
Print a file● Blocking code:
read the file, "fill" the content variable
print "content"
do something else
● Non-blocking code:read the file
when it's done, print "content"
do something else
"callback" function(event programming)
19
In Javascript:● Blocking code:
var content = fs.readFileSync('/tmp/toto.txt');
console.log(content);
console.log('Do something else');
● Non-blocking code:fs.readFile('/tmp/toto.txt', function(err, content) {
console.log(content);
});
console.log('Do something else');"callback" function
(event programming)
20
In Javascript:● Blocking code:
var content = fs.readFileSync('/tmp/toto.txt');
console.log(content);
console.log('Do something else');
● Non-blocking code:fs.readFile('/tmp/toto.txt', function(err, content) {
console.log(content);
});
console.log('Do something else');
21
In Javascript:● Non-blocking code:
fs.readFile('/tmp/toto.txt', function(err, content) {
console.log(content);
});
console.log('Do something else');
● Non-blocking code with a function as a variable:var callback = function(err, content) {
console.log(content);
};
fs.readFile('/tmp/toto.txt', callback);
console.log('Do something else');
"callback" function(event programming)
22
In Javascript:● Non-blocking code:
fs.readFile('/tmp/toto.txt', function(err, content) {
console.log(content);
});
console.log('Do something else');
● Non-blocking code with a function as a variable:var callback = function(err, content) {
console.log(content);
};
fs.readFile('/tmp/toto.txt', callback);
console.log('Do something else');
"callback" function(event programming)
"callback" functionas a variable
(event programming)
24
Hello World!var http = require('http');
http.createServer(function(request, response) {response.writeHead(200);response.write("Hello World!");response.end();
}).listen(8080);
console.log('Listening on port 8080...');
node
01.js
25
Hello World!var http = require('http');
http.createServer(function(request, response) {response.writeHead(200);response.write("Hello World!");response.end();
}).listen(8080);
console.log('Listening on port 8080...');
node
01.js
26
Hello World!var http = require('http');
http.createServer(function(request, response) {response.writeHead(200);response.write("Hello World!");response.end();
}).listen(8080);
console.log('Listening on port 8080...');
node
01.js
30
Hello World! (web)var http = require('http');
http.createServer(function(request, response) {response.writeHead(200, {'Content-Type':'text/html'});response.write("<p>Hello <em>World</em>!</p>");response.end();
}).listen(8080);
console.log('Listening on port 8080...');
node
02.js
32
Hello World! (web)var http = require('http');http.createServer(function(request, response) {
response.writeHead(200, {'Content-Type':'text/html'});response.write("<!DOCTYPE html>\n"+"<html lang='en'>\n<head>"+
"<meta charset=\"utf-8\" /></head>\n"+"<body>\n<p>Hello <em>World</em>!</p>\n</body>\n"+"</html>");response.end();
}).listen(8080);console.log('Listening on port 8080...');
node
03.js
33
Hello World! (web)var http = require('http');http.createServer(function(request, response) {
response.writeHead(200, {'Content-Type':'text/html'});response.write("<!DOCTYPE html>\n"+"<html lang='en'>\n<head>"+
"<meta charset=\"utf-8\" /></head>\n"+"<body>\n<p>Hello <em>World</em>!</p>\n</body>\n"+"</html>");response.end();
}).listen(8080);console.log('Listening on port 8080...');
node
02.js
35
Routes with Node.js● The "url" module permits to analyse data from the
URL
var url = require('url');
…
var page = url.parse(request.url).pathname;
if (page=='home') {
console.log('Page home!');
}
if (page=='details') {
console.log('Page details!');
}
36
Routes with Node.js● To get parameters passed with the GET
method (in the URL), we can use the "querystring" module:
var querystring = require('querystring');
var params = querystring.parse(url.parse(request.url).query)
if ('firstName' in params) {
console.log('Your firstName: '+params['firstName']);
}
38
MEAN● MEAN stands for MongoDB, Express, Angular,
Node.js● It is a set of tools to develop web applications● Some interesting sites (among others):
http://meanjs.org, http://mean.io● (We can replace MongoDB by MySQL)
40
Interactions MySQL/Node.js● Node.js is able to communicate with MySQL
(module 'sql')● We start with the database of teachers:
41
var express = require("express");var mysql = require("mysql");
var app = express();
var connexion = mysql.createConnection({ host : "localhost", user : "root", password : "", database : "testnode"});
connexion.connect(function(error){ if(error) { console.log("Problem with MySQL : "+error); } else { console.log("Connection to database OK..."); }});...
mea
n.jsmean.js
42
app.get('/', function(req, res) { res.end('<p>Bienvenue !</p>');});/* Launching request and getting response in a JSON variable */app.get('/charge',function(req, res){ connexion.query("SELECT * FROM personnes", function(error,rows){ if (error) { console.log("Problem with MySQL : "+error); connexion.end(); } else { res.end(JSON.stringify(rows)); } });});/* Starting the server */app.listen(3000, function(){ console.log("Server started on port 3000...");});
mea
n.jsmean.js
44
<!doctype html><html lang="fr" ng-app="appliEnseignants">
<head> <meta charset="utf-8" /><title>Les enseignants du département</title><script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script><script src="enseignants_module.js"></script><link rel="stylesheet" type="text/css" href="style.css">
</head> <body>
<header> <h1>Les enseignants du département</h1></header><div class="page">
<div class="principal"><div ng-controller="EnseignantsController">
<p ng-repeat="enseignant in enseignants"> <span>{{enseignant.prenom}}{{enseignant.nom}}</span><br /> <span>{{enseignant.age}} ans.</span><br /> </p></div>
</div></div><footer>MMI3 - IUT de Troyes</footer>
</body></html>
teachers.html
45
var app=angular.module('appliEnseignants',[ ]);
app.controller('EnseignantsController',['$scope', '$http', function ($scope, $http) { $http.get('http://localhost:3000/charge') .success(function(data){ $scope.enseignants=data; });
}]);
enseignants_module.js
46
Security problem
● Security problem:Une demande multi-origines (Cross-Origin Request) a été bloquée : la politique « Same Origin » ne permet pas de consulter la ressource distante située sur http://localhost:3000/charge. Ceci peut être corrigé en déplaçant la ressource sur le même domaine ou en activant CORS.
47
Security problem
● Security problem:Une demande multi-origines (Cross-Origin Request) a été bloquée : la politique « Same Origin » ne permet pas de consulter la ressource distante située sur http://localhost:3000/charge. Ceci peut être corrigé en déplaçant la ressource sur le même domaine ou en activant CORS.
res.setHeader('Access-Control-Allow-Origin', '*');
res.setHeader('Access-Control-Allow-Methods', 'PUT, GET, POST, DELETE, OPTIONS, PATCH');
res.setHeader('Access-Control-Allow-Headers', 'origin, x-requested-with, content-type');
51
1) Les modules de NodeJS● NodeJS permet d'importer des « modules »● C'est la fonction require() qui permet de les
charger● Exemple :
var url = require('url');
var http = require('http');
● Les modules contiennent des fonctions facilitant la programmation
● C'est l'utilitaire npm (Node Package Manager) qui permet de gérer les modules de NodeJS
52
2) Chercher des modules● Pour chercher un module, on utilise l'instruction
npm search suivie du nom du module à rechercher
● Exemple :
53
3) Installer un module● Pour installer un module, on utilise l'instruction
npm install suivie du nom du module à installer● Exemple :
55
4) Mettre à jour les modules● Pour mettre à jour les modules, on utilise
l'instruction npm update
56
5) Créer un module● Pour créer un module, on crée des fonctions
Node.js dans un fichier module, on les exporte afin qu'elles soient visibles
● On importe le fichier dans une application et on peut utiliser les fonctions du module
57
5) Créer un module● Module « mon_module.js » :
● Fichier de test « testmodule.js » :
var arriver=function() {console.log("Coucou, je suis arrivé !");
}
var partir=function() {console.log("Je rentre à la maison !");
}
exports.arriver = arriver;exports.partir = partir;
var monmodule=require('./mon_module.js');
monmodule.arriver();monmodule.partir();
59
6) Créer son module● Afin de gérer les dépendances de ses modules,
on va créer un fichier « package.json » dans le répertoire de notre module
● Ce fichier va servir à gérer les modules dont dépend notre application Node.js
{"name":"monappli","version":"0.1.2","dependencies": {
"http":"~4","url":"~0.10"
}}
60
Exercice :● 1) Ecrire et tester le module « mon_module.js »
présenté dans les pages précédentes● 2) Ajouter une fonction « moyenne » qui calcule
la moyenne de deux nombres passés en paramètres et qui affiche le résultat dans la console. Tester votre nouvelle fonction.
62
1) Le module « express »● « express » est un module qui fournit un
framework simple pour créer des applications Node.js plus facilement
● Installer le module express avec la commande npm
63
2) Les routes avec « express »● On va créer des routes facilement avec
express :var express = require('express');var app = express(); app.get('/', function (req, res) { res.send('Hello World !');})app.get('/route1', function (req, res) { res.send('Route 1 !');})app.get('/route2', function (req, res) { res.send('Route 2 !');})app.use(function(req,res,next) {
res.setHeader("Content-type","text/html");res.send(404, "Page introuvable !");
})app.listen(3000);
express1.js
64
2) Les routes avec « express »● On peut aussi écrire tout à la suite :
var express = require('express');var app = express(); app.get('/', function (req, res) { res.send('Hello World !');}).get('/route1', function (req, res) { res.send('Route 1 !');}).get('/route2', function (req, res) { res.send('Route 2 !');}).use(function(req,res,next) {
res.setHeader("Content-type","text/html");res.send(404, "Page introuvable !");
})app.listen(3000);
express2.js
65
2) Les routes paramétrées● On peut aussi paramétrer facilement les
routes :var express = require('express');var app = express(); app.get('/', function (req, res) { res.send('Hello World !');})app.get('/route:numroute', function (req, res) { res.send('Route '+req.params.numroute+' !');})app.use(function(req,res,next) {
res.setHeader("Content-type","text/html");res.send(404, "Page introuvable !");
})app.listen(3000);
express3.js
66
Exercice :● 1) Tester les exemples précédents● 2) Ajouter une route « /age/:val » dans
laquelle :val est la valeur de l'age et afficher « Votre age est : » suivi de cette valeur à l'écran lors de l'appel à cette route
68
1) le module mysql● a) Créer une base de données « testnode »● b) Créer une table « personnes » avec
phpMyAdmin :
● c) Remplir la table :
69
2) Interroger les données● On se connecte à la base et on définit la
requête :
var mysql = require('mysql');
var mySqlClient = mysql.createConnection({ host : "localhost", user : "root", password : "", database : "testnode", port : "3306"});
var selectQuery = 'SELECT * FROM personnes';...
connexion1.js
Attention, pour les utilisateurs de MAMP : port : "8889" et password : "root" !
70
2) Interroger les données● Lancer la requête et récupérer les résultats :
…mySqlClient.query( selectQuery, function select(error, results, fields) { if (error) { console.log(error); mySqlClient.end(); return; } if ( results.length > 0 ) { var firstResult = results[ 0 ]; console.log('numero : ' + firstResult['numero']); console.log('nom : ' + firstResult['nom']); console.log('prenom : ' + firstResult['prenom']); console.log('age : ' + firstResult['age']); } else { console.log("Pas de données"); } mySqlClient.end(); });
connexion1.js(suite)
72
Exercice :● 1) Créer la base, la table, les données dans un
MySQL local (WAMP, MAMP, LAMP)● 2) Tester l'exemple d'utilisation du module
mysql précédent
73
Exercice :● 1) Créer la base, la table, les données dans un
MySQL local (WAMP, MAMP, LAMP)● 2) Tester l'exemple d'utilisation du module
mysql précédent
● 3) Ajouter une boucle pour afficher TOUS les résultats
Problème : ça ne sort que le premier résultat !
74
3) Récupérer toutes les données● On va utiliser des évènements :
var mysql = require('mysql');
var mySqlClient = mysql.createConnection({ host:"localhost", user:"root", password:"",database:"testnode"});
var selectQuery = 'SELECT * FROM personnes'; var sqlQuery = mySqlClient.query(selectQuery); sqlQuery.on("result", function(row) { console.log('nom : ' + row.nom);}); sqlQuery.on("end", function() { mySqlClient.end();}); sqlQuery.on("error", function(error) { console.log(error);});
connexion2.js
75
Exercice :● 1) Tester le programme précédent● 2) Modifier et tester ce programme pour qu'il
affiche toutes les informations sur les utilisateurs : numéro, nom, prénom et age
76
4) Inclure la requête dans une route● On veut appeler la requête depuis une route
Node.js :var express = require('express');var app = express(); app.get('/', function (req, res) { res.send('Bienvenue !');})app.get('/select', function (req, res) { ... res.send(...);})app.use(function(req,res,next) {
res.setHeader("Content-type","text/html");res.send(404, "Erreur 404 : page introuvable !");
})app.listen(3000);
connexion3.js
77
Exercice :● 1) Créer une route '/select' qui lance la requête
précédente (version page 5 sans les évènements)
● 2) Tester votre programme