HTTP-приложения #
Версии презентации
Передача документов в сети #
- Сеть — средство передачи данных между исследовательскими организациями
- Данные закодированы в бинарном формате
- Данные обычно представлены в форме файлов, хранящихся в файловой системе
- Необходимо передавать файлы между разными организациями
Технология File Transfer Protocol (FTP) описана в 1971 году
В качестве базовой модели используется подход иерархической файловой системы, которая доступна на удалённом сервере
Возможности протокола FTP #
- Отображение иерархии каталогов на удалённом сервере
- Возможность передачи файлов между сервером и клиентом
- Защита данных за уровнем аутентификации и авторизации
- Для того, чтобы просмотреть файл клиенту необходимо:
- Подключиться к серверу
- Пройти этак аутентификации и получить авторизацию
- Получить документ на локальный компьютер
- Открыть на локальном компьютере в специализированной программе
Ограничения протокола FTP #
- Пользователю нужно знать сетевой адрес сервера, на котором находятся данные
- Пользователю необходимо знать структуру каталогов на удалённом сервере
- Пользователю необходимо специализированное программное обеспечение, чтобы работать с данными документов
- Чтобы прочесть удалённый документ, его надо сначала получить
- Если необходимо получить другой документ, то необходимо пройти все шаги
- Название документа должно передавать его назначение
Интернет гипертекста #
В рамках концепции гипертекста доступ ко всем данным может быть осуществлён с помощью одного приложения, браузера, способного отображать документы и удобным образом переходить к другим документам в сети
- Веб-браузер является средством просмотра HTML-документов
- HTML-документы содержат текст и ссылки на другие документы
- Документы передаются с сервера на клиент с помощью протокола HTTP
- Для доступа к данным пользователю достаточно знать доменное имя сервера
Базовые технологии интернета гипертекста
- Протокол обмена документами HTTP был утверждён в 1992 году
- Язык разметки документов HTML был утверждён в 1993 году
Стек сетевых протоколов TCP/IP #
- В рамках протокола IP каждому компьютеру назначается уникальный сетевой адрес
- Адрес представляет собой 32-битное или 128-битное число (4 и 6 версии)
- Компьютеры объединены в единую сеть, способную передавать сообщения
- Хорошей аналогией является отправка писем или посылок
Другие протоколы стека решают задачи организации передачи сообщений между приложениями, запущенными на разных компьютерах
Протокол разработан в 1972-1978 годах, с 1983 года является основой сети Интернет
Вопросы организации сетевого взаимодействия #
- Передача данных между компьютерами по физическим каналам: металлический провод, оптический кабель, воздух - с учётом возможности повреждения данных
- Выделение адресов компьютерам в рамках сети
- Передача данных между разными группами физически соединённых сетей
- Передача данных между логическими группами компьютеров
- Организация сетевого взаимодействия в рамках сети Интернет
- Передача данных между приватными сетями и сетью Интернет
- Разработка протоколов для передачи данных между конкретными приложениями
- Организация сетевого взаимодействия на большие и сверх большие расстояния
Система доменных имён #
Domain Name System, DNS, Система доменных имён — система, которая обеспечивает преобразование доменных имён в сетевые адреса
Изначально разработана в 1983-1987 годах
Локальная настройка DNS #
При разрешении доменного имени ОС использует следующие источники информации:
- Локальный файл, hosts
- UNIX-like (GNU/Linux, macOS):
/etc/hosts
- Windows:
C:\Windows\System32\Drivers\etc\hosts
- UNIX-like (GNU/Linux, macOS):
- DNS-сервер, расположенный либо в локальной сети, либо доступный глобально
Настройка файла hosts
#
Описывает связь между IP-адресом и доменными именами, формат:
127.0.0.1 some.dev localhost
127.0.0.1
— локальный адрес компьютера, есть у каждого компьютераsome.dev
— доменное имя, связанное с адресомlocalhost
— зарезервированное доменное имя текущего компьютера
Локальный кеширующий DNS-сервер #
В локальной сети работает DNS-сервер, который работает в проксирующем режиме
Протокол HTTP #
Является протоколом прикладного уровня, решающий задачу передачи документов
В рамках протокола выделяются 2 роли: сервер и клиент
- Приложение-сервер работает постоянно и ожидает подключения от клиента
- Клиент подключается к серверу и передаёт запрос на получение документа
- Сервер возвращает запрошенный документ, если он существует
- Сервер закрывает соединение после передачи документа
История #
- Версия 0.9 представлена в 1990-1992 годах
- Версия 1.0 стандартизирована в 1996 году
- Версия 1.1 стандартизирована в 1999 году
- Версия 2 стандартизирована в 2015 году
- Ведутся работы по стандартизации 3 версии
Особенности HTTP-приложений #
- HTTP-сервер работает постоянно, так как он не знает когда к нему планирует обратиться клиент
- HTTP-сервер может одновременно обрабатывать запросы от множества клиентов
- Клиент может послать очередной запрос с любой задержкой
- В последних версиях протокола HTTP сервер может инициировать отправку данных на сторону клиента
HTTP-приложения являются распределёнными приложениями, в которых как сервер, так и клиент должен поддерживать совместное актуальное состояние
Роли участников в HTTP-взаимодействии #
Между клиентом и сервером может находится несколько проксирующих серверов
- Задача прокси-серверов, находящихся рядом с клиентом состоит в уменьшении объёма запрашиваемых данных, в кешировании, т.к. запросы могут быть одинаковыми у разных клиентов
- В современны браузерах встроен агрессивный кеширующий сервер
- Задачи прокси-сервера, находящегося рядом с серверами, состоит в балансировке нагрузки между серверами
- По географическому положению
- По степени нагрузки
- В зависимости от клиента
HTTP-запросы #
Изначально HTTP-протокол разрабатывался как текстовый, то есть клиент и сервер обмениваются специально оформленными текстовыми сообщениями друг с другом
- Клиент открывает TCP-соединение с сервером, которое используется для отправки сообщения, приёма ответа
- Клиент посылает HTTP-сообщение, например:
GET /index.html HTTP/1.1 Host: developer.mozilla.org Accept-Language: ru
- Сервер отвечает документом на сообщение:
HTTP/1.1 200 OK Date: Sat, 09 Oct 2010 14:28:02 GMT ... <!DOCTYPE html...
- Клиент закрывает или переиспользует TCP-соединение для другого запроса
Разбор структуры HTTP-запроса #
GET /index.html HTTP/1.1
Host: uniyar.ac.ru
Accept-Language: ru
- Первая строка содержит описание запроса
GET
— метод (тип запроса)/index.html
— путь к документу, к которому осуществляется запросHTTP/1.1
— версия протокола
- На следующих строках указываются заголовки запроса в формате
название : значение
- После заголовков может идти тело запроса, его данные
Разбор структуры HTTP-ответа #
HTTP/1.1 200 OK
Date: Sat, 09 Oct 2010 14:28:02 GMT
...
Content-Length: 2761
Content-type: text-html; charset=utf-8
<!DOCTYPE html...
- Первая строка описывает результаты запроса
HTTP/1.1
— версия протокола200
— код ответа сервера, указывающий результат обработкиOK
— краткое текстовое описание кода ответа
- Список заголовков ответа
- Если в рамках ответа возвращается документ, то среди заголовков точно будет указан
Content-Length
, содержащий размер документа в символах - Через пустую строку после заголовков идёт тело документа
Группы кодов статуса #
В протоколе определены следующие группы кодов ответа
100-199
— Информационные ответы200-299
— Успешные ответы300-399
— Перенаправления400-499
— Ошибки в запросе от клиента500-599
— Ошибки в работе сервера
Часто используемые ответы #
200
— запрос был выполнен успешно301
— перенесён на постоянной основе302
— документ временно перенесён404
— документ не найден
Базовый шаблон взаимодействия #
В качестве клиента в HTTP-взаимодействии может выступать любое приложение, которое реализует HTTP-протокол
Зачастую таким клиентом выступает веб-браузер, который получает и отображает веб-страницу для пользователя
- Пользователь указывает в браузере адрес документа, который хочет просмотреть
- Браузер выполняет запрос к серверу и получает в ответ HTML-документ
- Документ внутри себя указывает другие документы, которые нужны для отображения и работы документа:
- Изображения и видео-файлы для отображения на странице
- CSS-документы определяющие внешний вид элементов на странице
- JavaScript-документы для выполнения в рамках веб-браузера
- WebAssembly-модули для выполнения интенсивных вычислений
- Браузер запрашивает все эти элементы и формирует из них страницу
Особенности протокола HTTP #
Протокол HTTP является простым #
- Протокол изначально текстовый и состоит из небольшого набора элементов
- С помощью простых инструментов бинарные запросы HTTP2 легко разбираются
Протокол HTTP является расширяемым #
Благодаря механизму заголовков можно добавлять новую семантику к запросам и ответам. Достаточно ввести соглашение между клиентом и сервером
В HTTP каждый запрос индивидуален #
С точки зрения протокола HTTP каждый запрос отдельный запрос не зависит от других, т.е. в новом запросе нельзя сослаться на предыдущий и т.д.
HTTP поддерживает сессии #
Благодаря заголовку Cookies
сервер и браузер могут реализовать механизм сессий: и клиент, и сервер могут устанавливать новые значения и обязуются их передавать в рамках запросов и ответов
Идентификация документов #
Для указания местоположения целевого документа в сети Интернет используется Uniform Resource Identifier, URI
- Представляет собой символьную строку, которая идентифицирует ресурс
- Может быть применена как в сети Интернет, так и в других средах
Структура URI #
[ схема ":" ] [ // источник ] путь [ "?" запрос ] [ "#" фрагмент ]
Блоки внутри [ ]
являются опциональными и могут быть опущены
- Схема обычно описывает протокол доступа:
http
,ftp
,file
и т.д. - Источник содержит адрес сервера, на котором расположен документ
- Путь описывает местоположение документа на источнике
- Запрос описывает дополнительные параметры к получаемому документу
- Фрагмент содержит указание на часть документа
Идентификация в рамках протокола HTTP #
Рассмотрим веб-сервер web-app.net
, раздающий документы из файловой системы
Структура ФС:
/var/www/site
├── 404.html
├── assets
│ └── main.css.map
├── feed.xml
├── index.html
├── labs
│ ├── 001-lab-01.html
│ ├── 002-lab-02.html
├── labs.html
├── reference
│ ├── books.html
│ ├── editors.html
│ ├── schedule.html
│ ├── tasks.html
└── topics.html
- Схема доступа к данным —
http
- Иерархическая часть строится из имени сервера и расположения документа на сервере
- Корневым каталогом для сервера является
/var/www/site
Для файла /var/www/site/index.html
URI будет
http://web-app.net/index.html
Для файла /var/www/site/reference/tasks.html
http://web-app.net/reference/tasks.html
В рамках протокола HTTP иерархия соответствует файловой системе с разделителем /
Идентификация файлов на файловой системе #
Для указания пути к локальным файлам существует собственная схема — file
file://host/path
- Префикс схемы
file://
- Затем идёт указание имени компьютера, на котором расположен файл
- Если имя компьютера не указано, то считается текущий компьютер
localhost
- Иерархическая часть описывает местоположение файла в рамках файловой системы
- В качестве разделителя используется прямой слеш
/
- Для файла в ОС семейства Windows
- Путь:
C:\my-site\information.html
- URI с хостом:
file://localhost/C:/my-site/information.html
- URI:
file:///C:/my-site/information.html
- Путь:
- Для файла в Unix-подобных ОС
- Путь:
/var/www/my-site/index.html
- URI с хостом:
file://localhost/var/ww/my-site/index.html
- URI:
file:///var/www/my-site/index.html
- Путь:
Полные и частичные URI #
Ключевая особенность гипертекста — формировать ссылки между документами в сети, связывая их в единую сеть
- Ссылка может вести на документ на другом сервере
- Ссылка может вести на документ на текущем сервере
В рамках последней схемы удобно использовать частичные URI
Частичный URI #
- При формировании частичного URI не надо указывать ни схему, ни название сервера, на котором находится документ, только путь
- Частичные URI могут быть использованы только внутри документа для описания пути к другим элементам, пользователям доступны только полные URI
- Клиент (браузер) при обращении по частичной ссылке преобразует её в абсолютную
URI документа = абсолютный URI текущего документа + частичный URI
Частичные URI могут быть относительными или абсолютными
Относительные и абсолютные частичные URI #
- Абсолютный частичный путь — из корня сайта
- Относительный частичный путь — путь относительно текущего документа
Отличить абсолютный путь от относительного легко — он начинается с символа /
/
├── css
│ └── style.css
├── index.html
└── topic
├── list.html
├── topic-1.html
└── topic-2.html
- Абсолютный частичный путь к документу
index.html
:/index.html
- Абсолютный частичный путь к документу
style.css
:/css/style.css
Они будут одинаковыми для любого просматриваемого документа на сайте
При формировании относительных частичных путей используется каталог, в котором находится документ с ссылкой
- Для файла
index.html
таким каталогом каталогом является/
- Для файла
topic-2.html
—/topic
Абсолютные частичные URI на документы #
При формировании ссылки к документу внутри одного сайта удобно использовать абсолютный путь
Рассмотрим структуру сайта example-app.net
/
├── css
│ └── style.css
├── index.html
└── topic
├── list.html
├── topic-1.html
└── topic-2.html
В рамках сайта у каждого файла будет свой собственный абсолютные частичные URL:
style.css
:/style.css
index.html
:/index.html
list.html
:/topic/list.html
topic-1.html
:/topic/topic-1.html
topic-2.html
:/topic/topic-2.html
Пример построения относительных путей #
Построим относительный путь от файла /index.html
/
├── css
│ └── style.css
├── index.html
└── topic
├── list.html
├── topic-1.html
└── topic-2.html
- Пользователь обращается к стартовой странице
http://example-app.net/index.html
- Для оформления содержимого в документе указана ссылка на CSS-стили:
css/style.css
- Клиентское приложение формирует абсолютный путь
- Высчитывается расположение документа,
/
- К пути добавляется относительный путь
css/style.css
:/css/style.css
- Формируется URL, в котором добавляется схема, и имя сервера
http://example-app.net
:http://example-app.net/css/style.css
- Высчитывается расположение документа,
Относительный путь к родительскому каталогу #
Рассмотрим построение пути от файла topic-1.html
к файлу /css/style.css
/
├── css
│ └── style.css
├── index.html
└── topic
├── list.html
├── topic-1.html
└── topic-2.html
Для обращения к родительскому каталогу следует использовать специальное название каталога — ..
Этот специальный каталог присутствует и в обычной файловой системе и может быть использован не только в
- Пользователь обращается к стартовой странице
http://example-app.net/topic/topic-1.html
- Для оформления содержимого в документе указана ссылка на CSS-стили:
../css/style.css
- Клиентское приложение формирует абсолютный путь
- Высчитывается расположение документа на сервере,
/topic/
- К пути добавляется относительный путь
../css/style.css
:/topic/../css/style.css
/css/style.css
- Формируется URL, в котором добавляется схема, и имя сервера
http://example-app.net
:http://example-app.net/css/style.css
- Высчитывается расположение документа на сервере,
Какие URI использовать? #
Выделили следующие типы URI:
- Полный URI, включающий схему и имя хоста и путь к файлу
- Абсолютный частичный URI, включающий путь к файлу от корня
- Относительный частичный URI, включающий путь от расположения файла
При ссылке на документ на другом сайте #
Возможно использовать только полный URI
Ссылка на документ собственного сайта #
Удобно использовать частичный URI, так как:
- Он значительно короче полного пути, его легче использовать
- Адрес сайта может измениться за время его существования
Абсолютный или относительный частичный URI? #
К плюсам использования относительного частичного URI относят:
- Возможность работы с документами как через веб-сервер (схема
http
), так и через уровень файловой системы (схемаfile
) - Возможность размещения документов сайта не только в корне сервера
- Возможность предоставления одинаковых документов в разных частях нескольких сайтов (может быть и недостатком)
- Возможность предоставления документов другим пользователям
Ограничения относительных частичных URI:
- Некоторые документы требуют указания абсолютных частичных URI
- Для формирования относительных URI может потребоваться больше усилий
Язык HTML #
- Позволяет оформить текстовый документ, содержащий ссылки на другие текстовые документы
- Для просмотра HTML-документов достаточно простого приложения
История развития стандарта #
- 1.0, 1993, изначальный выпуск спецификации: отображение статической информации и изображений, специальные данные CERN
- 2.0, 1995, расширение возможностей языка: таблицы, формы
- 3.0, 1997, стандартизация организацией World Wide Web Consortium, W3C
- 4.0, 1997, запрет на использование устаревших элементов
- 5, 2011-2014, переход к концепции «живого стандарта», постоянно развивающихся
На всей протяжении истории стандарт реализовывался разными производителями по-разному, расширялся, дополнялся и т.д. См. война браузеров
Разметка документа #
HTML-документ является обычным текстовым документом, для формирования которого достаточно обычного текстового редактора
<!doctype html>
<html>
<head>
<title>Заголовок</title>
</head>
<body>
<div>
<p>Информация</p>
</div>
</body>
</html>
Основа разметки — это тег, который описывает отдельный элемент документа
- Теги описывают дерево из элементов
- Элемент обозначается либо набором парных элементов
<p>
и</p>
, либо одиночным,<img>
- Документ начинается с указания типа документа,
<!doctype html>
, что указывает на 5 версию
- Текст между тегами
<html>
и</html>
описывает содержимое страницы - Текст между тегами
<body>
и</body>
показывает видимое содержимое страницы - Текст между тегами
<head>
и</head>
содержит мета-информацию о документе, например данные о языке документа, параметрах отображения, заголовке (title
)
Краткий обзор тегов #
Нормальные элементы #
Для их описания обычно используется пара тегов, каждый из которых может быть пропущен
- Открывающий тег,
<tag>
, содержит название элемента и набор атрибутов - Содержимое элемента располагается после открывающего тега и может содержать другие теги и текст
- Закрывающий тег, который содержит имя элемента и косую черту:
</tag>
Текстовые элементы #
Данные элементы являются нормальными элементами, содержимыми которых могут быть только текст
Пустые элементы #
Данные элементы не имеют содержимого и описываются только открывающим тегом
- Служат для дополнительного описания текста
- Позволяют внедрить внешние файлы в документ, например изображения
Атрибуты HTML-элементов #
Атрибутом называются специальные слова, расположенные в открывающем теге и контролирующие поведение HTML-элемента
- Атрибут может модифицировать функциональность элемента
- Атрибут может требоваться для корректной работы элемента
Описание атрибутов #
<element attribute="значение">содержимое</element>
Для описания атрибутов обычно используется пара название-значение, разделённое символом =
. У ряда атрибутов нет значения, для их указания достаточно только названия
- Название атрибута —
attribute
- Значение атрибута —
значение
Пример #
<abbr id="anId" class="aClass" style="color:blue;"
title="Hypertext Markup Language">HTML</abbr>
Формирование ссылок на другие документы #
При работе с HTML-документами необходимо ссылаться на другие документы:
- HTML-документы для того, чтобы пользователь смог их открыть
- CSS-документы для формирования внешнего вида элементов
- JavaScript-документы для добавления динамического содержимого на страницу
Ссылки на другие HTML-документы #
Используется элемент Anchor, который описывается тегом <a>
Для указания пути к документу используется атрибут href
<a href="http://ya.ru">Поисковая система</a>
Текстовое содержимое отображается пользователю в виде интерактивного элемента, по нажатию на который веб-браузер попытается открыть документ по указанной ссылке
Какие бывают веб-приложения #
- Клиентом выступает веб-браузер или отдельное приложение?
- Необходимо ли показывать HTML-документы?
- HTML-документы формируются на стороне сервера или на стороне клиента?
- Достаточно ли мощности одного сервера для обслуживания всех клиентов?
- Распределены ли клиенты между разными частями света?
В рамках курса будем рассматривать следующие ответы:
- Нам необходимо показать HTML-документы, сформированные на серверной стороне для небольшого-среднего объёма клиентов