Принципы взаимодействия клиента и сервера в вебе. Код на сервере и на клиенте

Принципы взаимодействия клиента и сервера в вебе

До сих пор мы говорили о том, как работает сервер — веб‑сервер принимает запросы, сервер приложений выполняет код и генерирует ХТМЛ, сервер базы данных отдаёт данные. Но на самом деле код может работать не только на сервере, но и на клиенте — в браузере у пользователя.

Принципы взаимодействия клиента и сервера в вебе

В вебе серверный код, или бэкенд, — это код, который работает на сервере и который пользователь не видит. Клиентский код, или фронтенд, — это код, который работает в браузере пользователя, который он видит и даже может поменять прямо в браузере.

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

Код на клиенте

Браузеры умеют не только показывать ХТМЛ и картинки. Они умеют «из коробки» выполнять код на языке Яваскрипт прямо в себе, на компьютере пользователя.

Возьмём страницу с котиком:

<!doctype html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Мой кот</title>
</head>
<body>
  <h1>Мой замечательный кот</h1>
  <img src="cat.jpg">
</body>
</html>

И добавим немного интерактивности:

<!doctype html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Мой кот</title>
</head>
<body>
  <h1 id="title">Мой замечательный кот</h1>
  <img src="cat.jpg" id="catPhoto">
  <button onclick="changeMood()">Сменить настроение</button>

  <script>
    function changeMood() {
      const title = document
        .getElementById('title')
      const photo = document
        .getElementById('catPhoto')

      if (title.innerText.includes('замечательный')) {
        title.innerText = 'Мой грустный кот'
        photo.src = 'cat-sad.jpg'
      } else {
        title.innerText = 'Мой замечательный кот'
        photo.src = 'cat.jpg'
      }
    }
  </script>
</body>
</html>

Когда пользователь нажимает на кнопку, Яваскрипт‑код выполняется в его браузере и меняет заголовок и картинку. Серверу при этом ничего не отправляется — всё происходит локально, на компьютере пользователя.

Код на клиенте обычно отвечает:

за интерактив — кнопки, формы, анимации;
проверку данных в формах перед отправкой на сервер;
изменение содержимого страницы без перезагрузки;
работу с браузерными возможностями — геолокацией, камерой, микрофоном и прочим.

Код на сервере

Бэкенд — это всё то, что мы обсуждали раньше: код на PHP, SQL, Node.js, Python и других серверных языках. Этот код выполняется на сервере и недоступен пользователю.

Код на сервере обычно отвечает:

за обработку данных из форм;
работу с базой данных;
авторизацию и безопасность;
генерацию ХТМЛ‑страниц;
отправку писем, обработку платежей и прочую «серьёзную» логику.

Взаимодействие фронтенда и бэкенда

Фронтенд и бэкенд общаются друг с другом через те же HTTP‑запросы. Но теперь запросы отправляет не браузер при переходе по ссылке или отправке формы, а Яваскрипт‑код по команде разработчика.

Такие запросы называют «асинхронными запросами». Они позволяют обмениваться данными с сервером без перезагрузки страницы.

Типичный сценарий работы:

Пользователь открывает страницу — браузер получает ХТМЛ с сервера.
Пользователь заполняет форму — фронтенд проверяет данные и подсвечивает ошибки.
Пользователь нажимает «Отправить» — фронтенд отправляет данные на бэкенд асинхронно, без перезагрузки страницы.
Бэкенд обрабатывает данные, сохраняет в базу, отправляет письмо.
Бэкенд возвращает результат фронтенду.
Фронтенд показывает пользователю сообщение об успехе или ошибке.

В одностраничных приложениях сценарий сложнее:

Пользователь открывает страницу — браузер получает минимальный ХТМЛ страницы с заглушками или прелоадерами вместо содержимого.
Браузер запускает клиентский код со страницы.
Клиентский код показывает «крутилки», а сам начинает скачивать нужные данные, например ленту событий, с бэкенда.
Когда данные получены, клиентский код обновляет содержимое страницы.
Клиентский код отслеживает действия пользователя на странице и реагирует на них. Если действия требуют данные с сервера, скачивает их. Если действия требуют сохранения данных, отправляет запрос на сервер.

Веб‑сокеты

HTTP — однонаправленный протокол. Данные посылает либо клиент, либо сервер, но не оба одновременно. Если нужно одновременно обмениваться данными в обоих направлениях, используют веб‑сокеты — протокол передачи данных между клиентом и сервером через постоянное соединение.

Веб‑сокеты

Веб‑сокеты используют в приложениях, которым нужно обмениваться данными в реальном времени: чатах, онлайн‑играх, системах мониторинга и приложениях для совместной работы.

P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.