Современные сайты разрабатываются на множестве языков с помощью разных технологий, но принципы их устройства одинаковые. То, почему сайты внутри устроены похожим образом, определяется архитектурой веба. В его основе лежит протокол HTTP, с которым мы уже знакомы по одноименному курсу.
Современный веб несколько сложнее благодаря WebSocket. Это существенно влияет на принципы разработки сайтов, которые активно используют его.
При этом веб-сокеты не заменяют обычный способ взаимодействия. Они только дополняют необходимым для некоторых ситуаций. К таким задачам относится любое взаимодействие в реальном времени (real-time), например, чаты или многопользовательские игры.
Принцип взаимодействия с любым сайтом сводится к следующим шагам:
- Пользователь запрашивает страницу сайта
- Браузер выполняет HTTP-запрос к веб-серверу
- Веб-сервер возвращает содержимое страницы в HTTP-ответе
- Браузер отрисовывает страницу сайта
- Пользователь кликает по ссылке на сайте и весь процесс повторяется снова
Сам процесс взаимодействия с сайтом будет сложнее, но нас интересует только взаимодействие с приложением.
Каждый такой цикл включает в себя HTTP-сессию: HTTP-запрос и HTTP-ответ. Проще всего увидеть HTTP-сессию, если использовать утилиту curl
:
curl -v --head https://ru.hexlet.io
* Trying 174.66.43.105:443...
> HEAD / HTTP/2
> Host: ru.hexlet.io
> user-agent: curl/7.68.0
> accept: */*
>
* TLSv1.3 (IN), TLS handshake, Newsession Ticket (4):
* TLSv1.3 (IN), TLS handshake, Newsession Ticket (4):
* old SSL session ID is stale, removing
* Connection state changed (MAX_CONCURRENT_STREAMS == 256)!
< HTTP/2 200
HTTP/2 200
< date: Wed, 09 Feb 2022 07:13:32 GMT
date: Wed, 09 Feb 2022 07:13:32 GMT
< content-type: text/html; charset=utf-8
content-type: text/html; charset=utf-8
...
<
* Connection #0 to host ru.hexlet.io left intact
Принцип взаимодействия сайта не зависит от того, на каком языке он написан. Всегда есть запрос, который нужно обработать и вернуть ответ в виде HTML.
HTML для конкретного запроса определяется самим запросом — запрошенной страницей и параметрами HTTP, например, заголовками.
Код сайта представляет собой набор обработчиков разных страниц, которые принимают запросы, формируют ответ и возвращают его.
Ниже приведены примеры кода на разных языках, где видно общую структуру: функция-обработчик, привязанная к конкретной странице:
PHP
<?php
use Slim\Factory\AppFactory;
$app = AppFactory::create();
$app->get('/', function ($request, $response) {
return $response->write('Welcome to Slim!');
});
$app->get('/about', function ($request, $response) {
return $response->write('About My Site');
});
$app->run();
Ruby
require 'sinatra'
get '/frank-says' do
'Put this in your pipe & smoke it!'
end
Python
from flask import Flask
app = Flask(__name__)
@app.route("/")
def hello():
return "Hello World!"
Java
import io.javalin.Javalin;
public class HelloWorld {
public static void main(String[] args) {
Javalin app = Javalin.create().start(7000);
app.get("/", ctx -> ctx.result("Hello World!"));
}
}
JavaScript
import Express from 'express';
const app = new Express();
app.get('/', (req, res) => {
res.send('Hello World!');
});
Реальные сайты устроены сложнее. Но в основе лежит та связка запрос-ответ, которая была описана в этом уроке. Именно она определяет общую структуру сайта, написанного на любом языке.
Самостоятельная работа
- Выполните запрос
curl --head https://hexlet.io
. Изучите отправляемые и возвращаемые заголовки - Откройте в браузере консоль разработчика, перейдите в ней на вкладку Network (Сеть) и загрузите
https://ru.hexlet.io
в этой вкладке. Изучите, какие запросы делает сайт и с какими заголовками, а также то, что приходит в ответ
Остались вопросы? Задайте их в разделе «Обсуждение»
Вам ответят команда поддержки Хекслета или другие студенты
Для полного доступа к курсу нужен базовый план
Базовый план откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.