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, Система доменных имён — система, которая обеспечивает преобразование доменных имён в сетевые адреса

• Что такое DNS-сервер, Selectel
• Что такое DNS: рассказываем простыми словами, 1cloud

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://web-app.net/index.html

http://web-app.net/reference/tasks.html

Идентификация файлов на файловой системе #

Для указания пути к локальным файлам существует собственная схема — 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 таким каталогом каталогом является /
• Для файла topic-2.html — /topic

Абсолютные частичные URI на документы #

При формировании ссылки к документу внутри одного сайта удобно использовать абсолютный путь

Рассмотрим структуру сайта example-app.net

/
├── css
│   └── style.css
├── index.html
└── topic
    ├── list.html
    ├── topic-1.html
    └── topic-2.html

Пример построения относительных путей #

Построим относительный путь от файла /index.html

/
├── css
│   └── style.css
├── index.html
└── topic
    ├── list.html
    ├── topic-1.html
    └── topic-2.html

Относительный путь к родительскому каталогу #

Рассмотрим построение пути от файла 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>

• Текст между тегами <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-документы, сформированные на серверной стороне для небольшого-среднего объёма клиентов