Основные протоколы передачи данных

Протоколы — это правила в интернете, по которым устройства с разными операционными системами и программным обеспечением обмениваются данными. С их помощью, например, пользователь Safari на MacBook получает сообщение, отправленное через Chrome на Android.

Чтобы обмениваться данными было удобнее, задачи по их отправке и получению разделены. Создана архитектура «клиент-сервер», где клиент отправляет запрос, а сервер принимает его и возвращает ответ.

Сервер — это специальная программа, или мощный компьютер, его ещё называют хост-системой. Клиент — любое устройство для работы с сайтом, например, ноутбук, смартфон или бортовой компьютер в автомобиле.

Веб-приложение — это клиент-серверное приложение, в котором клиентом выступает браузер. Допустим, на сервере хранится HTML-страница с кодом. Браузер получает файл и показывает этот код как привычную страницу сайта.

Какие бывают протоколы

Протоколы определяют правила выполнения конкретных задач. Но фронтендерам необязательно знать все существующие протоколы — достаточно разбираться в основных.

Internet Protocol — IP

IP отвечает за поиск компьютеров в сети по их IP-адресам. Ещё он предоставляет стратегию маршрутизации, то есть составляет оптимальный маршрут для передачи данных.

Данные в интернете передаются IP-пакетами. У каждого пакета есть заголовок и данные. В заголовке находятся IP-адреса источника и пункта назначения. Данные — это само содержимое, например, часть веб-страницы.

Работу IP можно сравнить с почтовым отделением: протокол направляет IP-пакеты по интернету так же, как почта рассылает письма по всему миру. При доставке почта использует пункты передачи: письмо из отделения сначала попадает на поезд, потом на грузовик и в конце вручается адресату. В интернете тоже есть «пункты передачи» — их называют маршрутизаторами. Цель маршрутизатора — отправить пакет в пункт назначения по самому короткому пути. Если всё идёт хорошо, пакет прибывает на ближайший к получателю маршрутизатор, который точно знает, куда его отправить. Но бывает и так, что какой-то из маршрутизаторов на пути взломан или вышел из строя, и тогда выбирается другой путь:

DNS

Уникальный IP-адрес есть у каждого домена. Он записывается в виде четырёх чисел от нуля до 255 — например, 74.125.20.113. Введите этот адрес в браузерную строку и посмотрите, на какой сайт вы попали.

DNS связывает IP-адрес с понятным для людей доменным именем, например, 178.79.181.169 превращается в htmlacademy.ru:

Принцип работы DNS похож на поиск и вызов контактов в телефоне. Вряд ли кто-то помнит 1317а друзей — да это и необязательно, ведь они хранятся в списке контактов. Когда мы хотим кому-то позвонить, то просто находим нужное имя и нажимаем кнопку вызова — в этот момент начинается соединение, но не по имени, а по 1317у телефона.

DNS-сервер — это и есть «список всех контактов», то есть IP-адресов, которые там хранятся. Каждому IP-адресу присвоен домен. И когда мы вводим в строке браузера имя домена, то происходит запрос к DNS-серверу — запрашивается IP-адрес.

SSL/TLS

SSL — криптографический протокол шифрования запросов и ответов, он нужен для безопасного перемещения данных по интернету, а TLS — его продвинутая версия. SSL уже почти не используют, но это название было таким популярным, что его до сих пор употребляют, а любой SSL-сертификат у хостинг-компаний — TLS-сертификат.

TCP и UDP

Оба протокола отвечают за передачу данных и работают поверх IP, но с небольшой разницей. TCP доставляет данные без потерь, поэтому его используют для передачи фотографий, сообщений и другой важной информации. А вот UDP не гарантирует доставку, но зато он гораздо быстрее. Его используют, когда скорость важнее надёжности, например, при передаче аудиосообщений или видеотрансляциях.

HTTP и HTTPS

HTTP и HTTPS предназначены для передачи данных и в итоге пользователи могут просматривать веб-страницы. На самом деле HTTPS — это не отдельный протокол, а расширение HTTP. Он безопаснее, так как использует SSL/TLS для шифрования обычных запросов и ответов.

HTTP

HTTP — один из самых используемых протоколов в интернете, поэтому посмотрим подробнее, как он работает.

Протокол работает в формате запрос-ответ с двумя участниками общения:

• клиент — формирует запросы и обрабатывает ответы;
• сервер — обрабатывает запросы и формирует ответы.

Клиент делает запрос на сервер для передачи каждого ресурса: файлов HTML, CSS, JavaScript, изображений или видеофайлов. Затем сервер отвечает на запрос, отправляя ресурс.

Представим, что мы создали HTML со следующей разметкой:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Главная страница</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <header>
    <img src="logo.svg" alt="">
  </header>
</body>
</html>

Это простой HTML-файл, в котором подключены два ресурса: стилевой файл style.css и изображение logo.svg. Браузер запросит три ресурса: index.html, style.css и logo.svg.

Для каждого запроса и ответа открывается своё TCP-соединение. При каждом соединении происходит трёхстороннее «рукопожатие»: клиент и сервер трижды обмениваются пустыми пакетами данных, чтобы удостовериться в существовании друг друга и готовности к работе с данными:

Запрос-ответ выглядит так:

Трёхстороннее «рукопожатие» нужно проводить в каждом TCP-соединении, так как HTTP не запоминает состояния, поэтому ни клиент, ни сервер не могут сохранять информацию между различными запросами. HTTP — один из самых ранних протоколов, и при его создании никто не ожидал, что на веб-странице придётся загружать так много ресурсов.

Такое «рукопожатие» делает загрузку страницы медленнее. Чтобы решить проблему, разработчикам приходится сокращать количество загружаемых ресурсов, например, использовать спрайты или разделять файлы по разным доменам — этот метод называется domain sharding. Такие манипуляции уменьшают количество TCP-соединений, хотя и создают свои трудности.

HTTP/2

HTTP/2 — улучшенная версия HTTP. По данным Can I Use, его поддерживают большинство браузеров.

Главное нововведение этого протокола — одно TCP-соединение на разные запросы, или мультиплексирование:

Как выглядит запрос-ответ в HTTP/2:

Ещё в HTTP/2 появился push-сервер, то есть сервер может отправлять больше ответов на один клиентский запрос. Например, если клиент запрашивает файлы index.html, style.css и logo.svg, то сервер отправит сразу три файла. Без push-сервера клиенту нужно запрашивать каждый файл отдельно

Поэтому многие оптимизации под HTTP при переходе на HTTP/2 уже не нужны. Например, можно отказаться от разделения ресурсов по доменам.

HTTP/3

HTTP/3 — третья версия HTTP, основанная на QUIC — протоколе, который предполагает быстрое подключение к интернету через UDP.

Главное преимущество HTTP/3 — сокращение задержки при установке соединения. QUIC достаточно одного «рукопожатия», чтобы установить безопасный сеанс. А ещё HTTP/3 работает поверх UDP, поэтому скорость доставки данных быстрее, чем у HTTP и HTTP/2 поверх TCP.

Протокол уже получил статус предложенного стандарта, то есть браузеры почти завершили работу над поддержкой протокола. Но пока поддержки недостаточно, чтобы переводить сайт с HTTP/2 на HTTP/3.

WebSockets

В этом протоколе соединение устанавливается гораздо быстрее, чем в HTTP — здесь отправляется «рукопожатие» сразу со всей необходимой информацией для передачи данных. Канал при этом остаётся открытым, пока кто-то из сторон не прервёт его. Это означает, что запросы и ответы будут происходить практически мгновенно. А если сервер получит новые данные, он отправит их клиенту без запроса.

Протокол WebSockets используют там, где важна скорость доставки данных, например, в чатах и мессенджерах, играх, онлайн-трансляциях. Он, скорее всего, не пригодится при разработке простых веб-приложений, небольших CMS или при использовании REST API, где достаточно HTTP-запросов GET, POST, PUT и DELETE.

Зачем разбираться в протоколах и сетях

Протоколы — это то, с чем вы уже работали, но, возможно, даже не подозревали. Зная принципы их работы, вы сможете глубже разобраться в связи фронтенда и бэкенда, а ещё поймёте, какие оптимизации проводить в веб-приложении, как лучше передавать данные или как защитить сайт от взлома.

Выбор технологии для приложения

Знание протоколов даёт понимание, какие технологии использовать для определённых задач. Какой протокол выбрать для онлайн-чата с большим количеством пользователей, а какой — для загрузки фотографии пользователя в профиль.

Защита данных

Если знать уязвимости на пути передачи данных, можно предусмотреть и смягчить последствия атак на веб-приложение. Например, создать стратегию защиты данных банковских карт на стороне клиента и на стороне сервера.

Оптимизация приложения под протоколы

Зная особенности протоколов, можно ускорить веб-приложение и не тратить время на ненужную оптимизацию. А ещё появляется понимание, что менять при переходе на другой протокол.

Например, чтобы оптимизировать приложение под HTTP/1, нужно уменьшить количество TCP-соединений. Для этого разработчики сокращают количество файлов: все стили объединяют в styles.css, а все скрипты — в scripts.js. Для HTTP/2 такая оптимизация не нужна, поэтому можно разделить общие CSS и JS-файлы на отдельные и подключать на страницу только необходимые.

Спрайты — оптимизация для протокола HTTP. Их минус в том, что для каждой страницы загружается спрайт с иконками всего веб-приложения, даже если на странице используется всего несколько иконок. Для HTTP/2 можно загружать только те изображения, которые нужны пользователю. При этом необязательно полностью избавляться от спрайтов — можно создать спрайты для компонентов и использовать необходимые на конкретной странице.

Если приложение оптимизировано к HTTP/2, то для перехода на HTTP/3 ничего не нужно делать: все оптимизации подойдут и для HTTP/3.

Прохождение собеседований

Знание протоколов и сетей повышает ценность фронтендера и влияет на его зарплату. Чтобы успешно пройти собеседование на мидла в крупные компании, полезно знать TCP/IP, HTTP/HTTPS, DNS и WebSocket. Ещё нужно хотя бы на базовом уровне знать про безопасность: XSS-атаки и CORS — а разобраться в этой теме без знания протоколов не получится.

При разработке приложений полезно знать, как работает веб и по каким принципам передаются данные. Понимание протоколов позволяет шире смотреть на свою работу, а также знать, куда движется сфера IT и какие технологии будут востребованы в будущем. А ещё эти знания пригодятся при собеседовании на позицию мидла или сеньора.

Материалы по теме

• Как защитить приложение от хакеров
• Чем отличаются HTTP-методы GET и POST
• Протокол HTTP и работа с заголовками

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.