#12-Правка черновика

'#99. Черновики : draft';

'Tools_DraftController_actionUpdateHtml';

'#layouts_templates_updateHtml';

Правка кода HTML в тексте

<p>Каждый раз, когда вы открываете сайт, отправляете сообщение, смотрите видео или покупаете что-то онлайн &ndash; за кулисами работает&nbsp;<strong>клиент-серверная модель</strong>. Это фундаментальный принцип, на котором построен весь современный интернет.</p>
<p>Звучит сложно? На самом деле концепция очень простая, и после этой статьи вы будете понимать, что происходит, когда вы вводите адрес сайта в браузере и нажимаете Enter. Разберём всё по шагам, с понятными примерами из жизни.</p>
<h2>Что такое клиент-серверная модель?</h2>
<p><strong>Клиент-серверная модель</strong> &ndash; это способ организации работы программ, где есть две стороны:</p>
<ul>
<li><strong>Клиент</strong> &ndash; тот, кто запрашивает информацию или услугу</li>
<li><strong>Сервер</strong> &ndash; тот, кто предоставляет эту информацию или услугу</li>
</ul>
<p>Клиент отправляет <strong>запрос</strong>, сервер обрабатывает его и отправляет <strong>ответ</strong>. Всё просто: спросил &ndash; получил ответ. Запросил данные &ndash; получил данные.</p>
<h3>Аналогия с рестораном</h3>
<p>Помните аналогию с рестораном из прошлой статьи? Давайте продолжим:</p>
<ul>
<li><strong>Вы (клиент)</strong> &ndash; приходите в ресторан, садитесь за столик, смотрите меню и делаете заказ официанту: "Принесите мне пасту карбонара и апельсиновый сок".</li>
<li><strong>Официант (посредник)</strong> &ndash; записывает ваш заказ и относит его на кухню.</li>
<li><strong>Кухня (сервер)</strong> &ndash; получает заказ, готовит блюдо, упаковывает и отдаёт официанту.</li>
<li><strong>Официант</strong> &ndash; приносит готовое блюдо вам на стол.</li>
<li><strong>Вы</strong> &ndash; получаете то, что заказали, и едите.</li>
</ul>
<p>Точно так же работает интернет:</p>
<ul>
<li><strong>Ваш браузер (клиент)</strong> &ndash; отправляет запрос: "Дай мне главную страницу сайта example.com".</li>
<li><strong>Интернет (посредник)</strong> &ndash; передаёт запрос на нужный сервер.</li>
<li><strong>Сервер</strong> &ndash; получает запрос, находит нужные данные, формирует HTML-страницу.</li>
<li><strong>Интернет</strong> &ndash; передаёт ответ обратно вашему браузеру.</li>
<li><strong>Браузер</strong> &ndash; получает данные и отображает красивую страницу на экране.</li>
</ul>
<h2>Кто такой клиент?</h2>
<p><strong>Клиент</strong> &ndash; это программа, которая запрашивает данные или услуги у сервера. В контексте веба клиент &ndash; это чаще всего <strong>браузер</strong> (Chrome, Safari, Firefox, Edge).</p>
<h3>Что делает клиент?</h3>
<ul>
<li><strong>Инициирует запрос</strong> &ndash; вы вводите адрес сайта или нажимаете ссылку, браузер формирует запрос</li>
<li><strong>Отправляет запрос на сервер</strong> &ndash; через интернет</li>
<li><strong>Ждёт ответа</strong> &ndash; обычно это доли секунды</li>
<li><strong>Получает данные</strong> &ndash; HTML, CSS, JavaScript, изображения</li>
<li><strong>Обрабатывает и отображает</strong> &ndash; превращает код в красивую страницу, которую вы видите</li>
</ul>
<h3>Примеры клиентов</h3>
<ul>
<li><strong>Веб-браузер</strong> &ndash; самый распространённый клиент для сайтов</li>
<li><strong>Мобильное приложение</strong> &ndash; приложение Instagram на вашем смартфоне &ndash; это тоже клиент, который запрашивает данные с серверов Instagram</li>
<li><strong>Почтовая программа</strong> &ndash; Outlook, Thunderbird запрашивают письма с почтового сервера</li>
<li><strong>Игровой клиент</strong> &ndash; онлайн-игра на вашем компьютере общается с игровым сервером</li>
</ul>
<p>Важно понять: <strong>клиент работает на вашем устройстве</strong> &ndash; компьютере, телефоне, планшете. Это ваша сторона взаимодействия.</p>
<h2>Кто такой сервер?</h2>
<p><strong>Сервер</strong> &ndash; это мощный компьютер (или несколько компьютеров), который круглосуточно ждёт запросы от клиентов, обрабатывает их и отправляет ответы.</p>
<h3>Что делает сервер?</h3>
<ul>
<li><strong>Слушает входящие запросы</strong> &ndash; постоянно ждёт, когда кто-то обратится</li>
<li><strong>Получает запрос от клиента</strong> &ndash; "дай главную страницу", "найди товары по запросу", "авторизуй пользователя"</li>
<li><strong>Обрабатывает запрос</strong> &ndash; выполняет нужные действия: ищет данные в базе, вычисляет что-то, формирует ответ</li>
<li><strong>Отправляет ответ клиенту</strong> &ndash; HTML-страницу, JSON с данными, файл для скачивания, сообщение об ошибке</li>
</ul>
<h3>Где находятся серверы?</h3>
<p>Серверы физически находятся в специальных помещениях &ndash; <strong>дата-центрах</strong>. Это огромные залы, забитые серверными стойками, с мощным охлаждением (серверы греются) и бесперебойным питанием. Дата-центры могут быть где угодно в мире.</p>
<p>Когда вы открываете сайт, ваш запрос может улететь в дата-центр в другой стране, сервер там обработает его и отправит ответ обратно &ndash; и всё это за доли секунды.</p>
<h3>Типы серверов</h3>
<ul>
<li><strong>Веб-сервер</strong> &ndash; отдаёт веб-страницы (Apache, Nginx)</li>
<li><strong>Сервер баз данных</strong> &ndash; хранит и выдаёт данные (MySQL, PostgreSQL)</li>
<li><strong>Почтовый сервер</strong> &ndash; обрабатывает отправку и получение email</li>
<li><strong>Файловый сервер</strong> &ndash; хранит файлы, к которым можно получить доступ</li>
<li><strong>Игровой сервер</strong> &ndash; обрабатывает игровую логику для онлайн-игр</li>
</ul>
<p>Один физический сервер может выполнять несколько ролей одновременно.</p>
<h2>Как происходит общение: запрос и ответ</h2>
<p>Давайте пошагово разберём, что происходит, когда вы открываете сайт.</p>
<h3>Шаг 1. Вы вводите адрес в браузере</h3>
<p>Вы набираете в адресной строке: <code>https://example.com</code> и нажимаете Enter.</p>
<h3>Шаг 2. Браузер формирует HTTP-запрос</h3>
<p>Браузер создаёт <strong>HTTP-запрос</strong> &ndash; это специальное текстовое сообщение, которое содержит:</p>
<ul>
<li><strong>Метод запроса</strong> &ndash; что нужно сделать (GET &ndash; получить данные, POST &ndash; отправить данные, и др.)</li>
<li><strong>Путь</strong> &ndash; какую страницу или ресурс запрашиваем (/ &ndash; главная, /about &ndash; страница "о нас")</li>
<li><strong>Заголовки</strong> &ndash; дополнительная информация (какой браузер, какие данные принимаем, cookies)</li>
</ul>
<p>Пример HTTP-запроса:</p>
<pre>GET / HTTP/1.1
Host: example.com
User-Agent: Mozilla/5.0 (Windows NT 10.0)
Accept: text/html</pre>
<h3>Шаг 3. Запрос отправляется через интернет</h3>
<p>Запрос проходит через множество промежуточных устройств (роутеры, провайдеры) и находит путь к серверу, где размещён сайт example.com. Это происходит благодаря <strong>DNS</strong> (система доменных имён), которая преобразует понятное имя example.com в IP-адрес сервера (например, 192.168.1.1).</p>
<h3>Шаг 4. Сервер получает запрос</h3>
<p>Веб-сервер (например, Nginx) получает ваш запрос, анализирует его: "Клиент просит главную страницу сайта example.com".</p>
<h3>Шаг 5. Сервер обрабатывает запрос</h3>
<p>В зависимости от типа сайта происходит разное:</p>
<p><strong>Статический сайт:</strong></p>
<ul>
<li>Сервер находит готовый HTML-файл на диске (index.html)</li>
<li>Считывает его содержимое</li>
<li>Отправляет обратно клиенту</li>
</ul>
<p><strong>Динамический сайт:</strong></p>
<ul>
<li>Сервер передаёт запрос серверному приложению (PHP, Python, Java)</li>
<li>Приложение может сделать запрос к базе данных &ndash; получить список товаров, статей, информацию о пользователе</li>
<li>Приложение собирает HTML-страницу "на лету", подставляя данные из базы</li>
<li>Готовая страница отправляется обратно</li>
</ul>
<h3>Шаг 6. Сервер формирует HTTP-ответ</h3>
<p>Сервер создаёт <strong>HTTP-ответ</strong>, который содержит:</p>
<ul>
<li><strong>Статус ответа</strong> &ndash; всё ли в порядке (200 OK &ndash; успешно, 404 Not Found &ndash; страница не найдена, 500 Internal Server Error &ndash; ошибка на сервере)</li>
<li><strong>Заголовки</strong> &ndash; информация о типе данных, размере, кэшировании</li>
<li><strong>Тело ответа</strong> &ndash; сами данные (HTML-код страницы, изображение, JSON и т.д.)</li>
</ul>
<p>Пример HTTP-ответа:</p>
<pre>HTTP/1.1 200 OK
Content-Type: text/html
Content-Length: 1234

