Архитектура Веба — Python: Веб-разработка (Flask)

Современные сайты разрабатываются на множестве языков с помощью разных технологий, но принципы их устройства одинаковые. Это определяется архитектурой веба. В его основе лежит протокол HTTP, с которым вы уже знакомы по одноименному курсу.

Современный веб несколько сложнее из-за WebSocket. Это влияет на принципы разработки сайтов, которые активно его используют. Но WebSocket — не замена обычному способу взаимодействия, а дополнение, которое необходимо для некоторых ситуаций. К таким задачам относится любое взаимодействие в реальном времени, например, чаты или многопользовательские игры.

Принцип взаимодействия с любым сайтом сводится к следующим шагам:

1. Пользователь запрашивает страницу сайта
2. Браузер выполняет HTTP-запрос к веб-серверу
3. Веб-сервер возвращает содержимое страницы в HTTP-ответе
4. Браузер отрисовывает страницу сайта
5. Пользователь кликает по ссылке на сайте, и весь процесс повторяется снова

Каждый такой цикл включает в себя HTTP-сессию: HTTP-запрос и HTTP-ответ. Чтобы увидеть HTTP-сессию, нужно использовать утилиту curl:

curl -v --head https://ru.hexlet.io

* Trying 174.66.43.105:443...
* TCP_NODELAY set
* Connected to ru.hexlet.io (174.66.43.105) port 443 (#0)
* ALPN, offering h2
* ALPN, offering http/1.1
* successfully set certificate verify locations:
* CAfile: /etc/ssl/certs/ca-certificates.crt
  CApath: /etc/ssl/certs
* TLSv1.3 (OUT), TLS handshake, Client hello (1):
* TLSv1.3 (IN), TLS handshake, Server hello (2):
* TLSv1.3 (IN), TLS handshake, Encrypted Extensions (8):
* TLSv1.3 (IN), TLS handshake, Certificate (11):
* TLSv1.3 (IN), TLS handshake, CERT verify (15):
* TLSv1.3 (IN), TLS handshake, Finished (20):
* TLSv1.3 (OUT), TLS change cipher, Change cipher spec (1):
* TLSv1.3 (OUT), TLS handshake, Finished (20):
* SSL connection using TLSv1.3 / TLS_AES_256_GCM_SHA384
* ALPN, server accepted to use h2
* Server certificate:
*  subject: C=US; ST=California; L=San Francisco; O=Cloudflare, Inc.; CN=sni.cloudflaressl.com
*  start date: Dec 21 00:00:00 2021 GMT
*  expire date: Dec 20 23:59:59 2022 GMT
*  issuer: C=US; O=Cloudflare, Inc.; CN=Cloudflare Inc ECC CA-3
*  SSL certificate verify ok.
* Using HTTP2, server supports multi-use
* Connection state changed (HTTP/2 confirmed)
* Copying HTTP/2 data in stream buffer to connection buffer after upgrade: len=0
* Using Stream ID: 1 (easy handle 0x560728425e30)
> 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->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 static spark.Spark.*;

public class HelloWorld {
    public static void main(String[] args) {
        get("/hello", (req, res) -> "Hello World");
    }
}

JavaScript

import Express from 'express'
const app = new Express()

app.get('/', (req, res) => {
  res.send('Hello World!')
})

Реальные сайты устроены значительно сложнее, но в основе лежит та связка запрос-ответ, которая была описана в этом уроке. Именно она определяет общую структуру любого сайта, написанного на любом языке.

Самостоятельная работа

1. Выполните запрос curl --head https://hexlet.io. Изучите отправляемые и возвращаемые заголовки
2. Откройте в браузере консоль разработчика, перейдите в ней на вкладку Network (Сеть) и загрузите https://ru.hexlet.io в этой вкладке. Изучите, какие запросы делает сайт и с какими заголовками, а также что приходит в ответ