Differences
This shows you the differences between two versions of the page.
|
sde:laboratoare:12_ro_js [2020/05/05 21:52] ioana_maria.culic |
— (current) | ||
|---|---|---|---|
| Line 1: | Line 1: | ||
| - | ====== Laborator 12 - Operații asincrone ====== | ||
| - | ===== Prezentare teoretică ===== | ||
| - | Operațiile asincrone sunt operații neblocante, adică ele întorc un rezultat imediat, procesarea realizându-se în background. | ||
| - | |||
| - | În acest laborator vom utiliza funcții asincrone pentru a realiza operații ce necesită procesare (ex. citirea din fișier). | ||
| - | |||
| - | <note info> | ||
| - | În acest laborator veți folosi mediul de programare Node.js. | ||
| - | </note> | ||
| - | |||
| - | ===== Node.js ===== | ||
| - | Node.js este un mediu de programare JavaScript care este caracterizat prin suportul pentru operații asincrone. | ||
| - | |||
| - | Pentru a instala node.js, accesați următorul link: https://nodejs.org/en/. | ||
| - | |||
| - | =====Funcții asincrone===== | ||
| - | |||
| - | În node.js, o funcție asincronă are următorul format: | ||
| - | <code javascript> | ||
| - | function foo ([p1, p2, ..., ]callbackFunction){ | ||
| - | <code> | ||
| - | callbackFunction ([param1, param2,...]); | ||
| - | } | ||
| - | </code> | ||
| - | |||
| - | Practic, funcția asincronă primește ca parametru o altă funcție, pe care o apelează odată ce termină procesarea. | ||
| - | |||
| - | Apelul unei funcții asincrone arată astfel: | ||
| - | <code javascript> | ||
| - | foo ([p1, p2, ...,] function ([param1, param2,...]){ | ||
| - | <code> | ||
| - | }); | ||
| - | </code> | ||
| - | |||
| - | Același cod poate fi scris și astfel: | ||
| - | <code javascript> | ||
| - | foo ([p1, p2, ...,] ([param1, param2,...])=>{ | ||
| - | <code> | ||
| - | }); | ||
| - | </code> | ||
| - | |||
| - | Apelul unei funcții asincrone va întoarce imediat, iar programul va continua să execute alte apeluri de funcție. Între timp, sistemul de operare va procesa cererile funcțiilor anterioare. Când procesarea unei funcții este gata, funcția de callback va fi apelată și se va executa rutina asociată acesteia. | ||
| - | |||
| - | ===fs=== | ||
| - | [[https://nodejs.org/api/fs.html|fs]] este modulul Node.js care suportă operații cu fișiere. Cele mai importate funcții expuse de acesta sunt: | ||
| - | * [[https://nodejs.org/api/fs.html#fs_fs_readfile_path_options_callback|fs.readFile]]; | ||
| - | * [[https://nodejs.org/api/fs.html#fs_fs_writefile_file_data_options_callback|fs.writeFile]]; | ||
| - | * [[https://nodejs.org/api/fs.html#fs_fs_readdir_path_options_callback|fs.readDir]]. | ||
| - | |||
| - | Programul de mai jos folosește funcții asincrone pentru a scrie un fișier, după care citește conținutul acestuia: | ||
| - | <code javascript> | ||
| - | const fs = require ('fs'); | ||
| - | fs.writeFile ('myFile', 'my message', function (err){ | ||
| - | console.log ('Processing done'); | ||
| - | if (err){ | ||
| - | console.log ('There was an error writing the file'); | ||
| - | } | ||
| - | else{ | ||
| - | fs.readFile ('myFile', function (err, data){ | ||
| - | if (err){ | ||
| - | console.log ('There was an error reading the file'); | ||
| - | } | ||
| - | else{ | ||
| - | console.log (data); | ||
| - | } | ||
| - | }); | ||
| - | } | ||
| - | }); | ||
| - | </code> | ||
| - | |||
| - | ===child_process=== | ||
| - | [[https://nodejs.org/api/child_process.html|child_process]] e modulul care permite crearea de procese copil și interacțiunea cu acestea. | ||
| - | |||
| - | Modulul expune următoarele funcții importante: | ||
| - | * [[https://nodejs.org/api/child_process.html#child_process_child_process_execfile_file_args_options_callback|execFile]] | ||
| - | * [[https://nodejs.org/api/child_process.html#child_process_child_process_spawn_command_args_options|spawn]] | ||
| - | |||
| - | Diferența dintre cele două funcții este că ''execFile'' primește un callback ca parametru care va fi apelat odată de procesul copil își finalizează execuția, în timp de ''spawn'' întoarce o structură care prerezintă procesul copil, care înregistrează evenimente. | ||
| - | |||
| - | Următorul program lansează câte un proces folosind ambele funcții: | ||
| - | <code javascript> | ||
| - | const child_process = require ('child_process'); | ||
| - | child_process.execFile ('ls', function (err, stdout, stderr){ | ||
| - | if (err) console.log ('Execution had an error'); | ||
| - | console.log ('output messages'+stdout); | ||
| - | console.log ('error messages'+stderr) | ||
| - | }); | ||
| - | |||
| - | const proc = child_process.spawn ('ls'); | ||
| - | proc.on ('data', function (data){ | ||
| - | console.log ('Spawn process output: '+data); | ||
| - | }); | ||
| - | |||
| - | proc.on ('close', function (){ | ||
| - | console.log ('Spawn process closed.'); | ||
| - | }); | ||
| - | </code> | ||
| - | |||
| - | ====== Exerciţii de laborator ====== | ||
| - | |||
| - | <note warning> | ||
| - | În rezolvarea acestor exerciții veți folosi doar funcții asincrone. | ||
| - | </note> | ||
| - | |||
| - | ===== Exercițiul 1 - ===== | ||
| - | |||
| - | * Rulați exemplul de mai sus și accesați adresa ''localhost:8000'' din browser. Observați răspunsul primit în browser și inspectați mesajul primit de server. | ||
| - | * Accesați adresa ''localhost:8000/hello/world''. | ||
| - | |||
| - | ===== Exercițiul 2 - HTML response ===== | ||
| - | |||
| - | Modificați serverul anterior astfel încât acesta să răspundă cu o pagină html. Mesajul trimis de server trebuie să arate astfel: | ||
| - | <code bash> | ||
| - | HTTP/1.0 200 OK | ||
| - | Content-type: text/html | ||
| - | Connection: close | ||
| - | |||
| - | <html>...</html> | ||
| - | </code> | ||
| - | |||
| - | ===== Exercițiul 3 - POST message ===== | ||
| - | |||
| - | Descărcați aplicația [[https://www.postman.com|postman]] și folosiți-o pentru a trimite un mesaj de tip POST serverului (la secțiunea Body selectați raw, text). Timiteți un mesaj scurt în corpul mesajului folosind Postman și inspectați tot mesajul primit de server. | ||
| - | |||
| - | ===== Exercițiul 4 - POST response ===== | ||
| - | |||
| - | Modificați serverul astfel încât acesta să citească corpul mesajului primit, iar în funcție de acesta să trimită un alt răspuns, astfel: | ||
| - | * la mesajul ''age'' să răspundă cu un număr; | ||
| - | * la mesajul ''name'' să răspundă cu un număr; | ||
| - | * la mesajul ''country'' să răspundă cu o țară. | ||
| - | |||
| - | |||
| - | ===== Exercițiul 5 - JSON response ===== | ||
| - | Adăugați la server opțiunea ca la o cerere de tipul GET, pe ruta ''localhost:8000/person'' acesta să răspundă cu JSON de forma: | ||
| - | <code bash> | ||
| - | { | ||
| - | "name" : "Harry Potter", | ||
| - | "age" : 10, | ||
| - | "country" : "UK" | ||
| - | } | ||
| - | </code> | ||
| - | |||
| - | ===== Exercițiul 6 - Form server ===== | ||
| - | Creați un server web care va stoca datele unor persoane, primite de la clienți și care va răspunde cu aceste informații. Comportamentul serverului este următorul: | ||
| - | * la un request ''POST'' la adresa ''localhost:8000/insert'' primește în body un JSON precum cel de mai jos și întoarce codul 200 în cazul în care datele au fost salvate sau 500, daca ceva nu a funcționat. | ||
| - | <code bash> | ||
| - | { | ||
| - | "name" : "Harry Potter", | ||
| - | "age" : 10, | ||
| - | "country" : "UK" | ||
| - | }</code> | ||
| - | |||
| - | * la un request ''GET'' la adresa ''localhost:8000''întoarce un JSON cu toate datele stocate, de forma celui de mai jos: | ||
| - | |||
| - | <code bash> | ||
| - | [{ | ||
| - | "age" : int_value1, | ||
| - | "name" : "nume_persoana1", | ||
| - | "country" : "tara persoana1" | ||
| - | }, | ||
| - | { | ||
| - | "age" : int_value2, | ||
| - | "name" : "nume_persoana2", | ||
| - | "country" : "tara persoana2" | ||
| - | },....] | ||
| - | </code> | ||
| - | |||
| - | ===== Exercitiu 7 - Form client ===== | ||
| - | Creați un client Python care să trimită mesaje serverului în locul lui Postman. În acest caz puteți simplifica mesajul astfel încât antetul să conțină doar informațiile necesare în prelucrearea pachetului. | ||
| - | |||
| - | ===== Bonus - Form client ===== | ||
| - | Modificați programul creat anterior astfel încât acesta să răspundă cu o pagină web ce conține 3 input-uri și care trimite aceste date prin apăsarea unui buton, după care acesta va afișa informațiile primite. | ||
