# OTUS ## Javascript Basic <!--v--> ### Вопросы? <!--s--> ### Базовая работа с сетью: методы HTTP, куки, заголовки, WS. <!-- v --> HTTP сообщения - это обмен данными между сервером и клиентом. Есть два типа сообщений: _запросы_, отправляемые клиентом, чтобы инициировать реакцию со стороны сервера, и _ответы_ от сервера. <!-- v --> HTTP-сообщение представляет собой обычный текст. Структура сообщения строго определена: 1. Стартовая строка 2. Метод запроса 3. Заголовки, передают сервисную информацию 4. Тело сообщения, представляет данные в текстовом виде <!-- v --> HTTPS (HTTP Secure) является **зашифрованной** версией HTTP протокола. Обычно он использует SSL или TLS для шифрования соединения между клиентом и сервером. <!-- v --> ### Вопросы? <!-- v --> URL состоит из различных частей, некоторые из которых являются обязательными, а некоторые - опциональными. ``` http://www.example.com:80/path/to/myfile.html?key1=value1&key2=value2#SomewhereInTheDocument ``` 1. `http://` - протокол 2. `www.example.com` - доменное имя 3. `:80` - порт 4. `path/to/myfile.html` - адрес ресурса на веб-сервере 5. `?key1=value1&key2=value2` - дополнительные параметры, которые браузер сообщает веб-серверу 6. `#SomewhereInTheDocument` - якорь на другую часть того же самого ресурса <!-- v --> - **GET** - Позволяет запросить некоторый конкретный ресурс - **POST** - Позволяет отправить данные на сервер - **PUT** - Используется для создания новых ресурсов на сервере - **DELETE** - Позволяет удалить существующие ресурсы на сервере - **PATCH** - Позволяет внести частичные изменения в указанный ресурс по указанному расположению - **HEAD** - Cлужит для проверки существования ресурса - **OPTIONS** - Cлужит для получения параметров для ресурса или для сервера в целом. <!-- v --> - _1xx_ — обработка данных на сервере продолжается; - _2xx_ — успешная обработка данных; - _3xx_ — перенаправление запросов; - _4xx_ — ошибка по вине клиента; - _5xx_ — ошибка по вине сервера. <!-- v --> - _200 OK_ в случае успешной обработки запроса. - _301 Moved Permanently_ если редирект используется на постоянной основе. - _307 Temporary Redirect_ если редирект используется временно. - _400 Bad Request_ если в запросе есть синтаксическая ошибка. - _403 Forbidden_ если запрос успешный, но сервер его не может выполнить, поскольку пользователь не имеет достаточных прав. - _404 Not Found_ если запрошенного ресурса не существует. - _500 Internal Server Error_ если работа программы на сервере выдала ошибку. <!-- v --> 1. Основные заголовки, которые могут включаться в любые сообщения клиента и сервера. 2. Заголовки запроса, которые используются только в сообщениях клиента. 3. Заголовки ответа, которые используются только в сообщениях сервера. 4. Заголовки сущности, которые описывают данные в сообщении. <!-- v --> 1. _Via_ содержит версию HTTP протокола 1. _User-Agent_ содержит строку с типом браузера и ОС 1. _Content-Length_ - указывает размер отправленного получателю тела объекта в байтах. 1. _Сontent-Type_ - используется для того, чтобы определить тип ресурса. 1. _Cookie_ - содержит куки <!-- v --> ```js [1-30] const response = await fetch("https://jsonplaceholder.typicode.com/posts", { method: "POST", body: JSON.stringify({ title: "Заголовок поста", body: "А роза упала на лапу азора", userId: 1, }), headers: { "Content-type": "application/json; charset=UTF-8", }, }); const data = await response.json(); console.log(data); ``` <!-- v --> Куки – это небольшие текстовые данные, которые хранятся в браузере пользователя и используются веб-сайтами для запоминания информации о посетителе. <!-- v --> - _path_ — определяет путь, по которому будет доступна кука. - _domain_ — определяет домен, для которого указана кука. - _max-age_ и _expires_ — определяет время жизни куки. - _secure_ — указывает, что данная кука может быть передана только при запросах по защищённому протоколу HTTPS. - _samesite_ — определяет, может ли данная кука быть отправлена при кроссдоменном запросе. <!-- v --> ```js [1-30] document.cookie = "showOnboarding=true;max-age=3600"; ``` <!-- v --> ### Вопросы? <!-- s --> ### WebSocket <!-- v --> - Протокол для постоянного двунаправленного соединения между клиентом и сервером - Отличие от HTTP: постоянное соединение вместо запроса-ответа - Используется для чатов, игр, обновления данных в реальном времени <!-- v --> - Установка соединения через HTTP-апгрейд (Handshake) - После успешного рукопожатия открывается двунаправленный канал - Обмен сообщениями в формате текста или бинарных данных - Закрытие соединения <!-- v --> ```js [1-30] const socket = new WebSocket("wss://echo.websocket.org"); socket.onopen = () => { console.log("Соединение открыто"); socket.send("Привет, WebSocket!"); }; // socket.send(...) socket.onmessage = (event) => { console.log("Получено сообщение:", event.data); }; socket.onclose = () => { console.log("Соединение закрыто"); }; socket.onerror = (error) => { console.error("Ошибка WebSocket:", error); }; ``` <!-- v --> - Чаты и мессенджеры - Онлайн-игры - Финансовые торги и обновление котировок - Мониторинг и телеметрия в реальном времени <!-- v --> ### Вопросы? <!-- s --> #### Дополнительные материалы <!-- v --> 1. [Модель OSI](https://habr.com/ru/articles/876628/) 2. [Путеводитель по HTTP](https://developer.mozilla.org/ru/docs/Web/HTTP) 3. [HTTP заголовки](https://developer.mozilla.org/ru/docs/Web/HTTP/Reference/Headers) 4. [HTTP методы](https://developer.mozilla.org/ru/docs/Web/HTTP/Reference/Methods) 5. [Cookies](https://developer.mozilla.org/ru/docs/Web/HTTP/Guides/Cookies) <!-- v --> #### Вопросы для самопроверки 1. Что происходит на уровне протокола при выполнении HTTP-запроса от клиента к серверу? 2. Какие параметры куки влияют на безопасность и область действия куки в браузере? 3. Как можно ограничить доступ к куки с помощью атрибута HttpOnly? 4. Как работает механизм установки и передачи куки между клиентом и сервером? 5. Чем WebSocket отличается от традиционных HTTP-запросов и в каких сценариях его использование наиболее оправдано?