HTTP-приложения

HTTP-приложения #

Версии презентации


Передача документов в сети #

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

Технология File Transfer Protocol (FTP) описана в 1971 году

В качестве базовой модели используется подход иерархической файловой системы, которая доступна на удалённом сервере


Возможности протокола FTP #

  • Отображение иерархии каталогов на удалённом сервере
  • Возможность передачи файлов между сервером и клиентом
  • Защита данных за уровнем аутентификации и авторизации
  • Для того, чтобы просмотреть файл клиенту необходимо:
    • Подключиться к серверу
    • Пройти этак аутентификации и получить авторизацию
    • Получить документ на локальный компьютер
    • Открыть на локальном компьютере в специализированной программе

Ограничения протокола FTP #

  • Пользователю нужно знать сетевой адрес сервера, на котором находятся данные
  • Пользователю необходимо знать структуру каталогов на удалённом сервере
  • Пользователю необходимо специализированное программное обеспечение, чтобы работать с данными документов
  • Чтобы прочесть удалённый документ, его надо сначала получить
  • Если необходимо получить другой документ, то необходимо пройти все шаги
  • Название документа должно передавать его назначение

Интернет гипертекста #

В рамках концепции гипертекста доступ ко всем данным может быть осуществлён с помощью одного приложения, браузера, способного отображать документы и удобным образом переходить к другим документам в сети

  • Веб-браузер является средством просмотра HTML-документов
  • HTML-документы содержат текст и ссылки на другие документы
  • Документы передаются с сервера на клиент с помощью протокола HTTP
  • Для доступа к данным пользователю достаточно знать доменное имя сервера

Базовые технологии интернета гипертекста

  • Протокол обмена документами HTTP был утверждён в 1992 году
  • Язык разметки документов HTML был утверждён в 1993 году

Стек сетевых протоколов TCP/IP #

  • В рамках протокола IP каждому компьютеру назначается уникальный сетевой адрес
  • Адрес представляет собой 32-битное или 128-битное число (4 и 6 версии)
  • Компьютеры объединены в единую сеть, способную передавать сообщения
  • Хорошей аналогией является отправка писем или посылок
flowchart LR pc1("ПК 1") message1>"Сообщение\nк ПК 3"] pc2("ПК 2") message2>"Сообщение\nк ПК 1"] pc3("ПК 3") message3>"Сообщение\nк ПК 2"] internet((Сеть\nИнтернет)) pc1 --- message1 --- internet pc2 --- message2 --- internet internet --- message3 --- pc3

Другие протоколы стека решают задачи организации передачи сообщений между приложениями, запущенными на разных компьютерах

Протокол разработан в 1972-1978 годах, с 1983 года является основой сети Интернет


Вопросы организации сетевого взаимодействия #

  • Передача данных между компьютерами по физическим каналам: металлический провод, оптический кабель, воздух - с учётом возможности повреждения данных
  • Выделение адресов компьютерам в рамках сети
  • Передача данных между разными группами физически соединённых сетей
  • Передача данных между логическими группами компьютеров
  • Организация сетевого взаимодействия в рамках сети Интернет
  • Передача данных между приватными сетями и сетью Интернет
  • Разработка протоколов для передачи данных между конкретными приложениями
  • Организация сетевого взаимодействия на большие и сверх большие расстояния

Система доменных имён #

Domain Name System, DNS, Система доменных имён — система, которая обеспечивает преобразование доменных имён в сетевые адреса

sequenceDiagram participant prog as Программа participant os as Операционная система (ОС) participant dns as DNS participant site as uniyar.ac.ru prog ->> os : Послать сообщение uniyar.ac.ru os ->> dns : Какой адрес у uniyar.ac.ru? dns -->> os : 193.233.51.81 os ->> site : IP-cообщение

Изначально разработана в 1983-1987 годах


Локальная настройка DNS #

При разрешении доменного имени ОС использует следующие источники информации:

  • Локальный файл, hosts
    • UNIX-like (GNU/Linux, macOS): /etc/hosts
    • Windows: C:\Windows\System32\Drivers\etc\hosts
  • DNS-сервер, расположенный либо в локальной сети, либо доступный глобально

Настройка файла hosts #

Описывает связь между IP-адресом и доменными именами, формат:

127.0.0.1 some.dev localhost
  • 127.0.0.1 — локальный адрес компьютера, есть у каждого компьютера
  • some.dev — доменное имя, связанное с адресом
  • localhost — зарезервированное доменное имя текущего компьютера

