У першій частині ми з’ясували, що Інтернет — це глобальна мережа, яка об’єднує мільйони пристроїв і дає змогу обмінюватися даними, використовуючи клієнт-серверну модель. Ми розглянули ключові поняття (клієнт, сервер, IP-адреса, DNS) й на практиці створили простий чат-сервіс, щоб краще зрозуміти, як ці елементи взаємодіють.
У другій частині ми познайомимось з новими поняттями, які також важливі для розуміння роботи Інтернету, зокрема:
розберемо, з чого складається веб-адреса (URL).
ознайомимося з базовими протоколами передачі даних (TCP, UDP, HTTPS).
дізнаємося, що таке кеш і cookies та навіщо вони потрібні.
закріпимо ці знання на практиці - створимо веб-застосунок для публікації нотаток.
1. Структура веб-адреси
URL (Uniform Resource Locator, уніфікований локатор ресурсу), по суті, є адресою певної сторінки, файлу або іншого об’єкту в Інтернеті.
Протокол http/https
Якщо ви подивитеся на адресний рядок браузера, то майже завжди побачите http:// або https:// на початку адреси сайту.
Це протокол: набір правил, за якими відбувається передача даних між клієнтом (браузером) і сервером.
Уявіть собі, що ви спілкуєтесь з другом. Щоб ви зрозуміли один одного, ви обидва повинні використовувати одну й ту саму мову спілкування.
Протокол у мережі – це така собі “мова”, за допомогою якої спілкуються ваш комп'ютер і веб-сервер.
HTTP (HyperText Transfer Protocol) — протокол передачі гіпертексту. Він визначає, як саме браузер має відправляти запит і отримувати відповідь від сервера.
HTTPS — це більш безпечна версія HTTP, де вся передача даних відбувається в зашифрованому вигляді. Сьогодні цей протокол є стандартом і більшість браузерів можуть навіть не відкрити сторінку зі звичайним
http://або видадуть попередження, що сайт використовує незахищене з’єднання.
На практиці ми не вводимо вручну http:// або https:// перед доменом сайту - браузер підставляє протокол https:// на початку веб-адреси автоматично, щоб сервер розумів, що у нього будуть запитувати інформацію у вигляді HTML, CSS та JS, з якими ми знайомились в першій частині.
HTTP і HTTPS найпоширеніші протоколи для “спілкування” клієнтів та серверів, але є й інші, наприклад, FTP для передачі файлів або SMTP для електронної пошти.
Домен і DNS
Наступний елемент веб-адреси — домен, наприклад, google.com, drukarnia.com.ua або example.org.
Домен використовується тільки для того, щоб людям було легше запам’ятовувати адресу сайту. Зрештою, браузеру потрібна IP-адреса сервера. Тому, коли ви вводите домен в адресний рядок браузера, відбувається наступне:
Браузер звертається до найближчого DNS-сервера (зазвичай це DNS-сервер інтернет-провайдера) із запитом: “Яка IP-адреса відповідає домену drukarnia.com.ua?”.
DNS знаходить відповідь у своїй базі (наприклад, 104.21.40.216) і повідомляє про це браузер.
Браузер, використовуючи надану IP-адресу, відправляє HTTPS-запит на сервер з проханням надіслати веб-сторінку.
Сервер обробляє запит і відправляє браузеру HTML-код веб-сторінки.
Якщо ж сайту з таким доменом не існує, DNS повідомить про це браузер і ви побачите на екрані щось подібне:
Порт
Наступна частина веб-адреси — номер порту.
Це може збити з пантелику, адже після домену ми, зазвичай, нічого не бачимо:
Насправді він там є, просто браузер його не показує, щоб не перевантажувати адресний рядок технічною інформацією. Але ми можемо провести експеримент і додати номер порту вручну.
Для протоколу https:// стандартним номером порту є 443, тож якщо ви додасте до домену це значення: https://drukarnia.com.ua:443/ та спробуєте перейти за такою адресою, то всеодно потрапите на сайт Друкарні й не побачите жодної помилки.
Але якщо ви оберете інший номер порту, наприклад https://drukarnia.com.ua:444/, браузер задумається та видасть щось подібне:
Це тому, що сервер, на якому зберігаються файли Друкарні, не налаштований приймати запити через цей порт.
Якщо ж ви додасте номер порту 80 (https://drukarnia.com.ua:80/), який є стандартним для незахищеного протоколу http://, браузер видасть помилку. Це відбувається тому, що сайт налаштований працювати тільки через захищений протокол https:// та порт 443, а на порту 80 захищене з'єднання не налаштоване.
То що ж таке порт?
Уявіть собі велику офісну будівлю з багатьма кабінетами. В кожному кабінеті працює фахівець, що займається певним питанням.
Офісна будівля - це сервер, на якому розміщений веб-сайт. Адреса офісної будівлі - це IP-адреса сервера. Номер кабінету - це номер порту.
Коли ви заходите на веб-сайт через захищений протокол https://, ви фактично звертаєтесь до кабінету №443, де працює фахівець із захищених з'єднань. Якщо ж використовується звичайний протокол http://, то це кабінет №80.
В одній офісній будівлі (на одному сервері) можуть працювати різні фахівці (програми), кожен у своєму кабінеті (порту). Наприклад:
В кабінеті №443 працює фахівець із захищених веб-з'єднань.
В кабінеті №80 працює фахівець зі звичайних веб-з'єднань.
В інших кабінетах можуть працювати фахівці з електронної пошти (кабінет №25), передачі файлів (кабінет №21) тощо.
Якщо ви прийдете до кабінету №80 і попросите захищене з'єднання (https), вам скажуть: “Вибачте, але захищеними з'єднаннями займається кабінет №443”. Саме тому виникає помилка, коли ви намагаєтесь використати https:// з портом 80.
Отже, порт – це як номер кабінету в офісній будівлі, який допомагає серверу зрозуміти, яка саме служба або програма має обробити ваш запит.
Шлях
Після домену ви часто бачите похилу риску “/” та додатковий текст, наприклад:
Тут /artem — це шлях, який вказує серверу, яку саме інформацію ви хочете отримати.
Повертаючись до нашої аналогії з офісною будівлею:
Якщо домен — це адреса будівлі, а порт — номер кабінету, то шлях — це як інструкція, куди саме необхідно пройти всередині кабінету. Наприклад:
"Підійдіть до третьої шафи, відкрийте другий ящик"
"Загляньте в папку з документами за 2024 рік"
У веб-адресах такі інструкції записуються через похилу риску "/":
https://mycompany.com/about/team— це як сказати "зайдіть в розділ 'Про нас', а там знайдіть інформацію про команду"https://mycompany.com/products/books/fantasy— "зайдіть в розділ товарів, там знайдіть книжки, а серед них — категорію фентезі"
Шлях може вести до різних типів вмісту:
Сторінки:
https://drukarnia.com.ua/contacts— сторінка з контактною інформацієюЗображення:
https://drukarnia.com.ua/images/logo.png— логотип компаніїДокументи:
https://drukarnia.com.ua/files/price.pdf— прайс-лист у форматі PDF
Кожна частина шляху після символу "/" уточнює, куди саме "йти" на сервері, щоб знайти потрібну інформацію — як вказівники для навігації всередині будівлі.
Параметри запиту
Уявіть, що ви прийшли до офісу і звертаєтесь до співробітника з проханням. Але щоб отримати точну відповідь, вам потрібно уточнити деталі вашого запиту.
У веб-адресах для цього використовуються параметри запиту — додаткова інформація, що вказується після знака питання "?".
Як це працює?
Пошук товарів:
https://shop.com/products?category=books&maxPrice=300&inStock=true
Людською мовою це означає: "Покажіть мені книжки, дешевші за 300 гривень, які є в наявності"
Сортування результатів:
https://shop.com/search?q=телефони&sort=price-low-to-high&brand=samsung
Це схоже на прохання: "Знайдіть телефони Samsung та покажіть спочатку найдешевші"
Фільтрація контенту:
https://news.com/articles?date=2025-01&topic=technology
Це як сказати: "Покажіть новини про технології за січень 2025 року"
Параметри запиту розділяються символом "&", і кожен складається з:
Ключа (що саме ви уточнюєте, наприклад
“date”)Знака
"="Значення (що саме вас цікавить, наприклад:
“2025-01”)
Це схоже на заповнення анкети, де:
category=books— відповідь на питання “Яка категорія?”maxPrice=300— відповідь на питання “Яка максимальна ціна?”inStock=true— відповідь на питання “Чи має бути в наявності?”
Завдяки параметрам запиту ви можете точно пояснити серверу, яку саме інформацію хочете отримати.
Практичний приклад розбору URL
Продовжимо нашу аналогію з офісом і розберемо наведений URL в деталях:
https://myshop.com:443/products/smartphones?brand=xiaomi&sort=price
Протокол (
https://):Це спосіб потрапити до офісу.
httpsозначає, що ви йдете захищеним шляхом (з охороною).Домен (
myshop.com):Це адреса офісної будівлі.
Вказує, куди саме вам потрібно прийти.
Порт (
443):Це номер кабінету.
Порт 443 - це стандартний кабінет для захищених звернень.
Зазвичай його навіть не потрібно вказувати, бо всі знають, що захищені звернення обробляються саме там.
Шлях (
/products/smartphones):Це як навігація всередині кабінету.
“Зайдіть в розділ товарів, а там перейдіть до смартфонів”.
Параметри запиту (
?brand=xiaomi&sort=price):Це додаткові уточнення вашого запиту.
brand=xiaomi- “Покажіть мені тільки смартфони Xiaomi”.sort=price- “Відсортуйте їх за ціною”.
Отже, повна адреса говорить: "Зайдіть в офісну будівлю myshop.com через захищений вхід, підійдіть до кабінету 443, там знайдіть розділ товарів, перейдіть до смартфонів, і покажіть мені смартфони Xiaomi, відсортовані за ціною".
3. Базові протоколи
Протоколи є основою роботи Інтернету, вони забезпечують обмін інформацією між пристроями. Без їх розуміння важко уявити, як функціонують сучасні технології.
Нагадаю, що протокол - це набір правил, за якими відбувається передача даних між клієнтом (браузером) і сервером.
Протокол можна порівняти з мовою, за допомогою якої спілкуються ваш комп'ютер і веб-сервер. Використовуючи певний протокол, сервер розуміє, що від нього хоче браузер.
TCP/IP: Надійний кур'єр
TCP/IP - це два фундаментальних протоколи, які працюють разом, забезпечуючи передачу даних в Інтернеті.
TCP (Transmission Control Protocol) відповідає за надійне доставлення даних. Він розбиває великі файли на менші частини (пакети), нумерує їх і стежить за тим, щоб всі пакети дісталися до місця призначення в правильному порядку. Якщо якийсь пакет губиться, TCP попросить відправити його знову.
IP (Internet Protocol) відповідає за адресацію і маршрутизацію пакетів. Кожен пристрій в Інтернеті має унікальну IP-адресу, яка вказує на його мережу. IP-пакети містять інформацію про джерело і призначення, а маршрутизатори використовують цю інформацію, щоб направити пакети до потрібного одержувача.
Коли ви завантажуєте зображення в Instagram, воно розбивається на безліч маленьких пакетів. Кожен пакет містить IP-адресу, яка вказує на сервер Instagram, і номер, який дозволяє зібрати зображення в правильному порядку на сервері. Завдяки протоколу TCP, всі пакети доставляються цілими та неушкодженими.
Уявіть, що ви відправляєте важливий подарунок другу в інше місто. Ви, звичайно, хочете бути впевнені, що подарунок дійде цілим. Саме так працює TCP/IP.
Якщо подарунок завеликий, кур'єр акуратно розділить його на менші пакунки. На кожному він напише точну адресу отримувача (це робить протокол IP) і порядковий номер, щоб потім можна було зібрати все правильно. Кур'єр не заспокоїться, доки не отримає підтвердження про доставлення кожного окремого пакунка. Якщо щось загубиться в дорозі – він одразу відправить це повторно.
Така надійність особливо важлива, коли ви відправляєте файли, переглядаєте веб-сторінки або оплачуєте щось онлайн.
UDP: Швидкий кур'єр
UDP (User Datagram Protocol) – це ще один протокол, який використовується для передачі даних в мережі.
На відміну від TCP, UDP не гарантує доставлення кожного пакету даних і не перевіряє їх порядок та цілісність. Замість цього, він забезпечує швидку передачу даних, що робить його ідеальним для застосунків, де затримка є критичним фактором.
Якщо TCP - це кур'єр, який чекає підтвердження, що посилку доставлено в цілісності, то UDP працює як кур’єр, який не вимагає підпису про отримання: він просто кидає посилку біля дверей і біжить далі. Завдяки цьому швидкість передачі даних значно вища, але немає гарантій, що всі пакети дійдуть без втрат.
Уявіть пряму трансляцію футбольного матчу. Тут важлива швидкість – ви хочете бачити, що відбувається на полі прямо зараз, а не з затримкою в кілька секунд. Саме для таких випадків існує UDP – дані передаються безперервним потоком, без очікування підтвердження про отримання. Якщо якийсь кадр “загубився” – не страшно, за ним вже йдуть нові. Так, можливо, ви помітите короткі завмирання картинки або тимчасове погіршення якості, але затримки в трансляції не буде.
Цей протокол ідеально підходить для онлайн-ігор, відеодзвінків та стрімінгу, де важлива миттєва реакція, а невеликі втрати якості не критичні.
HTTPS: Захищена доставка
Ми вже говорили про https, як про частину веб-адреси, тепер розгляньмо його детальніше, як один з найважливіших протоколів для роботи Інтернету.
HTTPS (HyperText Transfer Protocol Secure) – це більш безпечна версія протоколу HTTP, який використовується для передачі даних між вашим браузером та веб-сервером.
Якщо порівняти HTTP з відкритою дорогою, то HTTPS – це тунель, який захищає ваші дані від сторонніх очей.
Чому HTTPS важливий?
Коли ви вводите свої особисті дані на сайті (наприклад, пароль, номер кредитної картки), вони шифруються, тобто перетворюються на незрозумілий набір символів. Навіть якщо хтось перехопить ці дані, він не зможе їх прочитати без спеціального ключа.
Як працює HTTPS?
З'єднання: Коли ви заходите на сайт з HTTPS, ваш браузер і веб-сервер встановлюють захищене з'єднання.
Сертифікат: Веб-сервер показує свій цифровий сертифікат, який підтверджує, що сайт належить саме тій організації, з якою ми взаємодіємо (банк, інтернет-магазин тощо).
Шифрування: Після перевірки сертифіката, браузер і сервер починають шифрувати всі дані, які передаються між ними (про шифрування ми поговоримо в іншій статті).
Передача даних: Зашифровані дані передаються мережею.
Розшифрування: На стороні веб-сервера дані розшифровуються й обробляються.
HTTPS можна порівняти з системою безпечної доставки конфіденційних документів. Уявіть, що ви відправляєте важливий документ з особистими даними. HTTPS працює як спеціальний захищений конверт з унікальним замком – його можна відкрити тільки спеціальним ключем, який є лише в отримувача.
Навіть якщо хтось перехопить такий конверт по дорозі, він не зможе прочитати його вміст. Більше того, отримувач зможе перевірити, чи не підмінив хтось конверт дорогою.
Без HTTPS ваші дані схожі на звичайну поштову листівку, яку може прочитати будь-хто.
Така система захисту особливо важлива, коли ви вводите пароль від особистого кабінету, робите покупки в інтернет-магазині або користуєтеся онлайн-банкінгом.
Як це все працює разом?
У реальному житті ці протоколи часто працюють разом, доповнюючи один одного. Наприклад, коли ви заходите в онлайн-банк, HTTPS створює захищений канал зв'язку, а TCP/IP забезпечує надійну доставку всіх даних без втрат. Коли ви робите відеодзвінок, HTTPS захищає вашу розмову від підслуховування, а UDP забезпечує швидку передачу відео та звуку без затримок.
Розуміння цих протоколів допомагає краще усвідомити, чому іноді відео в дзвінку може "підвисати" (це UDP жертвує якістю заради швидкості), а важливий файл завжди завантажиться без помилок (це TCP гарантує повну доставку).
Кожен протокол має свої сильні сторони і найкраще підходить для певних завдань, разом створюючи надійну та безпечну роботу сучасного Інтернету.
4. Кешування та cookies
Щоразу, коли ви відкриваєте веб-сайт, відбувається багато невидимих процесів, які роблять ваше користування інтернетом зручнішим і швидшим. Два найважливіших помічники тут – це кеш браузера та cookies.
Уявіть, що у вас є домашня бібліотека. Коли ви хочете почитати якусь книгу, ви йдете прямо на полицю, де вона зберігається. Вам не потрібно кожного разу йти до міської бібліотеки, щоб знайти ту саму книгу.
Схожим чином працює кеш браузера – це ваша особиста “полиця” для веб-сторінок.
Коли ви вперше відвідуєте сайт, браузер завантажує всі необхідні файли: HTML, CSS, JavaScript, тексти, зображення тощо. Він зберігає їх у кеші – спеціальному місці на вашому комп'ютері.
При повторному відвідуванні сайту браузер спочатку перевірить свою “полицю”: якщо потрібні файли вже є в кеші, він використає їх замість того, щоб завантажувати все заново з Інтернету. Це суттєво прискорює роботу з сайтом.
А cookies можна порівняти з маленькими нотатками, які сайти залишають на вашому комп'ютері. Коли ви заходите на сайт і налаштовуєте його під себе – обираєте мову, змінюєте розмір тексту або входите у свій обліковий запис – сайт зберігає ці налаштування в cookies.
Наступного разу, коли ви зайдете на цей сайт, він прочитає ці нотатки й відразу налаштує все так, як вам зручно.
Наприклад, коли ви входите в свій обліковий запис на якомусь сайті, він створює cookie з інформацією про вашу авторизацію. Завдяки цьому вам не потрібно вводити логін і пароль щоразу, коли ви переходите на нову сторінку цього сайту, або відвідуєте його пізніше.
Однак іноді кеш і cookies потребують очищення. Це схоже на прибирання у шафі – час від часу потрібно позбуватися старих і непотрібних речей.
Коли варто це робити?
Якщо сайт раптом почав відображатися неправильно, перше, що варто спробувати – очистити кеш. Можливо, браузер використовує застарілу версію файлів, що заважає правильній роботі сайту.
Також варто очищати cookies, коли ви працювали з важливими сайтами (наприклад, інтернет-магазинами чи банками) на чужому комп'ютері. Це допоможе захистити ваші особисті дані, адже cookies можуть зберігати досить чутливу інформацію.
Інколи очищення кешу і cookies може знадобитися з міркувань безпеки. Деякі шкідливі програми можуть використовувати їх для збереження своєї інформації або відстеження ваших дій в інтернеті.
Отже, кеш і cookies – це корисні інструменти, які роблять вашу роботу в інтернеті швидшою та зручнішою. Вони як надійні помічники, які пам'ятають ваші вподобання і допомагають сайтам швидше завантажуватися. Але іноді цим помічникам потрібно давати "прочухан", очищаючи їх для кращої роботи браузера та вашої безпеки.
5. Практичний проєкт: "Менеджер нотаток"
Щоб не лише в теорії, а й на практиці побачити, як працюють різні протоколи, cookies і кешування, створимо ще один веб-застосунок — “Менеджер нотаток” на платформі Glitch.com.
Докладніше про реєстрацію та налаштування проєкту ви можете почитати в першій частині, тож я не буду повторюватись, а одразу перейду до вмісту файлів.
Код, що наведений нижче, необхідно скопіювати та вставити у файл server.js, попередньо видаливши його початковий вміст:
// server.js
const express = require('express');
const app = express();
// Масив для зберігання нотаток
let notes = [];
app.use(express.json());
app.use(express.static('public'));
// Емуляція затримки мережі для демонстрації TCP vs UDP
const simulateNetworkDelay = (reliable = true) => {
const delay = Math.random() * 1000;
// Збільшуємо шанс "помилки" до 50%
const error = Math.random() > 0.5;
return new Promise((resolve, reject) => {
setTimeout(() => {
if (error) {
reject(new Error('Server error'));
} else {
resolve();
}
}, delay);
});
};
// API для отримання нотаток (TCP - надійна передача)
app.get('/api/notes', async (req, res) => {
try {
await simulateNetworkDelay(true);
res.json(notes);
} catch (error) {
res.status(500).json({ error: error.message });
}
});
// API для збереження нотатки (TCP - надійна передача)
app.post('/api/notes', async (req, res) => {
try {
await simulateNetworkDelay(true);
const note = {
id: Date.now(),
text: req.body.text,
time: new Date().toLocaleTimeString()
};
notes.push(note);
res.json(note);
} catch (error) {
res.status(500).json({ error: error.message });
}
});
// API для попереднього перегляду (UDP - швидка, але ненадійна передача)
app.post('/api/preview', async (req, res) => {
try {
await simulateNetworkDelay(false);
res.json({ preview: req.body.text });
} catch (error) {
res.status(503).json({ error: 'Preview unavailable' });
}
});
app.listen(3000, () => {
console.log('🚀 Сервер запущено на порту 3000');
});Наступним кроком створюємо файл index.html в папці public та вставляємо код, наведений нижче, в новостворений файл.
<!DOCTYPE html>
<html>
<head>
<title>Менеджер нотаток</title>
<style>
body {
font-family: Arial, sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
.note {
border-left: 3px solid #2196F3;
padding: 10px;
margin: 10px 0;
background: #f5f5f5;
}
#preview {
color: #666;
font-style: italic;
}
#status {
position: fixed;
top: 20px;
right: 20px;
padding: 10px;
background: white;
border: 1px solid #ddd;
border-radius: 5px;
}
.error {
color: red;
}
#themeToggle {
position: fixed;
top: 20px;
left: 20px;
}
.dark-theme {
background: #222;
color: #fff;
}
.dark-theme .note {
background: #333;
border-color: #666;
}
</style>
</head>
<body>
<button id="themeToggle">🌙 Темна тема</button>
<div id="status">
<div>🔄 Мережева активність:</div>
<div id="networkStatus"></div>
</div>
<h1>📝 Менеджер нотаток</h1>
<div>
<textarea
id="noteInput"
rows="4"
style="width: 100%"
placeholder="Введіть текст нотатки..."></textarea>
<div id="preview"></div>
<button onclick="saveNote()">Зберегти</button>
</div>
<div id="notes"></div>
<script>
// Функції для роботи з cookies
function setCookie(name, value, days) {
const expires = new Date();
expires.setTime(expires.getTime() + days * 24 * 60 * 60 * 1000);
document.cookie = `${name}=${value};expires=${expires.toUTCString()};path=/`;
}
function getCookie(name) {
const value = `; ${document.cookie}`;
const parts = value.split(`; ${name}=`);
if (parts.length === 2) return parts.pop().split(';').shift();
}
// Функції для роботи з кешем
async function saveToCache(notes) {
if ('caches' in window) {
const cache = await caches.open('notes-cache');
await cache.put('/cached-notes', new Response(JSON.stringify(notes)));
}
}
async function loadFromCache() {
if ('caches' in window) {
const cache = await caches.open('notes-cache');
const response = await cache.match('/cached-notes');
if (response) {
return await response.json();
}
}
return [];
}
// Оновлення статусу мережі
function updateNetworkStatus(message, isError = false) {
const status = document.getElementById('networkStatus');
status.innerHTML = `<div class="${isError ? 'error' : ''}">${message}</div>`;
}
// Отримання нотаток
async function getNotes() {
try {
updateNetworkStatus('📥 Завантаження нотаток (TCP)...');
const response = await fetch('/api/notes');
const notes = await response.json();
// Зберігаємо в кеш
await saveToCache(notes);
displayNotes(notes);
updateNetworkStatus('✅ Нотатки завантажено');
} catch (error) {
updateNetworkStatus('❌ Помилка завантаження. Використовуємо кеш...', true);
const cachedNotes = await loadFromCache();
displayNotes(cachedNotes);
}
}
// Збереження нотатки
async function saveNote() {
const input = document.getElementById('noteInput');
const text = input.value;
if (!text) return;
try {
updateNetworkStatus('📤 Збереження нотатки (TCP)...');
const response = await fetch('/api/notes', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ text })
});
await response.json();
input.value = '';
document.getElementById('preview').textContent = '';
updateNetworkStatus('✅ Нотатку збережено');
getNotes();
} catch (error) {
updateNetworkStatus('❌ Помилка збереження', true);
}
}
// Попередній перегляд (UDP)
let previewTimeout;
async function updatePreview() {
const input = document.getElementById('noteInput');
const text = input.value;
clearTimeout(previewTimeout);
previewTimeout = setTimeout(async () => {
try {
updateNetworkStatus('👁 Оновлення превью (UDP)...');
const response = await fetch('/api/preview', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ text })
});
const data = await response.json();
if (data.preview) {
document.getElementById('preview').textContent =
`Попередній перегляд: ${data.preview}`;
updateNetworkStatus('✅ Превью оновлено');
}
} catch (error) {
// Ігноруємо помилки для UDP
updateNetworkStatus('⚠️ Превью недоступне', true);
}
}, 300);
}
// Відображення нотаток
function displayNotes(notes) {
const notesDiv = document.getElementById('notes');
notesDiv.innerHTML = notes.map(note => `
<div class="note">
<strong>${note.time}</strong>
<p>${note.text}</p>
</div>
`).join('');
}
// Налаштування теми
function toggleTheme() {
const isDark = document.body.classList.toggle('dark-theme');
setCookie('theme', isDark ? 'dark' : 'light', 30);
document.getElementById('themeToggle').textContent =
isDark ? '☀️ Світла тема' : '🌙 Темна тема';
}
// Ініціалізація
document.getElementById('noteInput').addEventListener('input', updatePreview);
document.getElementById('themeToggle').addEventListener('click', toggleTheme);
// Завантаження збережених налаштувань
if (getCookie('theme') === 'dark') {
toggleTheme();
}
// Початкове завантаження нотаток
getNotes();
</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://probable-atomic-hydrogen.glitch.me/) та відправити її друзям.
Під час роботи з сайтом можуть виникнути проблеми із завантажуванням та відображенням нотаток:
Так і має бути! В коді застосунку є симуляція проблем із сервером, щоб ми могли побачити, як працює кеш.
Через деякий час, коли “сервер підніметься“, нотатки підтягнуться та будуть відображатися, а до того моменту у вікні браузера буде відображатися “закешована” версія сайту.
Також, ви можете спостерігати симуляцію роботи UDP-протоколу, коли під полем введення нотаток з’являється попередній перегляд:
Іноді в попередньому перегляді ви можете побачити не весь текст, який ввели в полі введення нотатки. Але ви повиння пам’ятати, що UDP-протокол не дуже надійний в плані передачі даних, тож міг загубити якісь пакети по дорозі.
Якщо ж сервер працював стабільно, то ви побачите повний текст нотаток на екрані. За це відповідали протоколи TCP/IP, тож там нічого не загубилось.
Якщо ви перемикаєте сайт на “Темну тему“, а потім перезавантажите його, то темна тема залишиться, тому що cookies вашого браузера запам’ятали це налаштування:
Що відбувається “під капотом”
Відкрийте DevTools (F12 або Ctrl+Shift+I в Chrome) в браузері, щоб подивитися на роботу застосунку “зсередини”.
Кешування в дії
Якщо ви оновите сторінку кілька разів, у Network ви можете помітити, що деякі файли будуть завантажуватися зі статусом 304. Це свідчать про те, що браузер не завантажує ресурс із сервера, оскільки він не змінився з моменту останнього запиту. Замість цього використовується вміст із кешу браузера.
Там же можна побачити й “помилки сервера”, що підсвічені червоним кольором.
На вкладці Application → Cache storage (у Chrome) можна подивитися, що саме зберігається в кеші браузера
Cookies
На вкладці Application → Cookies (у Chrome) можна подивитися, які саме cookies зберігає ваш застосунок. Там будуть:
Ім’я cookie (
theme)Його значення (
dark)
Завдяки цьому, при перезавантаженні сторінки зберігається тема сайту. Можете поекспериментувати, видаливши інформацію з таблиці.
Тепер, після перезавантаження, сторінка знову буде зі світлою темою.
Висновок
У цій частині ми:
З’ясували, як влаштована веб-адреса (URL) і для чого потрібні протокол, домен, порт, шлях і параметри.
Поглибили знання про TCP/IP, UDP та HTTPS — протоколи, що дозволяють пристроям обмінюватися даними.
Розібралися, що таке кеш і cookies, і чому вони полегшують життя користувачам.
На прикладі застосунку “Менеджер нотаток” побачили, як працюють протоколи, кеш та cookies.
На цьому ми завершуємо другу частину нашого інтерактивного уроку про роботу Інтернету. Сподіваюсь, ці нові знання дозволять вам не лише розібратися у внутрішній “кухні” вебу, а й надихнуть на створення власних цікавих проєктів!
Сподобалась публікація? Дуже на це сподіваюсь, адже автор відшукував матеріали, перекладав, редагував та адаптував його для того, щоб читання приносило не лише задоволення, але й було корисним. Можете підтримати його донатом. Навіть 1 гривня принесе радість!
