Створення та запуск проєкту Socket.io з ServBay

Socket.io — це популярна JavaScript-бібліотека, розроблена для створення вебдодатків з реальним часом, двосторонньою взаємодією й подієво-орієнтованою архітектурою. Вона побудована на протоколі WebSocket і забезпечує механізми резервування (наприклад, довге опитування) для надійного зв’язку у всіх мережах та на різних клієнтах.

У цій інструкції буде докладно розглянуто, як скористатися потужним локальним середовищем розробки ServBay для налаштування, запуску й ефективного менеджменту Socket.io-проєкту. ServBay надає попередньо налаштоване середовище Node.js і зручні інструменти для управління сайтами (раніше: хости), тим самим роблячи розробку під Socket.io значно швидшою та зручнішою.

Що таке Socket.io?

Socket.io — бібліотека для реалізації реального часу, двонаправленого обміну даними на основі подій. Вона складається з двох основних частин:

Бібліотека для серверної частини (запускається у Node.js).
JavaScript-бібліотека для клієнта, що працює у браузері.

Основна мета Socket.io — використовувати WebSocket, але, для підтримки роботи в старих браузерах або у складних мережах, вона автоматично перемикається на альтернативні транспорти (Flash Socket, Ajax Long Polling, Ajax Multipart Streaming, Forever IFrame, JSONP Polling тощо).

Ключові особливості та переваги Socket.io

Зв’язок у реальному часі: Миттєвий обмін даними між сервером та клієнтом — ідеально для чатів, колаборативних інструментів, панелей моніторингу чи онлайн-ігор.
Крос-платформеність: Працює в браузерах, мобільних застосунках та серверному Node.js-середовищі.
Автоматичне перепідключення: Клієнт намагатиметься перепідключитися до сервера після розриву з’єднання, посилюючи надійність застосунку.
Подієва модель: Програмування на основі подій робить асинхронну роботу інтуїтивною й зручною для розробника.
Кімнати та простори імен: Групуйте клієнтів у «кімнати» для цільової розсилки або застосовуйте простори імен для розділення ресурсів на одному з’єднанні.
Підтримка бінарних даних: Легкий обмін та отримання бінарних файлів.
Висока сумісність: Гарантія роботи в різних мережах завдяки кільком транспортам.

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

Створення та запуск Socket.io-проєкту з ServBay

ServBay пропонує Node.js-розробникам миттєве готове середовище: налаштований Node.js-рантайм, менеджер npm та простий менеджмент сайтів. Скористаємося цими інструментами для демонстраційного проєкту з Socket.io.

Необхідні умови

Перш ніж почати, переконайтеся, що виконані такі підготовчі кроки:

Встановлений ServBay: Завантажте останню версію з офіційного сайту ServBay.
Встановлений пакет Node.js у ServBay: Переконайтеся, що пакет Node.js інсталюваний у середовищі ServBay. Зробити це можна через розділ «Пакети» (раніше: сервіси) у панелі керування ServBay. За деталями див. Використання Node.js у ServBay.

Створення демо-проєкту Socket.io

Створимо простий чат-додаток.

Ініціалізація каталогу проєкту:
Відкрийте термінал. За рекомендацією ServBay, сайти бажано розміщувати у /Applications/ServBay/www. Перейдіть у цю теку, створіть папку проєкту, ініціалізуйте Node.js-проєкт та встановіть необхідні залежності:
bash
```
cd /Applications/ServBay/www
mkdir servbay-socketio-chat
cd servbay-socketio-chat
npm init -y
npm install express socket.io
```
1
2
3
4
5
Ці команди створять файл package.json та встановлять основні залежності: express (для подачі статичних файлів та обробки HTTP-запитів) і socket.io (сервер-клієнт бібліотека).

Створення серверного файлу (server.js):

Створіть у корені проєкту servbay-socketio-chat файл server.js і скопіюйте вміст нижче. Файл відповідає за запуск HTTP-сервера, інтеграцію Socket.io та обробку підключень/трансляцію повідомлень.

javascript

