2.84M

Category:

programming

lecture_04

Веб-браузеры – клиенты WWW
Веб-браузер — программа для запросов и
отображения вебстраниц, и перехода от
одной страницы к другой
URL (Uniform Resource Locator) –
универсальный адрес ресурса
http://www.mmcs.sfedu.ru/index.php
протокол
имя сервера
Расширенная
форма:
http://login:passwd@server:port/path
адрес ресурса
на сервере
2

3.

Популярные браузеры
Браузер
Посетители (ru)
Все посетители
IE (Edge)
3%
4%
Opera
7%
2%
Chrome
55%
63%
Yandex/Samsung
16%
3%
Safari
12%
20%
Тесты браузеров:
HTML5 test
(555 - max):
Opera = 518, Chrome = 528,
Mozilla = 491, Edge = 492, Safari = 471
3

4.

Другие клиенты
Другие интеллектуальные устройства или
бытовая техника
Специальное программное обеспечение
может самостоятельно обращаться к вебсерверам для получения обновлений или
другой информации
4

5.

Веб-серверы
Веб-сервер — это программа, принимающая HTTPзапросы от клиентов и выдающий им HTTP-ответы,
обычно вместе с HTML-страницей, изображениями,
файлами, медиа-потоком или другими данными
Дополнительными функциями многих веб-серверов
являются:
Virtual hosting
поддержка динамически генерируемых страниц,
поддержка HTTPS для защищённых соединений с клиентами
эффективное разделение ширины канала
кэширование
аутентификация пользователей,
Стандартный порт: 80/TCP (443 - https, 8080)
5

6.

Популярные веб-серверы
Apache – 24% популярных сайтов
Microsoft Internet Information Services (IIS) – 5%
nginx — свободный веб-сервер, разработанный
Игорем Сысоевым в 2002 году. В текущий момент
пользуется большой популярностью на крупных
сайтах (yandex.ru) – 32 %
OpenResty (основан на nginx) – 7%
Nodejs - Express, Ruby on Rails – WEBrick, ...
6

7.

Настройка Nginx
Файл /etc/nginx/nginx.conf
user
www www;
worker_processes 5;
error_log /var/log/nginx.error_log info;
events {
worker_connections 2000;
# use [ kqueue | epoll | /dev/poll | select | poll ];
use epoll;
}
Сайты:
server {
server_name .example.com;
location / {
root /sites/example;
}}
7

8.

HTTP – HyperText Transfer
Protocol
Порядок запроса страницы
http://mmcs.sfedu.ru/index.php
Браузер определяет IP-адрес сервера, по
известному имени из URL
Устанавливает TCP-соединение с сервером
Отправляет текстовый запрос:
GET /index.php HTTP/1.1
User-Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:44.0)
Host: mmmc.sfedu.ru
Connection: Keep-Alive
Сервер получает запрос и находит требуемый
8

9.

HTTP – ответ сервера
Сервер формирует ответ, состоящий из
заголовка и тела
HTTP/1.1 200 OK
Server: Apache/2.4.10 (Debian)
X-Powered-By: PHP/5.6.30-0+deb8u1
Cache-Control: no-store, no-cache, must-revalidate
Content-Encoding: gzip
Content-Length: 9914
Keep-Alive: timeout=15, max=100
Connection: Keep-Alive
Content-Type: text/html; charset=utf-8
<!DOCTYPE html>
<html xml:lang="ru-ru" lang="ru-ru" dir="ltr">
<head>
<base href="http://mmcs.sfedu.ru/index.php" />
9

10.

Проблема – передача данных
от клиента к серверу
протокол HTTP изначально позволял
только получать клиенту данные от
сервера
если добавить возможность отправки
данных на веб-сервер, как тогда серверу
их обрабатывать?
выход: сервер должен запускать
программу и передавать ей данные от
клиента, а затем отсылать ее результат
10

11.