Локальный кеширующий DNS-сервер #

В локальной сети работает DNS-сервер, который работает в проксирующем режиме

sequenceDiagram participant os as ОС participant local as Локальный DNS-сервер participant global as DNS-сервер провайдера os ->> local : Адрес сервера ya.ru alt есть в кеше local -->> os : 87.250.250.242 else нет local ->> global: Адрес сервера ya.ru global -->> local: 87.250.250.242 local -->> os: 87.250.250.242 end

Протокол HTTP #

Является протоколом прикладного уровня, решающий задачу передачи документов

В рамках протокола выделяются 2 роли: сервер и клиент

  • Приложение-сервер работает постоянно и ожидает подключения от клиента
  • Клиент подключается к серверу и передаёт запрос на получение документа
  • Сервер возвращает запрошенный документ, если он существует
  • Сервер закрывает соединение после передачи документа

История #

  • Версия 0.9 представлена в 1990-1992 годах
  • Версия 1.0 стандартизирована в 1996 году
  • Версия 1.1 стандартизирована в 1999 году
  • Версия 2 стандартизирована в 2015 году
  • Ведутся работы по стандартизации 3 версии

Особенности HTTP-приложений #

  • HTTP-сервер работает постоянно, так как он не знает когда к нему планирует обратиться клиент
  • HTTP-сервер может одновременно обрабатывать запросы от множества клиентов
  • Клиент может послать очередной запрос с любой задержкой
  • В последних версиях протокола HTTP сервер может инициировать отправку данных на сторону клиента

HTTP-приложения являются распределёнными приложениями, в которых как сервер, так и клиент должен поддерживать совместное актуальное состояние


Роли участников в HTTP-взаимодействии #

Между клиентом и сервером может находится несколько проксирующих серверов

flowchart LR client("Клиент") proxy1("Прокси-\nсервер") proxy2("Прокси-\nсервер") server1("Сервер") server2("Сервер") client --> proxy1 --> proxy2 proxy2 --> server1 proxy2 --> server2
  • Задача прокси-серверов, находящихся рядом с клиентом состоит в уменьшении объёма запрашиваемых данных, в кешировании, т.к. запросы могут быть одинаковыми у разных клиентов
  • В современны браузерах встроен агрессивный кеширующий сервер
  • Задачи прокси-сервера, находящегося рядом с серверами, состоит в балансировке нагрузки между серверами
    • По географическому положению
    • По степени нагрузки
    • В зависимости от клиента

HTTP-запросы #

Изначально HTTP-протокол разрабатывался как текстовый, то есть клиент и сервер обмениваются специально оформленными текстовыми сообщениями друг с другом

  1. Клиент открывает TCP-соединение с сервером, которое используется для отправки сообщения, приёма ответа
  2. Клиент посылает HTTP-сообщение, например:
    GET /index.html HTTP/1.1
    Host: developer.mozilla.org
    Accept-Language: ru
  3. Сервер отвечает документом на сообщение:
    HTTP/1.1 200 OK
    Date: Sat, 09 Oct 2010 14:28:02 GMT
    ...
    <!DOCTYPE html...
  4. Клиент закрывает или переиспользует 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

  • Представляет собой символьную строку, которая идентифицирует ресурс
  • Может быть применена как в сети Интернет, так и в других средах

Что такое URL-адрес

Структура 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
  1. Пользователь обращается к стартовой странице http://example-app.net/index.html
  2. Для оформления содержимого в документе указана ссылка на CSS-стили: css/style.css
  3. Клиентское приложение формирует абсолютный путь
    1. Высчитывается расположение документа, /
    2. К пути добавляется относительный путь css/style.css: /css/style.css
    3. Формируется 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

Для обращения к родительскому каталогу следует использовать специальное название каталога — ..

Этот специальный каталог присутствует и в обычной файловой системе и может быть использован не только в

  1. Пользователь обращается к стартовой странице http://example-app.net/topic/topic-1.html
  2. Для оформления содержимого в документе указана ссылка на CSS-стили: ../css/style.css
  3. Клиентское приложение формирует абсолютный путь
    1. Высчитывается расположение документа на сервере, /topic/
    2. К пути добавляется относительный путь ../css/style.css:
      1. /topic/../css/style.css
      2. /css/style.css
    3. Формируется 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-документы, сформированные на серверной стороне для небольшого-среднего объёма клиентов

© A. M. Васильев, 2022, CC BY-SA 4.0, andrey@crafted.su