const express = require('express');
const http = require('http');
const socketIo = require('socket.io');
const path = require('path'); // Імпортуємо модуль path

const app = express();
// Створюємо HTTP-сервер на базі express
const server = http.createServer(app);
// Прикріплюємо Socket.io до HTTP-сервера
const io = socketIo(server);

// Вказуємо каталог для статичних файлів, поточна тека
app.use(express.static(__dirname));

// Обробка GET-запиту на /, повертається index.html
app.get('/', (req, res) => {
  // Використання path.join гарантує кросплатформні шляхи
  res.sendFile(path.join(__dirname, 'index.html'));
});

// Відслідковуємо підключення Socket.io
io.on('connection', (socket) => {
  console.log('a user connected'); // Лог при підключенні користувача

  // Відслідковуємо розірвання з'єднання
  socket.on('disconnect', () => {
    console.log('user disconnected'); // Лог при відключенні користувача
  });

  // Слухаємо подію 'chat message'
  socket.on('chat message', (msg) => {
    console.log('message: ' + msg); // Відображаємо отримане повідомлення
    // Транслюємо повідомлення всім підключеним клієнтам
    io.emit('chat message', msg);
  });
});

// Визначаємо порт із змінної оточення або за замовчуванням
const port = process.env.PORT || 3000;
server.listen(port, () => {
  console.log(`Server running on port ${port}`);
  console.log(`Access it via http://localhost:${port} (direct) or via ServBay reverse proxy`);
});

Пояснення коду:

Застосовується express для створення простого веб-сервера, який доставляє файл index.html.
http.createServer(app) створює стандартний HTTP-сервер для роботи із Socket.io.
socketIo(server) ініціалізує Socket.io й прив’язує його до HTTP-сервера.
io.on('connection', ...) відповідає за нові з'єднання клієнтів.
socket.on('disconnect', ...) — відключення клієнта.
socket.on('chat message', ...) — обробка повідомлень типу 'chat message'.
io.emit('chat message', msg) транслює повідомлення усім підключеним клієнтам.

Створення клієнтського файлу (index.html):

У корені проєкту створіть файл index.html і скопіюйте вміст нижче. Він містить структуру сторінки, стилі та JS для підключення до сервера, відправки й отримання повідомлень.

html

