⚡ Ќовый онлайн курс по —етевым “ехнологи€м

до запуска осталось

ћерион Ќетворкс

9 минут чтени€

≈сли вы начинающий веб-разработчик, возможно вы уже знаете, как работает всемирна€ сеть, по крайней мере, на базовом уровне.

Ќо когда начинаете кому-то объ€сн€ть принцип работы веб-сайта, то терпите неудачу. „то такое IP-адрес?  ак работает модель Ђклиент-серверї на самом деле?

¬ наши дни есть достаточно мощные фреймворки, которые можно использовать в своих проектах. Ќастолько мощные, что начинающие разработчики легко могут запутатьс€ в принципах работы веб.

 ак работает WEB: руководство дл€ новичков в веб-разработке

Ѕазовый веб-поиск

Ќачнем с того места, где мы все были раньше: введите Ђwww.github.comї в адресную строку браузера и просмотрите загрузку страницы.

— первого взгл€да может показатьс€, что тут происходит кака€-то маги€. Ќо давайте загл€нем глубже.


ќпределение частей web

»з-за обили€ жаргонных слов, понимание работы интернета поначалу пугает. Ќо к сожалению, дл€ дальнейшего погружени€ в тему, придетс€ разобратьс€ с ними.

 лиент: ѕриложение, например, Chrome или Firefox, которое запущено на компьютере и подключено к »нтернету. ≈го основна€ роль состоит в том, чтобы принимать пользовательские команды и преобразовывать их в запросы к другому компьютеру, называемому веб-сервером. ’от€ мы обычно используем браузер дл€ доступа к »нтернету, вы можете считать весь ваш компьютер Ђклиентомї модели клиент-сервер.  аждый клиентский компьютер имеет уникальный адрес, называемый IP-адресом, который другие компьютеры могут использовать дл€ идентификации.

—ервер:  омпьютер, который подключен к »нтернету и также имеет IP-адрес. —ервер ожидает запросов от других машин (например, клиента) и отвечает на них. ¬ отличие от вашего компьютера (т.е. клиента), который также имеет IP-адрес, на сервере установлено и работает специальное серверное программное обеспечение, которое подсказывает ему, как реагировать на вход€щие запросы от вашего браузера. ќсновной функцией веб-сервера €вл€етс€ хранение, обработка и доставка веб-страниц клиентам. —уществует множество типов серверов, включа€ веб-серверы, серверы баз данных, файловые серверы, серверы приложений и многое другое. ѕодробнее про сервера можно прочитать тут

IP-адрес: Internet Protocol Address. „исловой идентификатор устройства (компьютера, сервера, принтера, маршрутизатора и т.д.) в сети TCP/IP.  аждый компьютер в »нтернете имеет IP-адрес, который он использует дл€ идентификации и св€зи с другими компьютерами. IP-адреса имеют четыре набора чисел, разделенных дес€тичными точками (например, 244.155.65.2). Ёто называетс€ Ђлогический адресї. ƒл€ определени€ местоположени€ устройства в сети логический IP-адрес преобразуетс€ в физический адрес программным обеспечением протокола TCP/IP. Ётот физический адрес (т.е. MAC-адрес) встроен в оборудование. ѕодробнее про IP-адрес можно прочитать тут

»нтернет-провайдер: »нтернет-провайдер. »нтернет-провайдер - посредник между клиентом и серверами. ƒл€ типичного домовладельца »ѕ обычно €вл€етс€ Ђкабельной компаниейї.  огда браузер получает от вас запрос на переход к www.github.com, он не знает, где искать www.github.com. Ёто задание поставщика услуг »нтернета - выполнить поиск DNS (системы доменных имен), чтобы спросить, на какой IP-адрес настроен сайт, который вы пытаетесь посетить.

DNS: система доменных имен. –аспределенна€ база данных, котора€ хранит соответствие доменных имен компьютеров и их IP-адресов в »нтернете. Ќе беспокойтесь о том, как сейчас работает Ђраспределенна€ база данныхї: просто знайте, что DNS существует, чтобы пользователи могли вводить www.github.com вместо IP-адреса. ѕодробнее про DNS можно прочитать тут

»м€ домена: используетс€ дл€ идентификации одного или нескольких IP-адресов. ѕользователи используют доменное им€ (например, www.github.com) дл€ доступа к веб-сайту в »нтернете. ѕри вводе имени домена в обозреватель DNS использует его дл€ поиска соответствующего IP-адреса данного веб-сайта.

TCP/IP: Ќаиболее широко используетс€ протокол св€зи. Ђѕротоколї - это просто стандартный набор правил дл€ чего-либо. TCP/IP используетс€ в качестве стандарта дл€ передачи данных по сет€м. ѕодробнее про TCP/IP можно прочитать тут

Ќомер порта: 16-разр€дное целое число, которое идентифицирует определенный порт на сервере и всегда св€зано с IP-адресом. ќн служит способом идентификации конкретного процесса на сервере, на который могут пересылатьс€ сетевые запросы.

’ост:  омпьютер, подключенный к сети - это может быть клиент, сервер или любой другой тип устройства.  аждый хост имеет уникальный IP-адрес. ƒл€ веб-сайта, как www.google.com, хост может быть веб-сервером, который обслуживает страницы дл€ веб-сайта. „асто между хостом и сервером происходит кака€-то путаница, но заметьте, что это две разные вещи. —ерверы - это тип хоста - это конкретна€ машина. — другой стороны, хост может ссылатьс€ на всю организацию, котора€ предоставл€ет службу хостинга дл€ обслуживани€ нескольких веб-серверов. ¬ этом смысле можно запустить сервер с хоста.

HTTP: протокол передачи гипертекста. ѕротокол, используемый веб-браузерами и веб-серверами дл€ взаимодействи€ друг с другом через »нтернет.

URL: URL-адреса идентифицируют конкретный веб-ресурс. ѕростой пример https://github.com/someone. URL указывает протокол (Ђhttpsї), им€ хоста (github.com) и им€ файла (чь€-то страница профил€). ѕользователь может получить веб-ресурс, идентифицированный по этому URL-адресу, через HTTP от сетевого хоста, доменное им€ которого github.com. ѕодробнее про URL можно прочитать тут


ѕереход от кода к веб-странице

“еперь у нас есть необходима€ база, чтобы разобратьс€, что происходит за кулисами, когда мы вводим в строку поиска адрес Github:

1) ¬ведите URL-адрес в браузере

јдресна€ строка

2) Ѕраузер анализирует информацию, содержащуюс€ в URL. —юда вход€т протокол (Ђhttpsї), доменное им€ (Ђgithub.comї) и ресурс (Ђ/ї). ¬ этом случае после Ђ.comї нет ничего, что указывало бы на конкретный ресурс, поэтому браузер знает, как получить только главную (индексную) страницу.

URL

3) Ѕраузер св€зываетс€ с поставщиком услуг »нтернета, чтобы выполнить DNS-поиск IP-адреса дл€ веб-сервера, на котором размещен веб-сервер www.github.com. —лужба DNS сначала св€жетс€ с корневым сервером имен, который просматривает https://www.github.com и отвечает IP-адресом сервера имен дл€ домена верхнего уровн€ .com. ѕолучив этот адрес служба DNS выполн€ет еще один запрос на сервер имен, который отвечает за домен .com и запрашивает адрес https://www.github.com.

DNS

4) ѕолучив IP-адрес сервера назначени€, »нтернет-провайдер отправл€ет его в веб-браузер.

IP-адрес

5) ¬аш браузер берет IP-адрес и заданный номер порта из URL (протокол HTTP по умолчанию - порт 80, а HTTPS - порт 443) и открывает TCP-сокет. Ќа этом этапе св€зь между веб-браузером и веб-сервер наконец-то установлена.

6) ¬аш веб-браузер отправл€ет HTTP-запрос на веб-сервер главной HTML-страницы www.github.com.

HTTP-запрос

7) ¬еб-сервер получает запрос и ищет эту HTML-страницу. ≈сли страница существует, веб-сервер подготавливает ответ и отправл€ет его обратно в браузер. ≈сли сервер не может найти запрошенную страницу, он отправл€ет сообщение об ошибке HTTP 404 (тот самый Error 404 Not Found), которое означает Ђ—траница не найденаї.

200 ќ 