CGI – Common Gateway
Interface
CGI — стандарт обмена данными между
прикладной программой, выполняемой по
запросу пользователя, и HTTP-сервером,
который данную программу запускает
Данные передаются программе
через переменные окружения
на стандартный вход
Программа передает данные серверу через
стандартный выход. Формат такой же как у
HTTP ответа
Впервые поддержка CGI была осуществлена
на сервере CERN в апреле 1994 года
11

12.

Схема взаимодействия
программ в стандарте CGI
12

13.

Пример работы CGI.
Веб-страница
После нажатия на кнопку “Рассчитать”
браузер отправит запрос с URL вида
http://server.ru/calc.cgi?a=12&b=34
13

14.

Пример работы CGI.
CGI-скрипт на сервере
#!/usr/bin/python
import os
print(‘Content-type: text/html’)
print(‘’)
q = os.environ(‘QUERY_STRING’)
separator = q.find(‘&’)
a = int( q[2 : separator] )
b = int( q[separator+3 : ] )
print(‘<html><body>Результат сложения’,
a, ’+’, b, ’=’, a+b, ’</body></html>’)
14

15.

Методы HTTP-запросов
GET- запрашивает содержимое указанного ресурса.
В случае наличия у ресурса параметров, они
передаются в URI:
http://www.example.net/resource?param1=value1&param2=value2
POST - передает пользовательские данные
(например, из HTML-формы) заданному ресурсу
в теле запроса
HEAD - запрашивает заголовок указанного ресурса
PUT - загружает указанный ресурс на сервер
DELETE - удаляет указанный ресурс
15

16.

Сравнение GET и POST
GET /calc.cgi?a=12&b=34 HTTP/1.1
Host: server.ru
User-Agent: Mozilla/5.0 (Linux)
POST /calc.cgi HTTP/1.1
Host: server.ru
User-Agent: Mozilla/5.0 (Linux)
Content-Type: application/x-www-form-urlencoded
Content-Length: 18
a=12&b=34
16

17.

Передача данных
CGI-приложению
GET /calc.cgi?a=12&b=34
данные передаются серверу в url
сервер передает их программе через
переменные окружения (QUERY_STRING)
POST /calc.cgi
данные передаются серверу в теле запроса
сервер передает их программе через поток
стандартного ввода
17

18.

Кодирование и формат
отправляемых данных
по умолчанию –
application/x-www-form-urlencoded
все символы не из первой половины ASCII
заменяются их кодами: “a” на “%D0%B0”
пробелы – на «+»; «&» – на «%26»
multipart/form-data – используется для
отправки двоичных данных и данных
смешанного типа
18

19.

Кодирование и формат
отправляемых данных
application/x-www-form-urlencoded
a=12&b=34
multipart/form-data
------------Gt1CO3wAR7XTbm1eE7LoA6
Content-Disposition: form-data; name="a"
12
------------Gt1CO3wAR7XTbm1eE7LoA6
Content-Disposition: form-data; name="b"
34
------------Gt1CO3wAR7XTbm1eE7LoA6-19

20.