<!DOCTYPE html>
<html>
<head>
  <title>ServBay Socket.io Chat</title>
  <style>
    body { margin: 0; padding-bottom: 3rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
    #form { background: rgba(0, 0, 0, 0.15); padding: 0.25rem; position: fixed; bottom: 0; left: 0; right: 0; display: flex; height: 3rem; box-sizing: border-box; backdrop-filter: blur(10px); }
    #input { border: none; padding: 0 1rem; flex-grow: 1; border-radius: 2rem; margin: 0.25rem; }
    #input:focus { outline: none; }
    #form > button { background: #333; border: none; padding: 0 1rem; margin: 0.25rem; border-radius: 3px; outline: none; color: #fff; }
    #messages { list-style-type: none; margin: 0; padding: 0; }
    #messages > li { padding: 0.5rem 1rem; }
    #messages > li:nth-child(odd) { background: #efefef; }
    .servbay-banner {
      background-color: #007bff; /* ServBay синій */
      color: white;
      text-align: center;
      padding: 15px 0;
      font-size: 22px;
      margin-bottom: 20px;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <div class="servbay-banner">Ласкаво просимо до демо-чату ServBay Socket.io!</div>
  <ul id="messages"></ul>
  <form id="form" action="">
    <input id="input" autocomplete="off" /><button type="submit">Відправити</button>
  </form>

  <!-- Підключення клієнтської бібліотеки Socket.io -->
  <!-- Цей файл генерується сервером Socket.io під час запуску -->
  <script src="/socket.io/socket.io.js"></script>
  <script>
    // Підключення до сервера Socket.io
    // Якщо сервер та клієнт на тому ж домені і порті, io() під'єднується автоматично
    var socket = io();

    var form = document.getElementById('form');
    var input = document.getElementById('input');
    var messages = document.getElementById('messages'); // Отримуємо елемент messages

    form.addEventListener('submit', function(e) {
      e.preventDefault(); // Відміняємо стандартну поведінку форми
      if (input.value) {
        // Відправляємо подію 'chat message' та її вміст на сервер
        socket.emit('chat message', input.value);
        input.value = ''; // Очищаємо поле вводу
      }
    });

    // Слухаємо подію 'chat message', надіслану з сервера
    socket.on('chat message', function(msg) {
      // Створюємо новий запис для повідомлення
      var item = document.createElement('li');
      item.textContent = msg; // Використовуємо textContent для захисту від XSS
      messages.appendChild(item); // Додаємо повідомлення у список
      // Прокручуємо до останнього повідомлення
      window.scrollTo(0, document.body.scrollHeight);
    });
  </script>
</body>
</html>

Пояснення коду:

Сторінка має базову HTML-структуру, стилізований банер для ServBay, список повідомлень (ul#messages) і форму відправки (form#form).
<script src="/socket.io/socket.io.js"></script> додає Socket.io-клієнт. Цей файл автоматично подається сервером Socket.io за відповідним шляхом.
io() підключає вебклієнт до Socket.io-сервера.
Клієнт слухає подію відправки форми, надсилає повідомлення через socket.emit, очищує інпут.
Клієнт також слухає 'chat message' із сервера й додає нове повідомлення до DOM.

На цьому базова кодова частина нашого Socket.io-проєкту завершена. Далі — запуск і доступ через ServBay.

Запуск проєкту через ServBay (режим розробки)

У робочому режимі розробки Node.js-сервер запускається напряму, а ServBay перенаправляє трафік до нього завдяки функції зворотного проксі.

Запускаємо Node.js-сервер у режимі розробки:
Відкрийте термінал, перейдіть до /Applications/ServBay/www/servbay-socketio-chat і запустіть сервер, вказавши порт (наприклад, 8585):
bash
```
cd /Applications/ServBay/www/servbay-socketio-chat
PORT=8585 node server.js
```
1
2
Після старту сервера виведеться повідомлення Server running on port 8585. Тепер сервер слухає порт 8585 локальної машини.
Налаштування сайту ServBay (зворотний проксі):
Щоб мати локальний домен і користуватися HTTPS/SSL від ServBay, створіть новий сайт-зворотний проксі:
- Відкрийте панель керування ServBay.
- Перейдіть до розділу «Сайти» (раніше: хости).
- Натисніть кнопку додати сайт.
- Налаштуйте:
  - Назва (Name): ServBay Socket.io Dev (або як бажаєте)
  - Домен (Domains): servbay-socketio-dev.servbay.demo (або будь-який інший домен в зоні .servbay.demo)
  - Тип сайту (Type): Reverse Proxy (Зворотний проксі)
  - Призначення проксі (Proxy Destination): http://127.0.0.1:8585 (ваш локальний Node.js-сервер)
- Збережіть налаштування — ServBay застосує зміни, можливо, перезапустить вебсервер (Caddy/Nginx згідно з вашою конфігурацією).
Примітка: Зворотний проксі у ServBay підтримує WebSocket (ключово для Socket.io). Стандартна конфігурація Caddy/Nginx у ServBay вже враховує це.
За детальними кроками звертайтеся до Додавання Node.js-сайту для розробки і Використання SSL/TLS для захисту сайту. Сертифікати локальної SSL (ServBay User CA/Public CA) також підтримуються.
Доступ до сайту у режимі розробки:
Відкрийте у браузері ваш локальний домен, наприклад, https://servbay-socketio-dev.servbay.demo. Ви побачите інтерфейс чату й зможете протестувати обмін повідомленнями у різних вкладках або з різних пристроїв.

Розгортання проєкту через ServBay (продакшн)

У продакшн-середовищі рекомендується запускати Node.js-додаток під керуванням процес-менеджера (PM2, forever тощо) і інтегрувати його з ServBay зворотним проксі. Нижче — лише базова схема інтеграції (мається на увазі, сервер уже стабільно працює у фоновому режимі та на певному порту).

Запуск Node.js-сервера у продакшн-режимі:
Використовуйте процес-менеджер (наприклад, PM2) для автозапуску та моніторингу серверу:
bash
```
# Якщо PM2 ще не встановлено
# npm install pm2 -g

cd /Applications/ServBay/www/servbay-socketio-chat
PORT=8586 NODE_ENV=production pm2 start server.js --name servbay-socketio-prod
```
1
2
3
4
5
Ця команда запустить сервер на порту 8586, у режимі production, під іменем servbay-socketio-prod, і буде автоматично слідкувати за його працездатністю.
Конфігурація продакшн-сайту у ServBay (зворотний проксі):
Аналогічно режиму розробки, створіть новий сайт у панелі керування ServBay, який направляє на порт, де працює продакшн-версія Node.js.
- Відкрийте панель ServBay.
- Перейдіть у розділ «Сайти».
- Додайте новий сайт.
- Налаштуйте:
  - Назва (Name): ServBay Socket.io Prod (або своя)
  - Домен (Domains): servbay-socketio-prod.servbay.demo (або відповідний .servbay.demo)
  - Тип (Type): Reverse Proxy (Зворотний проксі)
  - Призначення проксі (Proxy Destination): http://127.0.0.1:8586
- Збережіть зміни.
Доступ до сайту у продакшн-режимі:
Відкрийте у браузері https://servbay-socketio-prod.servbay.demo.

Використовуючи зворотний проксі, ServBay дозволяє керувати кількома Node.js-додатками (у розробці або у продакшн), просто призначати їм локальні домени та SSL-сертифікати — без необхідності вручну редагувати hosts чи займатися складними конфігураціями вебсерверів.

Підключення до баз даних ServBay

ServBay підтримує низку популярних СУБД: MySQL, MariaDB, PostgreSQL, MongoDB, Redis. Ваш додаток на Socket.io може взаємодіяти з ними для збереження даних користувача, історії повідомлень тощо. Нижче — приклади підключення до цих СУБД у Node.js.

Важливо: Перед цим переконайтеся, що через ServBay інстальовані/запущені необхідні БД. Всі дефолтні параметри (порт, користувач, пароль) можна переглянути у панелі керування БД у ServBay або відповідній документації. Для MySQL/MariaDB стандартно root-пароль встановлюється під час інсталяції ServBay (його можна змінити).

Підключення до MongoDB:

Встановіть Mongoose ODM (або офіційний драйвер mongodb):

bash

npm install mongoose

Додайте код підключення у свій Node.js-проєкт (наприклад, у server.js чи окремий модуль):

javascript

const mongoose = require('mongoose');

// За замовчуванням підключення до локального MongoDB (порт 27017)
// Назва БД — приклад (servbay_socketio_app)
mongoose.connect('mongodb://localhost:27017/servbay_socketio_app', {
  useNewUrlParser: true,
  useUnifiedTopology: true,
  // Додаткові опції: user, pass — якщо потрібна аутентифікація
  // user: 'your_mongo_user',
  // pass: 'your_mongo_password'
})
.then(() => console.log('MongoDB успішно підключено через Mongoose'))
.catch(err => console.error('Помилка підключення до MongoDB:', err));

// Далі можна використовувати mongoose.model() для визначення схем/моделей
// ...

Підключення до Redis:

Встановіть бібліотеку redis:

bash

npm install redis

Додайте код підключення:

javascript

const redis = require('redis');

// Створення клієнта Redis (за замовчуванням localhost:6379)
const client = redis.createClient({
  // Якщо потрібна аутентифікація:
  // password: 'your_redis_password',
  // url: 'redis://localhost:6379'
});

client.on('error', (err) => {
  console.error('Помилка підключення до Redis:', err);
});

client.on('connect', () => {
  console.log('Клієнт Redis успішно підключено');
});

// Підключення (для версій v4+ потрібно явно викликати connect())
client.connect();

// Далі через client можна виконувати Redis-команди,
//  наприклад: await client.set('mykey', 'myvalue');
// ...

Підключення до MariaDB/MySQL:

ServBay підтримує MariaDB і MySQL. Підключення відбувається ідентично, тут використано бібліотеку mariadb (сумісна з MySQL).

Встановіть пакет:

bash

npm install mariadb

Приклад підключення в Node.js:

javascript

const mariadb = require('mariadb');

// Створення пулу з’єднань
const pool = mariadb.createPool({
  host: 'localhost',
  port: 3306, // Стандартний порт
  user: 'root', // Стандартний користувач (зазвичай root)
  password: 'password', // Задайте ваш реальний пароль для root
  database: 'servbay_socketio_app', // Приклад назви БД
  connectionLimit: 5 // Розмір пулу
});

// Отримуємо з’єднання та тестуємо працездатність
pool.getConnection()
  .then(conn => {
    console.log("Підключення до MariaDB/MySQL виконано успішно");
    conn.release(); // Повертаємо з’єднання у пул
    // Далі через pool можна виконувати запити
    // Наприклад: await pool.query("SELECT 1");
    // ...
  })
  .catch(err => {
    console.error("Помилка підключення до MariaDB/MySQL:", err);
  });

Примітка: Замініть password на реальний пароль root-користувача з налаштувань ServBay. Безпечно працювати лише з власними додатковими користувачами для програми, не використовувати root напряму!

Підключення до PostgreSQL:

Встановіть pg:

bash

npm install pg

Додайте код підключення:

javascript

const { Pool } = require('pg');

// Створення пулу
const pool = new Pool({
  user: 'user', // Стандартний користувач для PostgreSQL
  host: 'localhost',
  database: 'servbay_socketio_app', // Назва БД
  password: 'password', // Вкажіть свій реальний пароль
  port: 5432, // Стандартний порт
});

// Отримання з’єднання і тест
pool.connect((err, client, done) => {
  if (err) {
    console.error('Помилка підключення до PostgreSQL:', err);
    return;
  }
  console.log('Підключення до PostgreSQL виконано успішно');
  client.release(); // Повертаємо з’єднання у пул
  // Далі можна виконувати запити, наприклад:
  // pool.query('SELECT NOW()', (err, res) => { ... });
  // ...
});

Примітка: Обов’язково замініть user та password на власні значення з налаштувань ServBay.

З інтеграцією цих баз даних ваше Socket.io-додаток стане справді функціональним. ServBay значно полегшує локальний запуск серверного КОДу у зв’язці з СУБД.

Важливі зауваження

Конфлікти портів: Упевніться, що порти, які використовує ваш Node.js-додаток (наприклад, 8585/8586), не зайняті іншими процесами. Якщо порт зайнятий — змініть значення PORT.
Конфігурація сайтів ServBay: Після зміни налаштувань сайтів (зворотних проксі) переконайтеся, що вебсервер (Caddy/Nginx) було перезапущено і зміни застосовано.
Проксіування WebSocket: Типова конфігурація проксі у ServBay підтримує протокол WebSocket «з коробки». Проблеми з підключенням WebSocket слід шукати у логах вебсервера та перевірці налаштувань проксі.
Фаєрвол: Переконайтеся, що системний фаєрвол не блокує порти, які використовуються для роботи ServBay (80, 443) чи ваші кастомні порти Node.js-додатка.

Створення та запуск проєкту Socket.io з ServBay ​

Що таке Socket.io? ​

Ключові особливості та переваги Socket.io ​

Створення та запуск Socket.io-проєкту з ServBay ​

Необхідні умови ​

Створення демо-проєкту Socket.io ​

Запуск проєкту через ServBay (режим розробки) ​

Розгортання проєкту через ServBay (продакшн) ​

Підключення до баз даних ServBay ​

Важливі зауваження ​

Поширені питання ​

Створення та запуск проєкту Socket.io з ServBay

Що таке Socket.io?

Ключові особливості та переваги Socket.io

Створення та запуск Socket.io-проєкту з ServBay

Необхідні умови

Створення демо-проєкту Socket.io

Запуск проєкту через ServBay (режим розробки)

Розгортання проєкту через ServBay (продакшн)

Підключення до баз даних ServBay

Важливі зауваження

Поширені питання