Как работает веб: клиент, сервер, HTTP

Как работает веб: клиент, сервер, HTTP

Веб - это не магия. Это сообщения.

Браузер (клиент) говорит серверу: «Дай страницу». Сервер отвечает: «Держи HTML, CSS, JS». Иногда ещё: «А ты кто вообще?» - и просит авторизацию.

Клиент и сервер

Клиент - программа, которая отправляет запрос. Чаще всего это браузер, но может быть мобильное приложение, curl, Postman или другой сервер.

Сервер - программа, которая слушает запросы и отвечает на них. Это твой Go/PHP/Node код, запущенный на удалённой машине.

Браузер → (HTTP запрос) → Сервер → (HTTP ответ) → Браузер

Одна важная деталь: сервер не звонит первым. Он всегда ждёт, пока клиент попросит. Это модель «запрос-ответ».

Что происходит при открытии страницы

Когда ты вводишь example.com в браузере:

  1. Браузер спрашивает DNS: «Какой IP у example.com?» → получает адрес (например, 185.x.x.x)
  2. Браузер открывает TCP-соединение с сервером по этому IP на порту 443 (HTTPS)
  3. Браузер отправляет HTTP-запрос: GET / HTTP/1.1
  4. Сервер обрабатывает запрос и возвращает HTML
  5. Браузер видит в HTML ссылки на CSS и JS → отправляет дополнительные запросы
  6. Когда всё загружено - рендерит страницу
DNS (Domain Name System) переводит имена в IP-адреса. Ты запоминаешь `example.com`, а компьютеру нужен числовой адрес для соединения.

HTTP - протокол общения

HTTP (HyperText Transfer Protocol) - набор правил: как формировать запрос и ответ.

Запрос

GET /course/sql/08-isolation HTTP/1.1
Host: example.com
User-Agent: Mozilla/5.0
Accept: text/html
Accept-Language: ru,en

Состоит из: метод (GET), путь (/course/sql/08-isolation), версия протокола, заголовки (метаданные запроса).

Ответ

HTTP/1.1 200 OK
Content-Type: text/html; charset=utf-8
Content-Length: 4521

<!doctype html>
<html>...</html>

Состоит из: статус-код (200 OK), заголовки ответа, тело (HTML, JSON, файл).

HTTP request и response: одинаковая структура - стартовая строка, заголовки, тело

HTTP-методы

Метод говорит серверу, что клиент хочет сделать:

GET - получить данные (страницу, список, файл)
POST - создать что-то новое (отправить форму, создать запись)
PUT - заменить ресурс целиком
PATCH - частично обновить ресурс
DELETE - удалить ресурс
OPTIONS - узнать, какие методы поддерживает сервер (CORS preflight)

GET не должен менять данные на сервере. Если обновишь страницу - запрос повторится, и ничего не сломается. POST может менять - поэтому браузер спрашивает «Отправить форму повторно?».

Идемпотентность методов

Идемпотентный метод - тот, который можно вызвать несколько раз подряд с одинаковым результатом. Повторный вызов не меняет состояние сервера:

GET - идемпотентный (просто читает данные)
PUT - идемпотентный (перезаписывает ресурс одним и тем же значением)
DELETE - идемпотентный (удалить уже удалённое = ничего не происходит)
POST - НЕ идемпотентный (каждый вызов создаёт новый ресурс)
PATCH - НЕ идемпотентный (зависит от реализации)
Сеть ненадёжна: запрос может потеряться, и клиент повторит его. Если метод идемпотентный - повторный запрос безопасен. Если нет (POST) - сервер может создать дубликат. Поэтому оплату и заказы защищают ключом идемпотентности (idempotency key). Подробнее - в уроке [Идемпотентность и дедупликация](/course/event-driven/idempotency).

Статус-коды

Сервер отвечает числом, которое говорит «что произошло». Первая цифра задаёт класс ответа:

Семейства HTTP-статусов: 1xx/2xx/3xx/4xx/5xx с примерами

404 - «ты попросил то, чего нет». 500 - «я (сервер) сломался, извини». Если пользователь видит 500 - это баг в твоём коде. 404 - нормальная ситуация.

Заголовки (Headers)

Заголовки - метаданные запроса/ответа. Самые частые:

Content-Type: application/json - тип содержимого
Authorization: Bearer eyJhbG... - токен авторизации
Cache-Control: max-age=3600 - кеширование
Set-Cookie: session=abc123 - установить cookie
Accept: text/html, application/json - что клиент принимает

HTTPS - безопасный HTTP

HTTPS = HTTP + TLS-шифрование. Данные между браузером и сервером зашифрованы - никто посередине (Wi-Fi роутер, провайдер) не может их прочитать или подменить.

Без HTTPS: пароли, куки, данные форм передаются открытым текстом. Сегодня HTTPS - стандарт, браузеры помечают HTTP-сайты как «небезопасные».

URL - адрес ресурса

Анатомия URL: схема, хост, порт, путь, query, фрагмент

Порт 443 (HTTPS) и 80 (HTTP) - стандартные, обычно не пишутся. Query-строка ?page=2 - параметры запроса. Фрагмент #intro - якорь на странице (не отправляется серверу).

Твой [Go](../go/13-http.md)/[PHP](../php/06-forms.md) сервер говорит с браузером через HTTP. Если понимаешь запрос/ответ, статус-коды и заголовки - половина багов становится очевидной. А вторую половину найдёшь в [DevTools](./07-devtools.md).

Мини-задание

  • Открой DevTools → Network и посмотри любой запрос на example.com
  • Найди метод, статус-код и заголовок Content-Type в ответе
  • Попробуй curl -v https://example.com в терминале и прочитай заголовки
  • Найди запрос, который возвращает JSON (подсказка: API-запросы)

Зарегистрируйтесь бесплатно, чтобы пройти квиз, решить задание с автопроверкой и вести прогресс.