JanusBac
Sterowanie komputerowe
Aplikacja internetowa to oprogramowanie komputerowe, które wykonuje swoje zadania z wykorzystaniem Internetu. Większość aplikacji internetowych opiera się na modelu klient-serwer, w którym aplikacje typu klient służą do wprowadzania i odbierania informacji, podczas gdy serwery przechowują i przetwarzają te dane. Są i inne modele komunikacji (np. peer-to-peer). Nie będziemy jednak w tej sekcji ich rozważać.
Mówiąc najprościej, bazując na modelu "Klient-Serwer" aplikacja internetowa działa w ten sposób.
- Aplikacje klienckie (np. przeglądarki internetowe) wysyłają poprzez internet żądanie do serwerów Te żądania mogą być wysyłane wraz z różnymi danymi.
- Serwery z zaimplementowanymi odpowiednimi aplikacjami wykonują żądane zadania, a następnie odpowiadają klientom - wysyłają odpowiedzi w postaci odpowiednich danych. Dane te mogą być wyświetlane przez aplikacje klienckie w formie tekstowej lub graficznej.
Serwery mogą oferować, a klienci mogą oczekiwać bardzo różnych usług internetowych. Dlatego mamy różne protokoły internetowe i tryby połączenia do interakcji między aplikacjami internetowymi w celu wymiany danych. My tutaj w zasadzie będziemy bazować na jednym tylko z tych protokołów, zwanym Hypertext Transfer Protocol (HTTP).
Przy takim założeniu zwykle aplikacje internetowe wykorzystują następujący model. Skrypty po stronie serwera (np. PHP i ASP) służą do odbierania, przechowywania i przetwarzania danych. Oprogramowanie po stronie klienta (np. JavaScript i HTML) jest przeznaczone do prezentowania informacji użytkownikom i wprowadzania przez nich danych. Klientami mogą być proste aplikacje lub bardzo wyrafinowane graficzne interfejsy użytkownika (GUI). Powyższy krótki opis opracowywania aplikacji webowych może sugerować, że oprogramowanie serwerowe i aplikacje klienckie muszą być tworzone w różnych językach programowania. To może być mylące. Zaproponowałem tradycyjne rozwiązanie, ale to nie jedyny sposób. Istnieją środowiska programistyczne, które umożliwiają tworzenie oprogramowania po stronie serwera i klienta w tych samych językach. Tutaj użyłem tego tradycyjnego rozwiązania (PHP dla Back-Endu, HTML oraz JavaScript dla tzw. Front-Endu aplikacji web'owych).
Wspomniałem już, że w większości prezentowanych tutaj aplikacji korzystam z protokołu HTTP. HTTP jest to akronimem pochodzący od Hypertext Transfer Protocol. HTTP jest oparty na modelu komunikacyjnym TCP/IP, podstawowym protokole używanym w internecie. HTTP jest bardzo użyteczny dla transmisji danych w podstawowej usłudze internetowej, jaką jest World Wide Web - (WWW).
Zasadniczo, komunikacja bazująca na protokole HTTP działa według prostego wzorca: klienty (aplikacje typu klient) pytają, serwery odpowiadają. To bardzo proste ale niestety powolne. Protokół HTTP ma też bardzo istotną wadę, że nie pozwala on inicjować połączeń z klientami w celu wysyłania wiadomości typu "push" (od serwera do klienta).
Przypominam, że HTTP to tylko jeden z wielu protokołów komunikacji internetowej. Na przykład omówiony zostanie w innej sekcji również tak zwany protokół websocket.
Skupmy się na razie tylko na HTTP. Mamy więc „serwer HTTP” i „klienta HTTP” - przykładowo przeglądarkę internetową. To jest wszystko co nam potrzeba żeby zacząć się komunikować wykorzystując protokół HTTP.
Jeszcze raz podsumujmy:
- Klient HTTP (web client, HTTP client) jest to aplikacja, która nawiązuje połączenie z serwerem w celu wysyłania do niego różnych wiadomości - żądań HTTP.
- Serwer HTTP (web server, HTTP server) jest to oprogramowanie, które przyjmuje połączenia w celu obsługi żądań HTTP i wysyła komunikaty - odpowiedzi HTTP.
Zatem klienty i serwery komunikują się poprzez wymianę wiadomości (żądań i odpowiedzi). Każda taka wymiana informacji może być zainicjowana wyłącznie przez klienta. Każda taka sekwencja „żądanie-odpowiedź” wymaga ustanowienia oddzielnego połączenia.
Powoduje to duży ruch w sieci i spowalnia proces komunikacji
Treść wiadomości może zawierać różne dane, przykładowo mogą to być proste dane z serwerów lub klientów, ale także pliki binarne w różnych formatach. Generalnie każdy rodzaj danych może być przesyłany przez HTTP, jeśli tylko aplikacje klienckie i serwerowe znają format przesyłanych danych. Zachęcam do lektury działu "Format danych".
Aplikacje klienckie mogą używać zarówno synchronicznej, jak i asynchronicznej komunikacji HTTP z serwerami. Wszystko zależy od programistów.
Komunikacja synchroniczna oznacza, że wysłanie żądania blokuje wykonanie kodu po stronie klienta do czasu odpowiedzi serwera. Ten tryb może powodować "zamrożenie" ekranu klienta na długi czas.
Dlatego powszechnie używany jest tryb asynchroniczny. W tym modelu wysyłane jest żądanie, a aplikacja klientowska kontynuuje pracę (wykonywany jest kod). Po otrzymaniu odpowiedzi z serwera uruchamiana jest właściwa funkcja "callback" odpowiednio reagująca na uzyskane dane.
Najwyższy czas na pierwsze ćwiczenia praktyczne.
Ćwiczenie 1
Skorzystaj z przeglądarki, aby skorzystać z usługi demo, którą dla Ciebie przygotowałem. Wpisz w polu adresowym przeglądarki następujący tekst:
To jest przykład aplikacji internetowej. Użytkownik posiada aplikację kliencką (przeglądarkę internetową), która komunikuje się z aplikacją zainstalowaną na serwerze (w tym przypadku skryptem PHP).
Oczywiście nie musisz używać przeglądarki, aby skorzystać z tej usługi. Możesz napisać swoją aplikację w wybranym przez siebie języku i wstawić odpowiedni kod, aby wywołać to żądanie HTTP.
Wstawiłem wywołanie skryptu clock.php w kodzie HTML tej strony. Możesz zobaczyć wynik, klikając ten link: ↯. Analiza kodu tej strony może Ci się wydać nieprzyjemna. Przygotowałem więc specjalnie bardzo prostą aplikację. Możesz ją uruchomić w Twojej przeglądarce, a następnie podejrzeć jej kod HTML - kliknij tu.
Wiesz już, że to żądanie zwraca czas z zegara serwera. Skrypt PHP po stronie serwera jest bardzo prosty:
W poprzednim przykładzie niczego nie opracowywałeś. Skorzystałeś tylko ze swojej przeglądarki i skryptu na serwerze. Naszym celem jest to, że powinieneś właśnie opracowywać aplikacje typu klient. Wspominałem już wcześniej, że możesz to robić w dowolnym języku programowania, po prostu w czym potrafisz. Przedstawię Ci teraz bardzo prosty przykład takiej aplikacji napisanej w HTML. Wykorzystm do tego celu element <form>, który służy w HTML do tworzenia tzw. formularzy.
Formularz to kontener dla różnych gotowych elementów HTML, w których użytkownik może wpisać dane i zlecić ich wysłanie do serwera. Wysyłanie danych jest możliwe zarówno metodą GET jak i POST (metody protokołu HTTP). Musisz wybrać w swoim kodzie metodę odpowiednią dla skryptu na serwerze - programista w kodzie skryptu określił jaką metodę transferu danych akceptuje. Ja oferuje Ci tu skrypt sumator.php, który akceptuje obie metody, możesz więc użyć GET albo POST.
Oto kod HTML takiego formularza - popatrz jaki on jest banalnie prosty.
Ten kod móglbyś podejrzeć w przeglądarce po uruchomieniu mojej aplikacji ↯ dlatego dalej bardzo często nie będę wyświetlał kodu omawianych aplikacji. W ramach tego ćwiczenia zalecam Ci samodzielne utworzenie pliku sumator.html i zapisanie w nim powyższego kodu. Następnie możesz uruchomić wykonywanie tego kodu.
Zwracam Ci uwagę, że z tego skryptu mógłbyś skorzystać też w inny sposób. Możesz wpisać w polu adresowym przeglądarki:
Jeśli chcesz zsumować inne liczby niż 2 i 3, to wpisz zamiast tych liczb takie wartości jakie sobie życzysz dodać do siebie.
To polecenie powoduje wywołanie na serwerze usługi sumator.php oraz przesłanie do serwera danych metodą GET (zwróć uwagę na fragment polecenia: ?x=2&y=3).
Być może wielu z Was poprzednia aplikacja rozczarowała. Po wysłaniu żądania usługi na serwer Twoja strona była przeładowywana. Wynik był wyświetlany w formie jaką ja ustaliłem w kodzie skryptu PHP.
Dla usunięcia tego ograniczenia wymyślono technologię AJAX (AJAX = Asynchronous JavaScript And XML). Przeglądarki internetowe z zaimplementowanym JavaScript mają wbudowany obiekt XMLHttpRequest. Ten obiekt umożliwia żądanie danych z serwera. Do żądania mogą być dołączone dane dla serwera. W celu transferu danych można wybrać metodę GET lub POST protokołu HTTP.
Powinieneś nauczyć się korzystania z tego obiektu w swoim kodzie JavaScript. Dla tego celu przygotowałem skrypt sumatorAJAX.php. Przygotowałem też aplikację kliencką ↯, którą polecam Ci uruchomić i przeanalizować jej kod.
Sprawdż też jaką otrzymasz odpowiedź gdy wpiszesz w polu adresowym przeglądarki:
Przekonasz się, że skrypt sumatorAJAX.php działa inaczej niż skrypt sumator.php.
Mam dla ciebie następującą pracę domową:
Napisz w językach HTML i JavaScript aplikację, która będzie zwykłym zegarem. Oczywiście skorzystaj z prezentowanej usługi (clock.php). Możesz to również zrobić w innym języku programowania.
Powodzenia :)
Mam też materiał wstępny do moich zajęć stacjonarnych obejmujących temat aplikacji webowych opartych na modelu komunikacyjnym "Klient-Serwer".
Jeśli chcesz, możesz też do niego zajrzeć - kliknij tu.