&lt;html&gt;
&lt;head&gt;&lt;title&gt;Главная&lt;/title&gt;&lt;/head&gt;
&lt;body&gt;
  &lt;h1&gt;Добро пожаловать!&lt;/h1&gt;
&lt;/body&gt;
&lt;/html&gt;</pre>
<h3>Шаг 7. Ответ возвращается через интернет</h3>
<p>HTTP-ответ идёт обратно через интернет к вашему браузеру по тому же пути.</p>
<h3>Шаг 8. Браузер получает ответ</h3>
<p>Браузер получает HTML-код, анализирует его и понимает: "Мне нужно ещё загрузить CSS-файл, JavaScript-файл, 5 изображений".</p>
<h3>Шаг 9. Браузер отправляет дополнительные запросы</h3>
<p>Для каждого внешнего ресурса (CSS, JS, изображения) браузер делает отдельный HTTP-запрос на сервер. Сервер отдаёт эти файлы. Так может быть 10, 20, 50 запросов для загрузки одной страницы.</p>
<h3>Шаг 10. Браузер отображает страницу</h3>
<p>Когда все ресурсы загружены, браузер:</p>
<ul>
<li>Разбирает HTML и строит структуру страницы (DOM-дерево)</li>
<li>Применяет стили из CSS</li>
<li>Выполняет JavaScript для интерактивности</li>
<li>Отрисовывает финальную страницу на экране</li>
</ul>
<p>Вы видите готовую страницу &ndash; и всё это произошло за 1-2 секунды!</p>
<h2>Протокол HTTP: язык общения клиента и сервера</h2>
<p><strong>HTTP (HyperText Transfer Protocol)</strong> &ndash; это протокол, набор правил, по которым клиент и сервер общаются друг с другом. Это как общий язык, который они оба понимают.</p>
<h3>Основные методы HTTP-запросов</h3>
<ul>
<li><strong>GET</strong> &ndash; получить данные (открыть страницу, загрузить изображение)</li>
<li><strong>POST</strong> &ndash; отправить данные на сервер (заполнить форму, загрузить файл)</li>
<li><strong>PUT</strong> &ndash; обновить существующие данные</li>
<li><strong>DELETE</strong> &ndash; удалить данные</li>
<li><strong>PATCH</strong> &ndash; частично изменить данные</li>
</ul>
<h3>Коды статуса HTTP-ответов</h3>
<p>Сервер всегда возвращает код статуса, который говорит, как прошла обработка запроса:</p>
<p><strong>2xx &ndash; Успех</strong></p>
<ul>
<li><strong>200 OK</strong> &ndash; всё хорошо, вот ваши данные</li>
<li><strong>201 Created</strong> &ndash; данные успешно созданы (например, новый пост в блоге)</li>
</ul>
<p><strong>3xx &ndash; Перенаправление</strong></p>
<ul>
<li><strong>301 Moved Permanently</strong> &ndash; страница переехала на новый адрес навсегда</li>
<li><strong>302 Found</strong> &ndash; временное перенаправление</li>
</ul>
<p><strong>4xx &ndash; Ошибка клиента</strong></p>
<ul>
<li><strong>400 Bad Request</strong> &ndash; неправильный запрос</li>
<li><strong>401 Unauthorized</strong> &ndash; нужна авторизация</li>
<li><strong>403 Forbidden</strong> &ndash; доступ запрещён</li>
<li><strong>404 Not Found</strong> &ndash; страница не найдена (самая известная ошибка)</li>
</ul>
<p><strong>5xx &ndash; Ошибка сервера</strong></p>
<ul>
<li><strong>500 Internal Server Error</strong> &ndash; что-то сломалось на сервере</li>
<li><strong>502 Bad Gateway</strong> &ndash; проблема с промежуточным сервером</li>
<li><strong>503 Service Unavailable</strong> &ndash; сервер временно недоступен (перегрузка)</li>
</ul>
<h3>HTTPS: защищённая версия HTTP</h3>
<p><strong>HTTPS</strong> &ndash; это HTTP с шифрованием. Все данные между клиентом и сервером передаются в зашифрованном виде, чтобы никто не мог их перехватить и прочитать.</p>
<p>Когда вы видите замочек в адресной строке браузера &ndash; это значит, что соединение защищено HTTPS. Сегодня это стандарт для всех серьёзных сайтов, особенно для магазинов и банков.</p>
<h2>Преимущества клиент-серверной модели</h2>
<h3>1. Централизованное хранение данных</h3>
<p>Все важные данные хранятся на сервере. Если у вас 1000 клиентов, вам не нужно обновлять данные на каждом устройстве &ndash; достаточно обновить на сервере, и все сразу увидят изменения.</p>
<h3>2. Лёгкий клиент</h3>
<p>Клиенту (браузеру) не нужно хранить огромные объёмы данных или выполнять сложные вычисления &ndash; он просто запрашивает готовые данные у сервера. Поэтому веб-приложения работают даже на слабых устройствах.</p>
<h3>3. Безопасность</h3>
<p>Важная бизнес-логика и данные находятся на сервере, где их можно защитить. Клиент видит только то, что ему разрешено видеть.</p>
<h3>4. Масштабируемость</h3>
<p>Если пользователей стало больше, можно добавить ещё серверов. Клиентам это не важно &ndash; они продолжают делать те же запросы, просто ответы обрабатываются несколькими серверами.</p>
<h3>5. Обновления без перезагрузки</h3>
<p>Обновили код на сервере &ndash; все пользователи сразу видят изменения. Не нужно обновлять приложение на устройстве каждого клиента.</p>
<h2>Недостатки клиент-серверной модели</h2>
<h3>1. Зависимость от интернета</h3>
<p>Если нет связи с сервером (нет интернета или сервер упал) &ndash; клиент не работает. Вы не можете открыть сайт, если нет соединения.</p>
<h3>2. Нагрузка на сервер</h3>
<p>Если одновременно обратятся 10 000 пользователей, сервер может не справиться и упасть. Нужны мощные серверы и балансировка нагрузки.</p>
<h3>3. Задержки</h3>
<p>Каждый запрос требует времени: отправить запрос &rarr; дождаться ответа. Если сервер находится далеко географически, задержка (latency) может быть заметной.</p>
<h2>Современные вариации клиент-серверной модели</h2>
<h3>Peer-to-Peer (P2P)</h3>
<p>Альтернатива клиент-серверу: каждый участник сети одновременно и клиент, и сервер. Используется в торрентах &ndash; вы скачиваете файл с других пользователей и одновременно раздаёте его другим.</p>
<h3>Микросервисная архитектура</h3>
<p>Вместо одного огромного сервера &ndash; множество маленьких серверов (микросервисов), каждый отвечает за свою задачу. Клиент общается с разными микросервисами для получения полной картины.</p>
<h3>Serverless (бессерверная архитектура)</h3>
<p>На самом деле серверы есть, но разработчику не нужно ими управлять. Код выполняется в облаке по требованию &ndash; пришёл запрос, запустился код, обработал, вернул ответ, выключился. Платите только за время выполнения.</p>
<h3>WebSocket: постоянное соединение</h3>
<p>В обычном HTTP каждый запрос &ndash; это отдельное соединение: открыли &rarr; отправили &rarr; получили &rarr; закрыли. В WebSocket соединение открывается один раз и остаётся активным. Сервер может сам отправлять данные клиенту без запроса. Используется в чатах, онлайн-играх, биржевых котировках.</p>
<h2>Практический пример: что происходит при покупке в интернет-магазине</h2>
<ol>
<li><strong>Вы открываете каталог товаров</strong><br>Клиент (браузер) &rarr; GET-запрос на сервер "дай список товаров" &rarr; Сервер обращается к базе данных &rarr; Возвращает JSON с товарами &rarr; Браузер отображает карточки товаров</li>
<li><strong>Вы кладёте товар в корзину</strong><br>Клиент &rarr; POST-запрос "добавь товар ID 123 в корзину" &rarr; Сервер сохраняет в сессии пользователя или базе данных &rarr; Возвращает "успешно добавлено" &rarr; Браузер обновляет счётчик корзины</li>
<li><strong>Вы оформляете заказ</strong><br>Клиент &rarr; POST-запрос с данными (адрес, телефон, способ оплаты) &rarr; Сервер проверяет наличие товара, рассчитывает стоимость, создаёт заказ в базе &rarr; Возвращает номер заказа и ссылку на оплату</li>
<li><strong>Вы оплачиваете</strong><br>Клиент &rarr; перенаправление на сайт платёжной системы &rarr; Платёжная система &rarr; уведомление серверу магазина "оплата прошла" &rarr; Сервер меняет статус заказа на "оплачен" &rarr; Отправляет email-уведомление</li>
</ol>
<p>Каждое действие &ndash; это цепочка запросов и ответов между клиентом и сервером.</p>
<h2>Главное из статьи</h2>
<ul>
<li><strong>Клиент-серверная модель</strong> &ndash; основа современного интернета: клиент запрашивает, сервер отвечает</li>
<li><strong>Клиент</strong> &ndash; программа на вашем устройстве (браузер, приложение), инициирует запросы</li>
<li><strong>Сервер</strong> &ndash; мощный компьютер в дата-центре, обрабатывает запросы и отдаёт данные</li>
<li><strong>HTTP/HTTPS</strong> &ndash; протокол общения между клиентом и сервером</li>
<li>Каждое действие на сайте &ndash; это серия запросов и ответов</li>
<li>Модель имеет плюсы (централизация, безопасность) и минусы (зависимость от сети, задержки)</li>
<li>Существуют альтернативы: P2P, микросервисы, serverless, WebSocket</li>
</ul>
<p>Теперь вы понимаете фундаментальный принцип работы веба. В следующих статьях мы углубимся в детали: как устроены базы данных, что такое REST API, как работает балансировка нагрузки. А потом разберём на практике, как всё это реализовано в платформе Shop'n'SEO!</p>

Краткое название: Как работает клиент-серверная модель

Полное название Как работает клиент-серверная модель: основа современного интернета

Черновик Редактировать название и описание

Название

Стандартный редактор Смотреть

Полное название и описание

Полное название (Заголовок)

Описание

Как правило описание должно иметь около 150 знаков. Оно используется для заполнения мета-тега Description веб-страницы.
Сейчас используется - 0 символов

Описание скопировано!

Описание вставлено!