Пример CGI-скрипта (POST)
Val(Environment.GetEnvironmentVariable('CONTENT_L
ENGTH'),n,err);
writeln(file,'Размер: ',n);
writeln(file,'Данные:');
SetLength(s,n);
for i:=0 to n-1 do read(s[i]);
for i:=0 to n-1 do write(f,s[i]);
writeln('Content-Type: text/html');
writeln('');
writeln('<html> <head> <title> OK </title> </head>
<body> <h1> Введенные в форму данные успешно
записаны в файл zapros_post.txt </h1></body>')
20

21.

Недостатки и альтернативы
CGI
вызов программы – «дорогая» операция,
особенно если это скрипт, который еще
нужно интерпретировать (или
откомпилировать)
Альтернативные технологии:
встроенные в веб-сервер модули (mod_php,
mod_perl в Apache)
Fast CGI
Свой собственный веб-сервер, например, на
основе NodeJS express или WSGI (python)
21

22.

Языки программирования CGIприложений
PHP
Perl
Microsoft ASP.NET (на сервере IIS)
JSP (Java Server Pages)
Python
Ruby
и другие
22

23.

Примеры
Вывод текущего времени (php):
Московское время
<?php echo date('H:i', time()); ?>
Вывод таблицы (python):
print '<table>'
for i in xrange(m) :
print '<tr>'
for j in xrange(n) :
print '<td>'+…+'</td>'
print '</tr>'
print '</table>'
23

24.

Cookies
HTTP-Cookie — служебная информация,
посылаемая веб-сервером на компьютер
пользователя, для сохранения браузером на
локальном компьютере
Применяется
для отличия пользователей веб-сервером друг от
друга
для сохранения данных о действиях пользователя
24

25.

Механизм Cookies
Сервер (CGI-программа) может установить
cookie в ответ на запрос браузера. Для этого в
заголовок ответа он добавляет строчку
Set-Cookie, например
Set-Cookie: sessionID=678893467800; lang=ru;
domain=mydomain.com; expires=09-Nov-08 23:12:40
Браузер соxраняет cookie и затем посылает на
этот сервер в виде строки Cookie в заголовке
каждого запроса, например
Cookie: sessionID=678893467800; lang=ru;
25

26.

Cookies:
Сохранение состояния

27.

Язык разметки гипертекста HTML
<html>
<head> <title>ФПЖ</title>
</head>
<body>
<h1> Факультет психологии
животных </h1>
<h2> О нас </h2>
<h2> Персонал </h2>
<h2> Популярные курсы
</h2>
</body>
</html>
27

28.

Добавим еще информации
28

29.

Исходный код
<html> <head>
<meta charset="windows-1251"/>
<link rel=stylesheet type=text/css href="files/styles1.css" />
<title>Факультет психологии животных</title>
</head>
<body>
<h1> Факультет психологии животных </h1>
<h2>О нас </h2>
<p> Наш факультет занимается ... Чем только наш факультет не занимается!</p>
<h2>Персонал </h2>
<ul>
<li><a href="teachers.html">Преподаватели</a></li>
<li><a href="graduates.html">Аспиранты</a></li>
<li><a href="animals.html">Неакадемический штат</a></li>
</ul>
<h2>Популярные курсы </h2>
<p>Среди наших курсов особой популярностью пользуются: </p>
<ul>
<li>"Переговоря с вашей зверюшкой"</li>
<li>"Сооружение собачьей будки"</li>
<li>"Дрессировка вашей морской свинки в суперагента ФБР"</li>
</ul>
</body> </html>
29

30.

CSS – каскадные таблицы
стилей
CSS (Cascading Style Sheets) —
технология описания внешнего вида
документа, написанного языком разметки
CSS1.0 вышла в 1996. Главная цель:
заменить многократное использование
тегов форматирования на лаконичные
CSS-стили
30

31.

Описание стиля
s1 [,s2]
{
св-во1: знач1;
св-во2: знач2;
св-во3: знач3;
}
Оформление:
p { font-size: 20px;}
h2 {
font-size : 110 %;
font-weight : bold;
color : red;
}
31

32.

CSS – каскадные таблицы
стилей
Способы связывания с документом:
Внешние таблицы стилей – в отдельном cssфайле. Связывается с HTML-документом
командой <link rel="stylesheet"
href="/templates/template.css" type="text/css" />
внутри заголовка
Встроенные – в теге <style> в заголовке
HTML-документа
Inline: <tag_name style="декларация стиля”…>
32

33.

Пример использования CSS
HTML:
<p class=“mystyle1”>
текст абзаца
</p>
CSS-файл:
.mystyle1
{
color: red;
background: yellow;
font-weight: bold;
}
33

34.

CSS3-анимация
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:myfirst 5s;
}
@keyframes myfirst
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
http://www.w3schools.com/css/tryit.asp?filename=trycss3_animation3
34

35.

DOM - объектная модель
документов
DOM (Document Object Model) - это программный
интерфейс, позволяющий программам и скриптам
получить доступ к элементам документа, а также
изменять содержимое, структуру и оформление
документа
HTML-документ имеет иерархическую структуру,
которая представлена в DOM в виде дерева, узлами
которого являются теги и текст. Вложенным HTMLтегам соответствуют вложенные узлы дерева
35

36.

Пример
<html> <head> <title>ФПЖ</title> </head>
<body>
<h1>Факультет психологии животных</h1>
<h2> О нас </h2>
<h2> Персонал </h2>
</body>
<html>
</html>
<head>
<title>
ФПЖ
<body>
<h1>
<h2>
Факультет ...
О нас
<h2>
Персонал
36

37.

JavaScript
впервые появился в Netscape 2.0 в 1996г.
написан Бренданом Эйчем
программы на JavaScript встраиваются в
веб-страницу и могут как угодно менять
ее содержимое
в этом же году Netscape передал
JavaScript Европейской Ассоциации
Компьютерных Производителей для
стандартизации
37

38.

JavaScript: пример (демо)
<html> <head>
<title>Javascript демо </title>
</head>
<body>
<div onclick=” r = Math.random;
style.color='rgba('+r()*256+','+r()*256+','+r()*256+')' ”>
Кликни меня
</div>
</body>
</html>
38

39.

Javascript-библиотеки и
веб-фреймворки
Предоставляют удобный кросс-
браузерный интерфейс к методам DOM,
обработчикам событий пользователя
Позволяют использовать на сайтах наборы
виджетов
Реализуют различные динамические
эффекты для элементов веб-страницы
Примеры: jQuery, Bootstrap, AngularJS,
ReactJS, VueJS
39

40.

jQuery
$(document).ready(function() {
$("#datepicker").datepicker( "option",
$.datepicker.regional["ru"] );
$("#datepicker").datepicker(
{dateFormat:'d MM'});
});
40

41.

AngularJS. MVC
View
41

42.

AngularJS. MVC
Model
Controller - двустороннее связывание данных
42

43.

AJAX Asynchronous JavaScript + XML
43

44.

Пример
xhr = new XMLHttpRequest();
xhr.open('POST', 'script.rb', true);
xhr.onreadystatechange = replyCallBackFunc;
xhr.setRequestHeader("Content-type",
"multipart/form-data; boundary=BBBBB");
xhr.send(s);
jQuery:
$.post("script.rb",
function( data ) { $( ".result" ).html( data ); });
44

45.

CMS
CMS – Content Management System –
система управления содержимым сайта позволяет управлять текстовым и
графическим наполнением веб-сайта,
предоставляя пользователю удобные
инструменты хранения и публикации
информации
Демонстрация Joomla
45

46.

Проблема 10k соединений
Это когда оборудование позволяет, а софт,
из-за своей архитектуры, не может
поддерживать 10 тысяч одновременных
соединений
Первое упоминание в 1999 году – Dan Kegel
по поводу сервиса распространения ПО
cdrom.com
Причина: недостатки ОС того времени
(каждый параллельный поток требует 2Мб
памяти для стека, 10k потоков – 20Гб - нету,
да еще ОС – 32х-битная)
46

47.

Проблема 10k соединений
Альтернативы потокам:
Использование неблокирующих сокетов и функции poll
(это upgrade для функции select) для определения
пришли ли данные от кого-либо из 10k клиентов
Использование асинхронного ввода-вывода т.е.
обработчиков событий для сигналов о приходе
запросов от клиентов
Серверы: Nginx, Node.js, Lighttpd,
Tornado(python), Yaws(Erlang), …
Библиотеки/фреймворки: libevents, Netty (Java),
Twisted (python), ReactPHP, Celluloid (ruby), Erlang
47

48.

Проблема 10k соединений
сегодня
В современном 64-битном ядре Linux
проблемы 10k потоков нет: памяти много и
память под стек выделяется динамически
Множество подходов, альтернативных
потокам
А 10M одновременно подключенных
клиентов – слабо?
48

49.

HTML 5.0
Проблема: обработка ошибок HTML
2 пути: драконовская - запретить (xhtml,
WWW), разрешить и стандартизировать их
обработку (WHATWG)
Новые элементы — header, footer, section,
article, video, audio, progress, nav, meter,
time, aside, canvas;
Новые API:
Рисование
Контроль над проигрыванием медиафайлов
Хранение данных в браузере
49

50.

Canvas
низкоуровневое API для отрисовки
графики
поддерживается всеми современными
браузерами
аппаратное ускорение, WebGL
3d библиотеки (Three.js)
50

51.

Web storage
аналог cookie из HTML5.0
позволяет хранить 5 Мб данных
2 типа: локальное и сессионное
представляет собой ассоциативный
массив
доступ возможен только из скриптов на
стороне клиента
позволяет сделать сверхтонкого клиента
более толстым
51

52.

WebSocket
Смена парадигмы HTTP от модели «запрос-
ответ» к установлению и поддержанию
долговременных соединений клиентов и
сервера с передачей только полезных данных
(без заголовков). Поддерживает технологию
Server Push
Используются:
для веб-приложений с интенсивными обменами
данных (google docs, maps, биржи…)
многопользовательские веб-приложения (соцсети,
игры, совместная работа, чаты, …)
52

53.

WebSocket
<script>
ws = new WebSocket("ws://site.com/demo");
ws.onopen = function() { alert("Connection opened...") };
ws.onclose = function() { alert("Connection closed...") };
ws.onmessage = function(evt) {
$("#msg").append("<p>"+evt.data+"</p>"); };
</script>
53

54.

WebSocket
GET /demo HTTP/1.1
Upgrade: WebSocket
Connection: Upgrade
Host: site.com
Origin: http://site.com
браузер
сервер
HTTP/1.1 101 Web Socket Protocol Handshake
Upgrade: WebSocket
Connection: Upgrade
WebSocket-Origin: http://site.com
WebSocket-Location: ws://site.com/demo
54

55.

WebRTC
Web Real-Time Communications
Стандарт, описывающий
голосовое/видео/другое взаимодействие
клиентов (браузеров) без использования
сторонних плагинов
55

56.

Путь к WebRTC
56

57.

WebRTC-взаимодействие
SDP Offer
SDP Answer
Web Server
Application defined
interface (HTTPS /
Websockets based)
Signalling Path
Protocol not defined
(possibilities include SIP,
Jingle, XMPP)
Web Server
Application defined
interface (HTTPS /
Websockets based)
JS/HTML/CSS
JS/HTML/CSS
JavaScript API
JavaScript API
Browser
Media Path
Browser
Peer to Peer - Transport
framework based on SRTP
57

58.

HTTP2.0
Недостаток HTTP1.1: маленький КПД
использования TCP соединения. Особенно для
страниц с большим количеством мелких
элементов (картинок, css, javascriptбиблиотек).
Конвейеризация запросов отключена по
умолчанию из-за проблем с совместимостью
Выходы - костыли: спрайты, встраивание,
объединение и минимизация javascript,
шардинг
58

59.

HTTP2.0
В 2012 Google опубликовала протокол
SPDY (speedy) существенно более
быстрый, чем HTTP1.1
В 2015 на основе SPDY создан стандарт
HTTP2.0
Основные фичи: бинарный, сжатие
заголовков, только https, server push,
остановка передачи, мультиплексирование
потоков,
Совместимость – благодаря TLSсогласованию
59

60.

WebAssembly
Открытый стандарт бинарного кода исполняемых в
браузере программ для выполнения на клиенте кода
на разных языках (С++, C#, Rust, Go, ...)
Обычно используется для высокопроизводительного
или проприетарного кода
60

61.

Домашнее задание
Установите набор серверов OpenServer.
Выясните как работают примеры CGIскриптов из приложения к лекции.
Напишите CGI приложение на каком-
нибудь языке программирования: PHP,
Perl, Python или Ruby. Проверьте его
работу
61

English Русский Rules