Як ми два тижні билися з чатами і база HTTP врятувала ситуацію

Привіт, я Тетяна, проджект-менеджер стартапу. Зазвичай у нас повно ідей та грандіозних планів, і ми всією командою працюємо над проєктом, яким хочемо змінити світ (ну або принаймні зробити його трішки комфортнішим). І все йшло більш-менш гладко... поки ми не взялися реалізовувати чат на вебсокетах.

Два тижні невдач і паніки

Якщо коротко: ми з дев-командою вирішили підключити чат у наш застосунок в реальному часі, щоби користувачі могли обмінюватися повідомленнями «моментально» — тобто за допомогою вебсокетів. Здавалося, все нескладно: є купа прикладів і статей, «навіщо довго думати?». Але минали дні, потім тиждень, другий... а чат уперто не працював. То отримували 504 Gateway Timeout, то видавалося, що наче порт закритий, то SSL-сертифікат не підтягнувся, то DNS десь згубився.

Команда почала панікувати: «Невже ми такі нездари?». Я теж, зізнаюся, мала «фейлові» думки: «Може, воно взагалі тут не потрібно? Може, зробимо щось інше?». Але ці ідеї зустрічали критику: хотілося саме сучасний, справжній real-time chat. Так ми тупцювали на місці, поки не викликали нашого ментора.

Техномаг Андрій і його «магія»

У нас немає свого девопса, але є Андрій — ментор з величезним досвідом. Його спеціально залучаємо для складних випадків. Я запросила його подивитися на наш чат. Всього один дзвінок, 20 хвилин розмови — і він каже: «Ребята, та тут же все у дрібницях: HTTP, Nginx, порти, SSL, DNS — класика». Це було трохи схоже на магію, що ми так довго не могли розібратися і все зробили так швидко. Але водночас ми зраділи, що нарешті побачимо світло в кінці тунелю.

Андрій почав розпитувати, як ми підключали вебсокети, чи перевіряли заголовки, чи відкритий порт, чи прописали хости... Виявилося, що без базових практичних знань про HTTP-протокол можна блукати колами дуже довго.

Чекліст усіх пасток, про які треба знати якщо у вас WebSocket

1. HTTP-заголовки та Network-інспект. Спершу Андрій показав, як у Chrome DevTools (вкладка Network) можна копіювати запит як cURL. Це дає змогу побачити точні заголовки, які вирушають на сервер. Ми відразу помітили, що частина заголовків на вебсокет не передавалася.
2. cURL — магія в консолі. Ми вставили команду в термінал, і зрозуміли, що треба перейти на HTTPS. Далі з’явилися 504 Gateway Timeout, які вказували, що щось не так із конфігурацією чи портами.
3. Відкриття потрібних портів. Тут уже почали згадувати, якщо порт 8001 не відкритий, то ніякі вебсокети не заведуться. Андрій перевірив і з’ясував, чого саме не вистачає за допомогою також curl!
4. SSL-сертифікати. Якщо фронт працює на HTTPS, а наш вебсокет чомусь без сертифіката, це приречено на помилку. Андрій порадив Certbot, тож ми запустили та вказали домен. І все запрацювало!!!
5. DNS. Насамкінець він звернув увагу, що треба перевірити DNS-записи, особливо якщо декілька піддоменів: якщо не все налаштовано, то вони можуть спричиняти всілякі чудасії.

Чому це нас нарешті врятувало

Ми зрозуміли одну річ: комплексне уявлення про роботу вебу важить набагато більше, ніж 100500 туторіалів «How to make WebSocket chat». Ми, по суті, лізли в нетрі без карти. А він просто показав: ось мапа (HTTP), ось легенда для неї (DevTools, cURL), ось місця, де ви не в ту сторону пішли (Nginx-конфіг, SSL), а ось останні ключові пункти (DNS).

За 20 хвилин розмови ми закрили проблему, над якою самі бились два тижні! І нам стало зрозуміло: не треба соромитися здаватися «недосвідченими» — краще запитати в ментора, який тисячу разів вже налагоджував подібні речі.

Найголовніші уроки

1. Без фундаменту — ніяк. HTTP, HTTPS, базове розуміння заголовків, запитів, відповідей, конфігурацій. Без цього ви ризикуєте тупцювати на місці.
2. DevTools і cURL. Це ваші найкращі друзі в діагностиці, бо показують правду (на відміну від здогадок).
3. Nginx і порти. Часом можна забути про один рядок, і все падає!
4. SSL-сертифікати. Для безпечного з’єднання з вебсокетом потрібно wss. Тож користуйтесь Certbot або інші SSL-рішення.
5. DNS-налаштування та хости. Можна мати одночасно ws (NonProd) та wss (Prod), але тре налаштувати окремо хости.
6. Не соромтеся просити допомогу. Ментора чи колегу, який має «поставлений окомір» і за годину вирішує те, що ви розгрібали тижнями.

Зі свого боку, я зрозуміла, наскільки важливо мати базу HTTP. Тепер ми з командою готові застосовувати ці уроки: якщо «зламається» ще щось, ми вже знаємо базові кроки діагностики. І точно не будемо панікувати, а одразу подивимось — що саме не так!