M4201 Javascript Technologies - JLjerome.landre.pagesperso-orange.fr/docs/mmi3/m4201-cm2.pdf · M4201 Javascript Technologies ... III- Blocking vs. Non-blocking code IV- First example

M4201 Javascript Technologies

NodeJS

Jérôme Landré

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- Building applications with Node.js

VIII - MEAN

IX- Interactions MySQL/Node.js

X- Interactions Vue.js/Node.js

3

I- A video to begin with...

4

Node.js● Many video resources exist to learn Node.js on

YouTube● Among them, the codeSchool course on

Node.js is excellent:

https://www.youtube.com/watch?v=GJmFG4ffJZU

https://www.youtube.com/watch?v=GJmFG4ffJZU

5

II- Introduction to Node.js

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 !

7

Node.js

8

Node.jsC:\Program Files\nodejs\

You

MUST

kno

w w

he

re N

ode

.js is

inst

alle

d!

9

10

11

III- Blocking vs. Non-blocking Code

12

Print a file● Blocking code:

read the file, "fill" the content variable

print "content"

do something else

13



print "content"

do something else

14



print "content"

do something else

15



print "content"

do something else

16



print "content"

do something else

● Non-blocking code:read the file

when it's done, print "content"

do something else

17



print "content"

do something else



do something else

18



print "content"

do something else



do something else

19



print "content"

do something else



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('Do something else');"callback" function

(event programming)

21

In Javascript:● Blocking code:

var content = fs.readFileSync('/tmp/toto.txt');



● Non-blocking code:fs.readFile('/tmp/toto.txt', function(err, content) {


});


22

In Javascript:● Non-blocking code:

fs.readFile('/tmp/toto.txt', function(err, content) {


});


● Non-blocking code with a function as a variable:var callback = function(err, content) {


};

fs.readFile('/tmp/toto.txt', callback);



23

In Javascript:● Non-blocking code:

fs.readFile('/tmp/toto.txt', function(err, content) {


});


● Non-blocking code with a function as a variable:var callback = function(err, content) {


};

fs.readFile('/tmp/toto.txt', callback);



"callback" functionas a variable

(event programming)

24

IV- First example with Node.js

25

Hello World!

var http = require('http'); // loads a library

http.createServer(function(request, response) {response.writeHead(200);response.write("Hello World!");response.end();

}).listen(8080); // creates the server ans listen on port 8080

console.log('Listening on port 8080...');

node

01.js

C:\Users\jland\Dropbox\travail-2017-2018\ens-2017-2018\2018\m4201\code\node01.js

26

Hello World!var http = require('http');


}).listen(8080);


node

01.js

27

Hello World!var http = require('http');


}).listen(8080);


node

01.js

28

Hello World!

29

Hello World!

Problem: it is not a web page!

30

V- Web pages with Node.js

31

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


node

02.js

32

Hello World! (web)

It's betterBUT

still not a web page!

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

03.js

34

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

VI- Routes with Node.js

36

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

}

37

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

VII- Building applications with Node.js

39

Building applications with Node.js● Node.js is not only a web langage● You can also build local applications● A famous example is Browsersync

https://browsersync.io/

40

Browsersync.io● Browsersync is a very interesting tool to

develop websites● It synchronizes files changes and your browser

(no more F5 to press)

41

Browsersync.io● To install Browsersync, you need to install Node.js, to

run a command window and to launch the command: npm install -g browser-sync

42

Browsersync.io● Suppose we have a website directory "site" containing

these files and subdirectories:

● We can run browsersync to view changes in the browser

43

Browsersync.io● Go to the "site" directory● Run: browser-sync start -s -f="**/*"

● This command starts a web browser that synchronizes any change made on any file on the browser view!

44

Browsersync.io

45

Browsersync.io

46

Browsersync.io

47

Browsersync.io

48

Browsersync.io● Browsersync activities can be seen on port 3001:

49

VIII- MEAN

50

MEAN● MEAN stands for MongoDB, Express,

AngularJS, Node.js● It is a set of tools to develop web applications● Some interesting sites (among others):

http://meanjs.org, http://mean.io● (We will replace MongoDB by MySQL and

AngularJS by Vue.js : MEVN)

http://meanjs.org/

http://mean.io/

51

IX- Interactions MySQL/Node.js

52

Interactions MySQL/Node.js● Node.js is able to communicate with MySQL

(module 'sql')● We start with the database of teachers:

53

var express = require("express");var mysql = require("mysql");

var app = express();

var connect1 = mysql.createConnection({ host : "localhost", user : "root", password : "", database : "mysql"});

connect1.connect(function(error){ if(error) { console.log("Problem with MySQL : "+error); } else { console.log("Connection to database OK..."); }});...

mev

n.jsmevn.js

54

app.get('/', function(req, res) { res.end('<p>Welcome!</p>');});/* Launching request and getting response in a JSON variable */app.get('/charge',function(req, res){ connect1.query("SELECT * FROM teachers", function(error,rows){ if (error) { console.log("Problem with MySQL : "+error); connect1.end(); } else { res.end(JSON.stringify(rows)); } });});/* Starting the server */app.listen(3000, function(){ console.log("Server started on port 3000...");});

mev

n.jsmevn.js

55

mevn.js

56

mevn.js

57

X- Interactions Vue.js/Node.js

58

<!DOCTYPE html><html lang="en"> <head> <title>List</title><meta charset="utf-8" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.js"> </script> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/1.3.4/vue-resource.js"></script> </head> <body style="margin:0px;font-family:sans-serif;"> <div id="content"> <p>{{ tnumber }} teachers in the base:</p> <table> <tr v-for="t in teachers"> <td>{{ t.t_fname }} {{ t.t_lname }}</td> <td>{{ t.t_courses }}</td> </tr> </table> </div>

teachers.html <script> var vue1 = new Vue({ el: "#content", data: { teachers: {} }, created() { this.$http .get('http://127.0.0.1:3000/charge') .then(response => { // success this.teachers=response.body; }, response => { // failure console.log('ERROR!'); }); }, computed: { tnumber: function () { return this.teachers.length; } } }); </script> </body></html>

59

Result

60

● 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. Raison : l’entête CORS « Access-Control-Allow-Origin » est manquant.

Security problem

61

Security problem

● Solution:

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

62

Final result

● Node.js reads data and Vue.js prints them!

63

Partie non traduite en anglaismais à apprendre quand même !

64

I- Les modules de Node.js

65

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

66

2) Chercher des modules● Pour chercher un module, on utilise l'instruction

npm search suivie du nom du module à rechercher

● Exemple :

67

3) Installer un module● Pour installer un module, on utilise l'instruction

npm install suivie du nom du module à installer● Exemple :

68

La page des modules● La page des modules est : « www.npmjs.com »

69


70


71

4) Mettre à jour les modules● Pour mettre à jour les modules, on utilise

l'instruction npm update

72

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

73

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

74

5) Créer un module

75

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"

}}

76

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.

77

II- Le module « express »

78

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

79

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

80

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


})app.listen(3000);

express2.js

81

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


})app.listen(3000);

express3.js

82

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

83

1) Le module mysql● Le module mysql permet de se connecter à une

base MySQL

84

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 :

85

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" !

86

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)

87

2) Interroger les données● Lancer la requête et récupérer les résultats :

88

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

89

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 !

90

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

91

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

92

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

93

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

94

Any questions?

M4201 Javascript Technologies - JLjerome.landre.pagesperso-orange.fr/docs/mmi3/m4201-cm2.pdf · M4201 Javascript Technologies ... III- Blocking vs. Non-blocking code IV- First example

Documents