Technologie oparte na Javascript do tworzenia stron WEb
Dariusz Mikułowski
Instytut Informatyki Uniwersytetu Przyrodniczo-Humanistycznego W Siedlcach
24 marca 2018
1 Plan wykładu
1 Co to jest Ajax
2 Przykład frameworka Ajx - Direct Web Remoting
3 framework Angular
4 Technologia Node.JS
2 Co to jest AJAX?
AJAX jest technologią dostarczającą nowej perspektywy tworzenia stron internetowych dzięki któremu mogą działać szybciej i bardziej interaktywnie. Zasada jej działania polega na możliwości
pobierania danych z serwera przez przeglądarkę bez konieczności przeładowywania całej strony. To pozwala na szybkie i dynamiczne zmiany zawartości strony.
Ta funkcjonalność była początkowo zaimplementowana w przeglądarkach Mozilla i Internet explorer a technologia AJAX umożliwia jej wykorzystanie w dowolnej przeglądarce w tym też w mobilnych.
3 Co to jest AJAX?
Akronim AJAX można rozwinąć jako (Asynchronous JavaScript and XML) czyli asynhroniczne skrypty Java oraz XML. Ten akronim nie oddaje funkcjonalności tej technologii ponieważ komunikacja w AJAX nie jest asynhroniczna i nie musi używać dokumentów XML. Nazwa Przyjęła się gdyż jest łatwa w wymowie i zapamiętaniu.
4 sposób działania aplikacji AJAX
Przykłady działania aplikacji AJAX w porównaniu z tradycyjnym podejściem:
wyszukiwanie słowa:
W tradycyjnym podejściu użytkownik wpisuje słowo i naciska przycisk szukaj.
Cała strona przeładowuje się i pokazuje wynik.
w aplikacji AJAX użytkownik wpisuje kolejne znaki, aplikacja automatycznie dopasowuje już wpisywane znaki i prezentuje wynik. Użytkownik nie musi naciskać przycisku szukaj, cała strona nie jest przeładowywana a jedynie są przesyłane niewielkie dane.
Pisanie wiadomości w aplikacji chatu:
forma tradycyjna: użytkownik wpisuje wiadomość i naciska przycisk wyślij.
strona jest przeładowywana i po przyjściu nowej wiadomości jest ona prezentowana użytkownikowi.
aplikacja AJAX: Użytkownik wpisuje wiadomość. Po wpisaniu określonej ilości znaków jest ona przesyłana, aplikacja automatycznie sprawdza przychodzące wiadomości i wyświetla je użytkownikowi. Nie musi on naciskać żadnych przycisków.
Taka funkcjonalność przydaje się zwłaszcza przy wypełnianiu formularzy, w których można implementować dawanie podpowiedzi użytkownikowi lub automatyczne w locie sprawdzanie poprawności bez przeładowywania strony.
5 Co to jest DWR?
DWR jest otwartą biblioteką Java, która umożliwia tworzenie aplikacji webowych wykorzystujących technologię AJAX. Jej działanie polega na tym, że programista może używać funkcji Java zaimplementowanych na serwerze wywołując je z poziomu kodu strony wykonywanego w przeglądarce. Akronim DWR można rozwinąć jako Direct Web Remoting
DWR integruje kod JavaScript wykonywany w przeglądarce z kodem Java wykonywanym na serwerze. Jest to rodzaj Zdalnego wywoływania procedur RPC (Remote Procedure Call) który kilka lat temu był stosowany przy pomocy takich protokołów jak np.
CORBA. Najnowsza wersja biblioteki to 3.0 ale za stabilną uważa się wersję 2.10.
6 Dwa sposoby użycia DWR
Ponieważ biblioteka pozwala na wywoływanie funkcji Java na serwerze przez kod w skryptach wykonujący się w przeglądarce można go używać na dwa sposoby.
w normalnym trybie AJAX, kod Javascript z przeglądarki wywołuje funkcje zaimplementowane w Java na serwerze i odbiera wyprodukowane przez nie wyniki.
w odwrotnym trybie AJAX Kod Java działający na serwerze może wywoływać funkcje JavaScript w przeglądarkach użytkowników co pozwala np. na publikowanie informacji w grupach użytkowników.
7 Integracja z innymi technologiami
DWR może być łatwo integrowany z takimi technologiami jak:
Spring, Struts, Guice, Hibernate i innymi.
Jest otwartym standardem dostępnym na zasadach licencji Apache Software License v2.
8 Użycie DWR
Aby użyć technologii DWR w swojej aplikacji musimy:
Mieć zainstalowany serwer webowy obsługujący Java czyli np.
Tomcat lub Glasfish.
posiadać ewentualnie środowisko do pracy na platformie J2EE np. Eclipse.
umieścić w folderze WEB-INF/lib swojej aplikacji na serwerze tomcat pobrany pli biblioteki DWR.JAR
umieścić dodatkowy potrzebny plik biblioteki
commons-logging.jar w folderze WEB-INF/lib w naszej aplikacji na serwerze Tomcat.
dodać definicję serwletu DWR w deskryptorze aplikacji Web.xml
Utworzyć plik konfiguracyjny dla aplikacji DWR dwr.xml i umieścić go w folderze web-inf swojej aplikacji.
9 Konfiguracja aplikacji DWR
Dla poprawnego działania aplikacji DWR musimy umieścić konfigurację serwletu DWR w deskryptorze webowym aplikacji web.xml na serwerze Tomcat. Musi ona zawierać standardowo sekcję wskazującą na klasę serwletu i jego logiczną nazwę oraz sekcje mapowania adresu URL na logiczną nazwę serwletu oraz dodatkowe parametry inicjalizujące.
10 Konfiguracja aplikacji DWR
Postać konfiguracji DWR w deskryptorze aplikacji może być następująca:
11 Plik konfiguracyjny aplikacji DWR
Dodatkowym plikiem potrzebnym do udostępniania klas DWR na zewnątrz jest plik dwr.xml.
Określa się w nim, jakie klasy mogą być dostępne z poziomu kodu JavaScript z przeglądarek i jakie będą miały nazwy w kodzie JavaScript.
Klasy dostępne jako zdalne dla kodu JavaScript muszą mieć bezparametrowy publiczny konstruktor.
12 Plik konfiguracyjny aplikacji DWR
Poniższy fragment deskryptora udostępnia dwie funkcje: JDate i Demo, które będzie można wywołać w kodzie JavaScript..
Przykładowa zawartość deskryptora aplikacji dwr.xml:
13 Użycie klas DWR
Posiadając w naszej aplikacji na serwerze zaimplementowane klasy oraz konfigurację aplikacji DWR i udostępnionych klas JData i Demomożemy ich użyć z poziomu JavaScript. W tym celu musimy dodać do kodu naszej strony deklarację silnika DWR i naszych klas.
<script src=
’//dwr/interface/mojskrypt.js’></script>
<script src=
’//dwr/engine.js’></script>
14 Skrypty DWR po stronie przeglądarki
Biblioteka DWR jest dostarczana wraz z dwoma skryptami, które można wykorzystać przy pisaniu kodu JavaScript w przeglądarce.
są to:
engine.js który zawiera pomocnicze funkcje do komunikowania się z serwerem, na którym udostępniamy kod DWR.
util.js zawiera Pomocnicze metody do aktualizowania zawartości strony danymi przysłanymi z serwera.
Aby z nich korzystać powinniśmy umieścić je w folderze skryptów naszej strony.
15 Funkcje w dwr.engine.js
Skrypt engine.js udostępnia kilka pożytecznych funkcji, które możemy wywoływać w kodzie JavaScript wykonując w ten sposób pewne operacje na serwerze lub ustawiać parametry komunikacji.
Są to:
getValue() pobiera wartość z pola formularza i przesyła na serwer.
getText() pobiera wartość z pola tekstowego formularza i przesyła na serwer.
getValues pobira tablicę wartości z listy lub zestawu pól edycyjnych i przesyła na serwer,
onReturn reaguje na naciśnięcie enter. Nie zaleca się
używania gdyż działa w różny sposób różnych przeglądarkach.
selectRange wybiera fragment tekstu z pola tekstowego.
16 Funkcje w dwr.engine.js
setValue pobiera wartość ze zmiennej w kodzie na serwerze i wpisuje ją do pola formularza w przeglądarce
setValues pobiera listę wartości ze zmiennej tablicowej w kodzie na serwerze i wpisuje je do zestawu pól formularza w przeglądarce, toDescriptiveString Przekształca obiekt html do postaci łańcucha tekstowego.
useLoadingMessage powoduje zatrzymanie interakcji użytkownika ze stroną do momentu, gdy zakończy się proces przesyłania danych z serwera. Nie jest zalecane jej użycie ponieważ prawidłowo działa tylko w przeglądarce Firefox.
addOptions pobiera wartości ze zmiennej tablicowej w kodzie na serwerze i dodaje je jako opcje wyboru w elemencie <select> na stronie www.
addRows pobiera listę wartości ze zmiennej tablicowej w kodzie na serwerze i dodaje je jako wiersze tabeli na stronie www,
removeAllOptions usuwa wszystkie opcje z listy wyboru na stronie w przeglądarce,
removeAllRows usuwa wszystkie wiersze z tabeli na stronie w przeglądarce,
17 Funkcje w dwr.engine.js
Większość funkcji dostępnych w engine.js jest też dostępnych w skrypcie utils.js. Dlatego najczęściej używamy ich z przedrostkiem utils.
Przy okazji użycia funkcji dodających wartość używa się często opcji escapeHtml lub funkcji setescapehtml(). Domyślnie jest ona ustawiana na wartość true po to by z każdego przesyłanego łańcucha znakowego były usówane znaki charakterystyczne dla kodu html czyli < > & itd. Zapobiega to atakom xss. Jednak możemy w niektórych przypadkach ustawić tę flagę na false, aby dodać do zawartości strony elementy html. Trzeba używać tego ostrożnie.
Ustawienie flagi: dwr.util.setEscapeHtml(false);
18 Funkcje w dwr.utils.js
skrypt utils.js zawiera wszystkie funkcje dostępne w engine.js oraz ich rozbudowane wersje, a także kilka dodatkowych funkcji. Są to:
getValue i setValue odpowiednio pobiera lub ustawia wartość pola tekstowego lub innego elementu np <div>
getValues i setValues ustawia lub pobiera wartości z całego zbioru elementów prostych np. poól tekstowych.
getText() i setText() pobiera lub ustawia wartość w elemencie <option> w liście wyboru
onReturn reaguje na naciśnięcie enter ale w różnych przeglądarkach może działać różnie
selectRange wybiera fragment tekstu z pola edycyjnego.
trzeba wskazać początek i koniec łańcucha.
19 Funkcje w dwr.utils.js
toDescriptiveString przekształca dowolny obiekt do postaci string. drugi parametr wskazuje do jakiego0 poziomu obiekt ma być przetwarzany. 0 oznacza przetwarzanie tylko samego elementu bez jego elementów potomnych. 1 oznacza przetwarzanie obiektu i jego potomnych na 1 poziomie itd.
addOptions służy do dodawania elementów list lub opcji do obiektów select. W zależności od wartości odpowiednich jej argumentów generuje listę numerowaną, nie numerowaną lub listę opcji do elementu ¡select¿.
addRows generuje tabelę html i dodaje do niej wiersze.
removeAllOptions usuwa z listy lub listy wyboru wszystkie elementy.
removeAllRows usuwa z tabeli wszystkie wiersze.
20 Przykład prostej aplikacji DWR
Przykładowa aplikacja DWR:
działanie
imię użytkownika jest pobierane z formularza, i wysyłane na serwer,
funkcja wywołana na serwerze dopisuje przed imieniem słowo Hello i zwraca cały napis do przeglądarki.
Zwrócony string jest umieszczany wewnątrz elementu ¡span¿ i wyświetlany w przeglądarce.
Zaleta działania takiej aplikacji w porównaniu ze standardową np.
zaimplementowaną w JSP jest taka, że na serwer jest przesyłane tylko imię użytkownika wraz z wywołaniem funkcji a nie cały formularz. Serwer zwraca tylko string hello ”imię” zamiast całej strony z odpowiedzią. To może znacznie przyspieszyć wykonywanie się dużych stron www.
21 Przykładowa aplikacja DWR
Implementacja:
Po stronie serwera implementujemy tylko jedną funkcję, która na początku swojego parametru dopisuje słowo Hello oraz spację i zwraca cały string.
po stronie przeglądarki implementujemy skrypt JavaScript, który wywołuje 3 funkcje DWR na serwerze:
pierwszą dwr.util.getValue() która pobiera wartość z pola tekstowego formularza.
zaimplementowaną funkcję hello, która dopisuje słowo hello do pobranej wartości.
dwr.util.setValue(), która swój parametr umieszcza wewnątrz elementu ¡span¿ i zwraca do przeglądarki.
W kodzie html umieszczamy pole tekstowe przeznaczone na wpisanie imienia oraz przycisk wyślij.
22 Przykładowa aplikacja DWR
Kod HTML
23 Przykładowa aplikacja DWR
Kod Javascript:
24 Przykładowa aplikacja DWR
Kod Java:
25 Przykładowa aplikacja DWR
Konfiguracja aplikacji w dwr.xml
26 Dwr w trybie odwrotnego AJAX
Jak było wspomniane, DWR może działać w 2 trybach w zwykłym - kiedy funkcje JavaScript wywołują kod Java na serwerze i w odwrotnym (ang Reverse AJAX) - kiedy funkcje Java na serwerze wywołują kod JavaScript z przeglądarki.
Dobrym przykładem zastosowania tego mechanizmu może być sytuacja, kiedy chcemy synchronizować wiele wiadomości w aplikacji chatu. W takim przypadku serwer wywołując odpowiednie funkcje JavaScript u klientów odświeża listę wiadomości we wszystkich aktualnie połączonych przeglądarkach.
27 DWR w trybie odwrotnego AJAX
Przykładem prostej aplikacji działającej w trybie odwrotnego AJAX może być zegar, który jest wyświetlany w przeglądarkach
użytkowników, ale jest aktualizowany co pewien czas przez funkcje serwera.
działanie:
Użytkownik ma wyświetlony zegar w przeglądarce i aby go wystartować naciska odpowiedni przycisk.
od tej pory serwer co pewien czas (np co 2 sekundy) aktualizuje czas w zegarze użytkownika.
gdy użytkownik naciśnie przycisk stop, połączenie z serwerem jest zamykane i zegar przestaje być aktualizowany.
28 DWR w trybie odwrotnego AJAX
Implementacja:
gdy użytkownik naciśnie przycisk startujący zegar przeglądarka uaktywnia mechanizm odwrotnego AJAX wywołując na serwerze funkcję dwr.engine.setActiveReverseAjax(true);
Aby zapewnić prawidłowe działanie musimy uruchomić mechanizm obsługi błędu na serwerze. działa on w taki sposób, że w ciągu 1 sekundy dwukrotnie wywoływana jest przez serwer funkcja aktualizująca zegar. Jeśli oba wywołania nie powiodą się, wywoływana jest metoda obsługi błędu, która zmienia wartość zmiennej statusu a po 10 sekundach ponawia próbę nawiązania połączenia.
do obsługi uaktualniania zegara na serwerze uruchamiamy specjalny wontek. Uaktualnia on czas co 1 sekundę i wywołuje odpowiednią funkcję w przeglądarce użytkownika.
adres strony z zegarem jest pobierany przez serwer z kontekstu serwera przez wywołanie metody ServerContextFactory.get()
29 DWR w trybie odwrotnego AJAX
Kod HTML aplikacji zegara:
<input type="button" value="Start / Stop"
onclick="Clock.toggle();"/>
<h2 id="clockDisplay"></h2>
Kod Javascript:
30 DWR w trybie odwrotnego AJAX
Kod JavaScript c.d.:
31 DWR w trybie odwrotnego AJAX
Kod Java:
32 DWR w trybie odwrotnego AJAX
Kod JAVA c.D.:
33 Dynamiczna konfiguracja aplikacji DWR
Od wersji 2.0 DWR umożliwia konfigurowanie udostępnianych klas przy pomocy adnotacji. można je stosować zamiast parametrów w pliku konfiguracyjnym dwr.xml lub razem z nimi.
Aby użyć adnotacji do konfiguracji aplikacji należy określić inny niż standardowo serwlet obsługujący DWR w deskryptorze aplikacji web.xml. Parametrami wejściowymi dla tego serwletu muszą być wszystkie udostępniane klasy, w których chcemy używać adnotacji.
34 Dynamiczna konfiguracja aplikacji DWR
Konfiguracja serwletu udostępniająca adnotacjema postać:
35 Dynamiczna konfiguracja aplikacji DWR
Mając uruchomioną obsługę adnotacji w aplikacji DWR możemy udostępniać klasy i metody za pomocą adnotacji:
@RemoteProxy wskazuje udostępnianą klase,
@RemoteMethod wskazuje udostępnianą metodę,
@DataTransferObject wskazuje udostępniany objekt np.
obiekt danych w modelu.
@RemoteProperty wskazuje udostępnianą właściwość. Muszą być dla niej zaimplementowane settery i gettery.
36 Przykład użycia adnotacji
Udostępniona klasa i jej metody:
Jeśli chcemy, aby nazwa metody widoczna z zewnątrz była inna niż zaimplementowana możemy użyć adnotacji @remoteProxy z parametrem:
@RemoteProxy(name="Functions")
public class RemoteFunctions { ... }
37 Przykład użycia adnotacji
Udostępniony komponent JavaBeans
38 Łączenie wielu zdalnych wywołań
Kilka funkcji wywoływanych w kodzie Java na serwerze przez JavaScript może być łączonych w jedno wywołanie. Jest to przydatne gdyż redukuje czas wykonania się funkcji i ilość rządań http.
Mechanizm ten działa w taki sposób, że na serwerze jest tworzony specjalny wontek, w którym są wywoływane wszystkie te funkcje, a po ich wykonaniu się wontek jest zamykany.
39 Łączenie wielu zdalnych wywołań
Podczas implementowania tego mechanizmu możemy mieć kontrolę nad wykonywaniem się poszczególnych funkcji dzięki użyciu funkcji obsługujących różne wyjątki. Są to:
exceptionHandler obsługuje wyjątki, errorHandler obsługuje błędy,
warningHandler obsługuje ostrzeżenia,
textHtmlHandler obsługuje błędy parsowania html.
po wystąpieniu obsługiwanej sytuacji odpowiedni komunikat jest zwracany do przeglądarki.
40 Łączenie wielu zdalnych wywołań
Przykład łączenia wywołań funkcji w jednym wontku:
41 Framework Angular js
AngularJS jest frameworkiem JavaScriptowym do tworzenia dynamicznych efektownych stron webowych. Oznacza to że działa on po stronie przeglądarki (na tzw. frontendzie).
Mówiąc najbardziej ogólnie jego użycie polega na dodawaniu do znaczników w kodzie html odpowiednich atrybutów oraz
zaimplementowaniu logiki działania aplikacji w skrypcie JavaScript.
42 Framework Angular js
W Angular wykorzystywane są takie elementy aplikacji jak model, widok i kontroler. Silnik Angulara renderuje widok html ze znacznikami, binduje dane z modelu do widoku i wykonuje kontroler wszystko to bez udziału serwera WWW.
W Angular używane są też powszechnie wyrażenia regularne, które potrafią obliczać wartości, pobierać obiekty z modelu, sprawdzać warunki itd. Wyrażenia umieszcza się w podwójnych nawiasach klamrowych {{ wyrażenie }}.
43 Moduły w Angular
Funkcjonalność samego frameworka można łatwo rozszerzać poprzez użycie modułów.
Moduły te importuje się jako dodatkowe skrypty JavaScript.
Można też tworzyć własne moduły.
44 Użycie Angular
Aby użyć Angular wystarczy zaimportować jego skrypt zdalnie lub lokalnie
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
Skrypt Angulara też można oczywiście zaimportować z lokalnego źródła.
45 Dyrektywy w Angular
Dyrektywy angulara są to specjalne atrybuty z przedrostkiem ng, które dodajemy do znaczników HTML. Najważniejsze dyrektywy to:
ng-app definiuje aplikację Angular.
ng-model binduje wartość z kontrolki HTML (input, select, textarea) do modelu danych aplikacji.
ng-bind binduje dane z modelu aplikacji do elementu HTML w widoku.
ng-controller definiuje kontroler.
46 Prosta aplikacja w Angular
Aby utworzyć prostą aplikację w Angular wystarczy w pliku html zaimportować jego skrypt i do znaczników html dodać odpowiednie dyrektywy. Przykładowa startowa aplikacja w Angular:
47 Użycie yrażeń Angular
W Angular JS powszechnie używa się wyrażeń Angular. Służą one do bindowania danych z modelu do widou i odwrotnie, do
obliczania wartości, do sprawdzania warunków, do tworzenia pętli itd. Wyrażenia umieszcza się w podwujnych nawiasach klamrowych {{ wyrażenie }}.
48 Angular i MVC
Mimo, że aplikacje Angular działają w przeglądarce, to implementuje się je zgodnie ze wzorcem MVC.
Widok jest implementowany jako kod html ze specjalnymi atrybutami dodawanymi do znaczników html.
Model to specjalna zmienna (obiekt najczęściej nazywa się go
$scope i zapisuje z poprzedzającym znakiem dolara. W nim umieszcza się wszystkie potrzebne obiekty modelu.
Kontroler implementuje się jako funkcję w JavaScript z użyciem różnych konstrukcji Angular.
49 Prosta aplikacja MVC
Kod części widoku przykładowej aplikacji z widokiem modelem i kontrolerem, która pokazuje użytkownikowi liczbę miesięcy pozostałych do jego urodzin.
50 Przykładowa aplikacja MVC w Angular
Kod części logicznej aplikacji Angular:
zmienna scope przechowuje dane aplikacji.
51 Iteracja elementów listy
W Angular łatwo zaimplementować wypełnianie listy elementów danymi z tablicy przechowywanej w modelu.
Do takiego wypełnienia można użyć dyrektywy ng:repeat i wyrażenia pobierającego wartość z listy.
Przykładowy kod widoku:
52 Iteracja elementów listy
Dyrektywa ng:module tworzy moduł Angular. Takiego modułu można używać potem w innej aplikacji.
Przykładowa Implementacja logiki działania kontrolera i renderowania modelu aplikacji z wypełnianą listą.
53 Obsługa formularza
W Angular można łatwo tworzyć aplikacje z formularzami użytkownika. Aplikacja taka może działać dynamicznie tzn bez przeładowywania strony dane wpisywane w pola formularza przez użytkownika od razu się aktualizują w modelu.
Można też zaimplementować obsługę zdarzeń np kliknięcia przycisku przy pomocy dyrektywy ng:click.
Z kolei dyrektywa ng:model binduje dane wpisane w pole formularza przez użytkownika do modelu.
54 Obsługa formularza
Przykładowy kod implementujący obsługę formularza.
55 Mechanizm routingu
W angular bardzo łatwo jest zaimplementować mechanizm
routingu pomiędzy podstronami. Dzięki temu Można uzyskać efekt że mając wspólne menu na stronie bez przeładowywania strony na serwerze możemy wyświetlać różne podstrony w głównej części widoku. Do tego służy specjalny moduł Angular o nazwie
Angular-route. Jest on do pobrania w postaci skryptu Javascript.
56 Routing pomiędzy podstronami w Angular
Aby zrealizować operację routingu wystarczy zaimportować moduł Angular-Route do głównego widoku strony, zrobić w niej menu z odpowiednimi łączami do podstron a w głównym kontenerze strony dodać dyrektywę ng:view. W jej miejsce moduł Angular-route będzie podstawiał odpowiednie widoki z zewnętrznych plików html.
Przykładowy kod takiego widoku z menu witryny:
57 Routing pomiędzy podstronami w Angular
Aby mechanizm przekierowywania do podwidoków zadziałał musimy zaimplementować go w logicznej częśći aplikacji. W tym celu musimy zaimplementować funkcje obsługującą nawigację dziedziczącą z modułu routeprovider. W niej trzeba użyć konstrukcji .when... która zpowoduje że po wybraniu przez użytkownika inku z menu, aplikacja wyświetli powiązany z nim widok i uruchomi powiązany z tym widokiem kontroler.
Przykładowa implementacja mechanizmu nawigacji:
58 Routing pomiędzy podstronami w Angular
Do działania aplikacji brakuje plików html w folderze pages o nazwach home.html, about.html i contact.html oraz implementacji ich kontrolerów.
Przykładowa implementacja kontrolerów z routingiem:
59 Technologia Node.JS
Node.js jest frameworkiem implementującym serwer www ale w języku Javascript. Jest dostępny na otwartej licencji. Można go uruchamiać na różnych platformach: Windows, Linux, Unix, Mac OS X,
60 Sposób działania Node.js
Node.js wykorzystuje programowanie asynchroniczne. Oznacza to że działa inaczej niż tradycyjny serwer WWW.
Działanie tradycyjnego serwera WWW:
oczekuje na rządanie od przeglądarki,
po jego odebraniu wysyła zadanie do aplikacji, np pobiera dane z bazy danych,
oczekuje na odpowiedź od aplikacji np. dane.
odbiera dane
tworzy odpowiedź dla przeglądarki użytkownika i wysyła ją jest gotowy na kolejne rządanie.
61 Sposób działania Node.js
Serwer WWW oparty na Node.JS działa asynchronicznie tzn.:
czeka na rządanie od przeglądarki,
po jego odebraniu wysyła zadanie do aplikacji, np pobiera dane z bazy danych,
jest gotowy na kolejne rządanie z przeglądarki użytkownika gdy przyjdzie odpowiedź od aplikacji np. od bazy danych - przesyła te dane do przeglądarki użytkownika.
To eliminuje czas oczekiwania użytkownika ale wymaga innego myślenia o działaniu aplikacji.
62 Możliwości funkcjonalne Node.js
generowanie dynamicznej zawartości strony WWW.
tworzenie, otwieranie, czytanie, zapisywanie, kasowanie i zamykanie plików na serwerze,
obsługa formularzy,
pobieranie, modyfikowanie i dodawanie danych do baz danychh,
63 Aplikacje w Node.js
Aplikacje w Node.js tworzymy używając języka Javascript.
Jednakże kod ze skryptów js jest kompilowany i wykonywany na serwerze.
W Node.js używane jest programowanie zdarzeniowe. Oznacza to że tworząc kod aplikacji oprogramowujemy zdarzenia takie jak np.
użytkownik chce uzyskać dostęp do portu 80. Dlatego pliki skryptów muszą być wcześniej uruchomione zanim serwer będzie mógł obsłużyć rządanie użytkownika.
64 Użycie Node.js
Aby użyć frameworka Node.js trzeba pobrać jego dystrybucję przeznaczoną dla swojego systemu operacyjnego ze strony: Dla Windows jest to:
https://nodejs.org/dist/v8.9.4/node-v8.9.4-x64.msi Następnie instalujemy framework tak jak standardową aplikację Windows.
Serwera Node nie musimy uruchamiać osobno ale uruchamiamy każdą aplikację z linii poleceń systemu operacyjnego. Każda aplikacja Node to specjalny skrypt Javascript, który po uruchomieniu nasłuchuje na odpowiednim porcie.
65 Prosta aplikacja Node.js
Aby utworzyć prostą aplikację Node:
W osobnym folderze możemy napisać skrypt, który będzie pełnił rolę prymitywnego serwera np. wyświetlającego napis w przeglądarce. W kodzie tego skryptu aplikacji najpierw
tworzymy obiekt http korzystając z modułu http
Następnie wykonujemy metodę createServer, która uruchamia serwer http. Metoda ta ma dwa parametry req i res czyli rządanie i odpowiedź http.
W ciele tej metody wysyłamy nagłówek http do przeglądarki.
wykorzystując metodę writeHead obiektu res czyli odpowiedzi http.
wysyłamy do przeglądarki napis wykorzystując do tego metodę end obiektu res.
Na koniec na obiekcie serwera wykonujemy metodę listen, która spowoduje że będzie on nasłuchiwał na porcie 8080.
66 Prosta aplikacja Node.js
Przykładowy kod prostej aplikacji Node.js:
67 Prosta aplikacja Node.js
Plik skryptu aplikacji zapisujemy w pliku o rozszerzeniu js np.
mojserwer1.js a następnie uruchamiamy go z linii poleceń cystemu operacyjnego
cmd
node mojserwer1.js
Po uruchomieniu aplikacja już działa. Możemy w przeglądarce wpisać adres: localhost:8080/ powinniśmy otrzymać napis Hello World.
68 Moduły w Node.js
Struktura frameworka Node.js opiera się na modułach tworzonych przez programistę i modułach dostarczanych przez innych
producentów a także modułach wbudowanych w sam Node.
Każdy moduł udostępnia jakieś funkcje, które można wykorzystać w innych modułach i swoich aplikacjach. Funkcje te umieszczamy w obiekcie exports dzięki czemu są one widoczne z zewnątrz.
69 Moduły w Node.js
Aby skorzystać z bardziej zaawansowanych funkcji frameworka Node.js możemy użyć licznych modułów, które są w nim dostępne.
Moduły te instalujemy za pomocą managera paczek npm. Robimy to z linii poleceń systemu operacyjnego. Przykładowo, aby
obsługiwać widoki zawierające formularze możemy skorzystac z modułu o nazwie express.
Moduł instalujemy przy pomocy polecenia:
cmd
npm install express
Po jego wykonaniu w folderze naszej aplikacji powstanie folder nodemodules a w nim będą wszystkie zainstalowane moduły w tym wypadku moduł express. Możemy teraz korzystac z dostępnych w nich funkcji
70 Własne moduły w Node.js
Możemy też tworzyć własne moduły i udostępniać w nich swoje funkcje.
Przykładowy kod własnego prostego modułu udostępniającego funkcję zwracającą dzisiejszą datę:
exports.mojaData = function () { return Date();
};
71 Własne moduły w Node.js
Następnie własnego modułu możemy użyć w swojej aplikacji:
var dt = require(’./mojmodul1’);
res.write("Aktualna data i czas to: " + dt.mojaData());
res.end();
72 Serwer WWW Node
Przy pomocy frameworka Node.js można łatwo utworzyć prosty serwer plików statycznych, który będzie wysyłał do przeglądarki pliki html, z grafiką, skryptami javascript i css z danego folderu.
Aby zaimplementować taki serwer możemy wykorzystać moduły fs oraz http. Pierwszy z tych modułów posiada funkcję do operowania na plikach np. czytanie i zapisywanie plików na serwerze a drugi udostępnia operacje protokołu http:
73 Serwer WWW Node
Przykładowy kod statycznego serwera WWW:
74 Obsługa formularzy w Node.js
Za pomocą frameworka Node.js można tworzyć strony z formularzami. Do tego celu najwygodniej jest użyć frameworka Express będą cego częściąNode.
Express działa podobnie jak JSP, tzn renderuje widoki napisane przy pomocy specjalnych znaczników, umożliwia zbieranie danych z formularzy i generowanie odpowiedzi do przeglądarki użytkownika.
Widoki tworzy się w HTML i Javascript.
75 Obsługa formularzy w Node.js
Aby użyć Express trzeba pobrać i zaimportować moduł Express do swojej aplikacji Następnie można już tworzyć widoki apikacji.
Widoki tworzymy jako pliki o rozszerzeniach ejs,. Umieszczamy je w folderze views w folderze naszej aplikacji. Skrót EJS oznacza (z ang. Embedded JavaScript).
W formularzach możemy się odwoływać do obiektów zaimplementowanych w logicznej warstwie aplikacji.
76 Obsługa formularzy w Node.js
Przykładowy kod formularza aplikacji Express.
77 Obsługa formularzy w Node.js
Aby uruchomić aplikację trzeba jeszcze w głównym folderze utworzyć plik javascript np myserwer1.js, który będzie
implementował jej logikę. Na jego początku umieszczamy kod inicjalizujący aplikację express. Tworzymy też 3 stałe pobierając obiekty z modułu express: Stała bodyParser potrzebna jest do parsowania elementu body przy obsłudze poleceń POST protokołu HTTP
Aby móc parsować ścieżki z adresów URL z przychodzących rządań używamy metody app.use.
Natomiast metody app.set używamy aby ustalić silnik który będzie renderował widoki, w tym wypadku jest to silnik EJS.
Potem implementujemy metody app.get i app.post, które będą obsługiwać odpowiednie polecenia protokołu HTTP. W ich kodzie ważna jest metoda render, która zajmuje się generowaniem widoku.
i pobieraniem danych z formularza.
78 Obsługa formularzy w Node.js
Przykładowy kod:
79 zapisywanie tekstu do pliku
We frameworku Node.js można utworzyć program, który zapisze dowolny tekst do pliku tekstowego. Metody do operacji na plikach znajdują się w module fs. Aby zapisać do pliku tekst
wykorzystujemy funkcję append z tego modułu.
Przykładowy kod:
