Як працює Інтернет: інтерактивний урок

Коли ви читаєте цю статтю, ви користуєтесь Інтернетом, а чи маєте ви уявлення про те, як він працює?

Розуміння принципів роботи Інтернету важливе не тільки для фахівців, але також є базовою потребою для кожної сучасної людини, щоб орієнтуватися у світі, де технології відіграють ключову роль.

Ось кілька аргументів на користь вивчення цієї теми:

• Розуміння роботи Інтернету відкриває двері до вивчення програмування, кібербезпеки, веб-розробки й інших перспективних напрямків.

• Інтернет є основою сучасного світу. Знання про його роботу дозволяє користуватися ним ефективніше: шукати інформацію та правильно використовувати онлайн-сервіси.

• Багато професій пов’язані з Інтернетом: від розробників до маркетологів і дизайнерів. Навіть базове розуміння клієнт-серверної моделі чи роботи веб-застосунків може стати конкурентною перевагою.

Ця стаття допоможе вам зрозуміти основні принципи роботи Інтернету на прикладі створення власного веб-застосунку.

Частина 1: Основи. Що таке Інтернет

Інтернет — це глобальна мережа, що об’єднує комп’ютери та інші пристрої у всьому світі. Завдяки Інтернету пристрої можуть обмінюватися даними.

Щоб комп’ютери могли знайти один одного в Інтернеті, кожен з них має унікальну IP-адресу.

Коли ви заходите на сайт інтернет-магазину чи відкриваєте мобільний застосунок для перегляду онлайн-відео - ваш пристрій підключається до інших та надсилає чи отримує певні дані.

Для кращого розуміння того, як це відбувається, проведімо аналогію з містом.

У вашому місті є звичайні будинки 🏠, де мешкають звичайні люди, великі будівлі 🏢 з офісами та ресторанами, вулиці, світлофори та дорожні знаки 🚦, а також довідкова служба 📞.

Вам, мешканцю звичайного будинку🏠, захотілося замовити піцу 🍕:

1. Ви телефонуєте в Довідкову службу і кажете назву піцерії, що знаходиться в одній з великих офісних будівель 🏢.

2. Довідкова служба 📞 повідомляє вам адресу та телефон піцерії.

3. Ви телефонуєте туди та замовляєте “Чотири сири“ та “Пепероні“.

4. Коли замовлення буде готово, кур’єр доставить його за вашою адресою 🏠, використовуючи транспортну мережу міста 🚦.

Структура Інтернету чимось схожа зі структурою такого міста:

• 🏠 Звичайні будинки - це комп'ютери користувачів (клієнти): вони використовуються для перегляду сайтів, спілкування та роботи. Наприклад, ваш ноутбук чи смартфон.

• 🏢 Великі офісні будівлі - це сервери: тут зберігається інформація, наприклад, ваші улюблені веб-сайти, файли або відео.

• 🚦 Вулиці, світлофори та дорожні знаки - це лінії інтернет-зв’язку, та маршрутизатори: вони допомагають передавати інформацію найефективнішим шляхом від джерела до одержувача (від клієнта до сервера і навпаки).

• 📞 Довідкова служба - це DNS-сервери: вони перетворюють зручні для людини адреси сайтів (наприклад, google.com) у числові IP-адреси (наприклад, 8.8.8.8), які розуміють комп'ютери.

Коли ви вводите адресу “drukarnia.com.ua” у браузері, відбувається наступне:

1. Браузер надсилає запит до DNS-сервера для отримання IP-адреси сайту.

2. DNS-сервер знаходить у своїй базі даних, що IP-адреса сайту — 104.21.40.216 та передає її браузеру.

3. Браузер використовує цю адресу для надсилання HTTP-запиту до сервера.

4. Сервер отримує запит та у відповідь повертає файли сайту (HTML, CSS, JavaScript), які браузер обробляє та відображає як екрані.

Цей процес відбувається за лічені мілісекунди, тож ми його майже не помічаємо.

Тепер давайте надамо визначення поняттям, які ми використали вище і які могли викликати у вас питання.

Клієнт - це пристрій або програма, яка запитує інформацію у сервера. Це може бути ваш телефон чи комп’ютер, коли ви заходите на веб-сайт через браузер або відкриваєте мобільний застосунок.

Сервер - це потужний комп’ютер, який обробляє запити клієнтів і надсилає їм інформацію. Зазвичай, сервери розміщуються у великих дата-центрах і зберігають дані сотень тисяч веб-сайтів.

IP-адреса - унікальна числова “адреса” кожного пристрою в Інтернеті, який використовується для ідентифікації та обміну даними. Це щось на кшталт адреси вашого будинку, але для комп’ютерів (наприклад, 192.164.1.1).

DNS-сервер (Domain Name System) - це “довідкова служба” Інтернету, яка перетворює зрозумілі для людей адреси сайтів (наприклад, google.com) у їх IP-адреси (наприклад, 8.8.8.8), щоб комп’ютери могли їх знайти. Якби DNS-серверів не існувало, користуватися Інтернетом було б складніше.

HTML (HyperText Markup Language) - це мова розмітки тексту, яка використовується для створення структури веб-сторінок. Завдяки HTML на сторінці відображаються заголовки, текст, зображення, відео тощо. Щоб побачити HTML-код сторінки, треба натиснути на праву кнопку миші та в контекстному меню обрати пункт “Переглянути джерело сторінки“ або натиснути комбінацію клавіш Ctrl+U.

CSS (Cascading Style Sheets) - це мова стилів, яка використовується для оформлення веб-сторінок: зміни кольорів, шрифтів, розташування елементів тощо.

JavaScript - це мова програмування, яка додає інтерактивність на веб-сторінки. Завдяки JavaScript кнопки працюють, форми надсилаються, а сторінки оновлюються без перезавантаження.

HTTP (HyperText Transfer Protocol) - це протокол, який визначає правила обміну даними між клієнтом (браузером) і сервером. Ви могли бачити цю абревіатуру в адресах сайтів: http://google.com. Хоча зараз використовується версія цього протоколи з шифруванням: https://google.com.

Частина 2: Створюємо свій веб-застосунок

Переходимо від теорії до практики та створимо чат-сервіс, щоб зрозуміти, як браузер (клієнт) і сервер обмінюються даними через HTTP-запити.

Для цього ми використаємо платформу Glitch.com, яка дозволяє безкоштовно розгорнути веб-застосунок та бачити результат його роботи відразу в браузері.

Підготовка до роботи

Крок 1: Реєстрація на Glitch.com

1. Перейдіть на сайт Glitch.com

2. Натисніть "Sign in" та створіть обліковий запис

   

3. Щоб пришвидшити процес, використайте реєстрацію за допомогою Google.

   

4. Після входу натисніть "New Project" → "glitch-hello-node"

Крок 2: Структура проєкту

Glitch автоматично створить базову структуру проєкту. Нехай вас не лякає велика кількість файлів зліва, нам знадобиться лише три файли, на інші не звертайте увагу:

• server.js - головний файл сервера

• package.json - файл з налаштуваннями проєкту

• public/index.html - файл для статичних файлів (HTML, CSS, JavaScript)

📝 Як працювати з кодом?

Ми будемо використовувати сервер на основі Node.js з Express.js для обробки запитів і клієнтський HTML-файл для взаємодії.

Якщо попередній абзац викликав у вас легке запаморочення, не хвилюйтесь, це лише перелік технологій, що використовуються для “будівництва“ сайтів.

Код, що наведений нижче, необхідно скопіювати та вставити у файл server.js, попередньо видаливши його початковий вміст:

const express = require('express');
const app = express();

// Масив для зберігання повідомлень
let messages = [];

// Дозволяємо обробляти JSON
app.use(express.json());

// Логування всіх запитів
app.use((req, res, next) => {
    console.log(`📨 Отримано ${req.method} запит до ${req.url}`);
    next();
});

// Віддаємо HTML сторінку
app.get('/', (req, res) => {
    res.sendFile(__dirname + '/public/index.html');
});

// API для отримання повідомлень
app.get('/api/messages', (req, res) => {
    console.log('📤 Відправляємо всі повідомлення клієнту');
    res.json(messages);
});

// API для створення повідомлення
app.post('/api/messages', (req, res) => {
    const message = {
        text: req.body.text,
        time: new Date().toLocaleTimeString()
    };
    console.log(`📥 Отримано нове повідомлення: ${message.text}`);
    messages.push(message);
    res.json(message);
});

app.listen(3000, () => {
    console.log('🚀 Сервер запущено на порту 3000');
});

Файл index.html необхідно створити в папці public/. Для цього необхідно натиснути на три крапки навпроти папки та обрати “Add File to Folder“:

Друкуємо назву файла index.html, щоб вийшло як на зображенні нижче та натискаємо “Add This File”.

Копіюємо та вставляємо код, наведений нижче, в новостворений файл.

<!DOCTYPE html>
<html>
<head>
    <title>Наш Чат</title>
    <style>
        .log {
            background: #f0f0f0;
            padding: 10px;
            margin: 10px 0;
            border-radius: 5px;
        }
        .message {
            border-left: 3px solid #2196F3;
            padding: 10px;
            margin: 5px 0;
        }
        #network-log {
            position: fixed;
            right: 20px;
            top: 20px;
            width: 300px;
            background: white;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
    </style>
</head>
<body>
    <div id="network-log">
        <h3>🔍 Мережева активність</h3>
        <div id="log-entries"></div>
    </div>

    <h1>📬 Наш Чат</h1>
    
    <div>
        <input type="text" id="messageInput" placeholder="Введіть повідомлення">
        <button onclick="sendMessage()">Надіслати</button>
    </div>

    <div id="messages"></div>

    <script>
        // Функція для додавання запису в лог
        function addToLog(text) {
            const logDiv = document.getElementById('log-entries');
            const entry = document.createElement('div');
            entry.className = 'log';
            entry.textContent = text;
            logDiv.insertBefore(entry, logDiv.firstChild);
            
            // Видаляємо старі записи
            if (logDiv.children.length > 5) {
                logDiv.removeChild(logDiv.lastChild);
            }
        }

        // Отримання повідомлень
        async function getMessages() {
            addToLog('📤 Запитуємо повідомлення з сервера...');
            
            const response = await fetch('/api/messages');
            const messages = await response.json();
            
            addToLog('📥 Отримано повідомлення від сервера');
            
            const messagesDiv = document.getElementById('messages');
            messagesDiv.innerHTML = messages.map(msg => `
                <div class="message">
                    <strong>${msg.time}</strong>: ${msg.text}
                </div>
            `).join('');
        }

        // Надсилання повідомлення
        async function sendMessage() {
            const input = document.getElementById('messageInput');
            const text = input.value;
            
            if (!text) return;
            
            addToLog(`📤 Надсилаємо повідомлення: ${text}`);
            
            await fetch('/api/messages', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ text })
            });
            
            addToLog('📥 Сервер підтвердив отримання');
            
            input.value = '';
            getMessages();
        }

        // Оновлюємо повідомлення кожні 5 секунд
        setInterval(getMessages, 5000);
        getMessages();
    </script>
</body>
</html>

Тепер залишилось тільки скопіювати та вставити код, наведений нижче, у файл package.json:

{
  "name": "notes-app",
  "version": "1.0.0",
  "description": "Простий застосунок для нотаток",
  "main": "server.js",
  "scripts": {
    "start": "node server.js"
  },
  "dependencies": {
    "express": "^4.17.1"
  }
}

Щоб запустити сервер, натискаємо знизу на кнопку “PREVIEW” та обираємо “Preview in a new window”:

Вітаю! Якщо ви все зробили правильно, то в сусідній вкладці браузера відкриється сайт, який ви тільки що створили.

Перевірте роботу сервісу надіславши кілька повідомлень. Ви також можете скопіювати його адресу (щось накшталт https://animate-piranha.glitch.me/) та відправити її друзям, щоб поспілкуватися з ними.

Приблизно так виглядали чати на початку Інтернету.

Ми з’ясували, що в основі роботи Інтернету знаходиться клієнт-серверна модель:

• комп’ютери користувачів надсилають запити комп’ютерам-серверам

• комп’ютери-сервери, своєю чергою, відправляють інформацію назад на комп’ютери користувачів.

Для надсилання запитів серверу на комп’ютері користувача повинна бути спеціальна програма - веб-браузер (Brave, Chrome, Safari).

Щоб комп’ютер-сервер міг повертати відповіді на запити, він повинен також мати спеціальну програму - якраз таку, що ви відтворили.

Створивши свій чат, ви зробили величезний крок у розумінні роботи Інтернету, але пропоную піти ще далі та дізнатися, які процеси відбуваються “під капотом“ вашого веб-сервіса, коли ви ним користуєтесь.

Частина 3: Спостерігаємо за взаємодією

🔍 Що відбувається при відкритті сторінки?

Коли ви відкриваєте сторінку в браузері, відбувається кілька важливих кроків:

1. Запит до сервера: браузер надсилає HTTP-запит типу GET до сервера за вказаною адресою (URL). Цей запит просить сервер надати початковий HTML-файл.

2. Відповідь від сервера: сервер знаходить потрібний HTML-файл і надсилає його у відповідь на запит браузера. Цей файл є основою для побудови веб-сторінки на екрані.

3. Завантаження додаткових ресурсів: після отримання HTML браузер аналізує його вміст і надсилає додаткові запити на сервер для завантаження необхідних файлів, таких як CSS (для стилізації сторінки) та JavaScript (для додавання інтерактивності).

4. Виконання JavaScript: як тільки браузер завантажує JavaScript-файли, вони починають виконуватися. У нашому прикладі скрипт надсилає запит до сервера, щоб отримати початковий список повідомлень.

5. Відображення інформації: отримані дані обробляються і відображаються на сторінці.

📝 Що таке HTTP-запит?

HTTP-запит — це спосіб, яким клієнт (наприклад, ваш браузер) спілкується із сервером. Запит може бути різних типів:

• GET: використовується для отримання даних (наприклад, HTML або список повідомлень). У нашому чаті GET-запит до серверу використовується для отримання списку всіх повідомлень із сервера.

• POST: використовується для надсилання даних на сервер (наприклад, текст нового повідомлення). У нашому прикладі POST-запит до серверу використовується для додавання нового повідомлення до списку.

• PUT, DELETE: використовуються для оновлення або видалення даних (у нашому прикладі ці типи запитів не використовуються).

📝 Що відбувається при надсиланні повідомлення?

1. Введення повідомлення: Користувач вводить текст у поле введення і натискає кнопку «Надіслати».

2. Формування запиту: код JavaScript формує HTTP-запит типу POST, у якому дані повідомлення передаються у зрозумілому для сервера форматі (в нашому прикладі це JSON).

3. Обробка на сервері: Сервер отримує цей запит, зберігає повідомлення у своїй базі даних (у нашому прикладі база даних не використовується, тож повідомлення зберігається на самому сервері).

4. Відповідь сервера: Сервер надсилає відповідь із підтвердженням і даними нового повідомлення.

5. Оновлення сторінки: код JavaScript на стороні клієнта отримує цю відповідь і додає нове повідомлення до списку, відображеного на сторінці.

🔄 Постійне оновлення

Для підтримки актуального списку повідомлень код JavaScript у браузері періодично надсилає HTTP-запити типу GET до сервера. Сервер повертає оновлений список, і сторінка автоматично оновлюється без потреби перезавантаження. Це дозволяє користувачам бачити нові повідомлення в реальному часі.

Ви можете спостерігати за цим процесом, якщо відкриєте інструменти розробника (F12) і перейдете на вкладку Network.

При уважному вивченні мережевої активності можна побачити:

• Завантаження сторінки.

• Надсилання повідомлення.

• Автоматичне оновлення.

Щоб отримати додаткову інформацію про запит - просто натисніть на нього.

Висновок

У цій статті ми розглянули основні принципи роботи Інтернету, зокрема:

• Як пристрої обмінюються даними за допомогою клієнт-серверної моделі.

• Як працюють HTTP-запити та відповіді.

• Як браузер взаємодіє з сервером для отримання й відображення даних.

На практичному прикладі ви створили простий чат-сервіс, який ілюструє, як клієнт і сервер працюють разом для обміну інформацією.

Сподобалась публікація? Дуже на це сподіваюсь, адже автор відшукував матеріали, перекладав, редагував та адаптував його для того, щоб читання приносило не лише задоволення, але й було корисним. Можете підтримати його донатом. Навіть 1 гривня принесе радість!