8) ¬аш веб-браузер берет HTML-страницу, которую он получает, а затем анализирует ее, дела€ полный обзор, чтобы найти другие ресурсы, которые перечислены в ней: это адреса изображений, CSS файлов, JavaScript файлов и т.д.

HTML-страница

9) ƒл€ каждого перечисленного ресурса браузер повтор€ет весь указанный выше процесс, дела€ дополнительные HTTP-запросы на сервер дл€ каждого ресурса.

10) ѕосле того, как браузер закончит загрузку всех других ресурсов, перечисленных на странице HTML, страница будет загружена в окно браузера и соединение будет закрыто.

¬еб-страница

ѕересечение »нтернет-пропасти

—тоит отметить, как информаци€ передаетс€ при запросе информации.  огда вы делаете запрос, эта информаци€ разбиваетс€ на множество крошечных порций, называемых пакетами.  аждый пакет маркируетс€ заголовком TCP, который включает в себ€ номера портов источника и назначени€, и заголовком IP, который включает в себ€ IP-адреса источника и назначени€. «атем пакет передаетс€ через сеть Ethernet, WiFi или сотовую сеть. ѕакет может перемещатьс€ по любому маршруту и проходить столько транзитных участков, сколько необходимо дл€ того, чтобы добратьс€ до конечного пункта назначени€. » пакеты передаютс€ отнюдь не в том, пор€дке, в котором они сформировались. Ќапример, первый пакет может прийти третьим, а последний первым.

Ќам на самом деле все равно, как пакеты туда попадут - важно только то, что они доберутс€ до места назначени€ в целости и сохранности!  ак только пакеты достигают места назначени€, они снова собираютс€ и доставл€ютс€ как единое целое.

“ак как же все пакеты знают, как добратьс€ до места назначени€ без потери? ќтвет: TCP/IP.

TCP/IP - это двухкомпонентна€ система, функционирующа€ как фундаментальна€ Ђсистема управлени€ї »нтернета. IP означает »нтернет-протокол; его задачей €вл€етс€ отправка и маршрутизаци€ пакетов на другие компьютеры с использованием заголовков IP (т.е. IP-адресов) каждого пакета. ¬тора€ часть, протокол управлени€ передачей (TCP), отвечает за разбиение сообщени€ или файла на меньшие пакеты, маршрутизацию пакетов к соответствующему приложению на целевом компьютере с использованием заголовков TCP, повторную отправку пакетов, если они тер€ютс€ в пути, и повторную сборку пакетов в правильном пор€дке, как только они достигают другого конца.


ѕолучение финальной картины

Ќо подождите - работа еще не закончена! “еперь, когда ваш браузер имеет ресурсы, составл€ющие веб-сайт (HTML, CSS, JavaScript, изображени€ и т.д.), он должен пройти несколько шагов, чтобы представить вам ресурсы в виде читабельной дл€ нас с вами веб-страницы.

¬ браузере имеетс€ механизм визуализации, отвечающий за отображение содержимого. ќбработчик рендеринга получает содержимое ресурсов в небольших фрагментах. «атем существует алгоритм синтаксического анализа HTML, который сообщает браузеру, как анализировать ресурсы.

ѕосле анализа создаетс€ древовидна€ структура элементов DOM. DOM (Document Object Model) обозначает объектную модель документа и €вл€етс€ условным обозначением дл€ представлени€ объектов, расположенных в HTML-документе. Ётими объектами - или Ђузламиї - каждого документа можно управл€ть с помощью таких €зыков сценариев, как JavaScript.

Document Object Model

ѕосле построени€ дерева DOM анализируютс€ таблицы стилей, чтобы пон€ть, как определить стиль каждого узла. »спользу€ эту информацию, браузер проходит вниз по узлам DOM и вычисл€ет стиль CSS, положение, координаты и т.д. дл€ каждого узла.

ѕосле того как в браузере по€в€тс€ узлы DOM и их стили, он наконец готов соответствующим образом нарисовать страницу на экране. –езультат Ц все, что вы когда-либо просматривали в интернете.


»тог

»нтернет - это комплексна€ вещь, но вы только что закончили сложную часть!

ќ структуре веб-приложений мы расскажем в нашей следующей статье.


>