Создание и запуск проекта Socket.io с помощью ServBay

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

В этом руководстве пошагово показано, как использовать мощную локальную среду ServBay для настройки, запуска и управления проектом на Socket.io. ServBay предоставляет преднастроенную среду Node.js и удобные инструменты для управления сайтами (ранее: хостами), что делает разработку на Socket.io эффективнее и проще.

Что такое Socket.io?

Socket.io — это библиотека, реализующая механизмы двусторонней, асинхронной и событийной коммуникации в реальном времени. Она состоит из двух частей:

1. Серверная библиотека для Node.js.
2. Клиентская JavaScript-библиотека для браузера.

Хотя основная цель Socket.io — использовать WebSocket, она гарантирует совместимость даже со старыми браузерами или ограниченными сетевыми окружениями благодаря автоматическому выбору и откату на другие транспортные технологии (например, Adobe 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.

Предварительные требования

Перед началом убедитесь, что выполнили следующие шаги:

1. Установите ServBay: Скачайте и установите последнюю версию с официального сайта ServBay.
2. Установите пакет Node.js через ServBay: Удостоверьтесь, что Node.js-пакет установлен в вашей ServBay. Для этого воспользуйтесь разделом “Пакеты” (ранее: “Сервисы”) на панели управления ServBay. Подробности смотрите в документации Использование Node.js в ServBay.

Создание примера проекта Socket.io

В качестве примера создадим простое чат-приложение.

1. Инициализация структуры проекта:

   Откройте терминал. Рекомендуется размещать проекты сайтов в каталоге /Applications/ServBay/www. Перейдите в него, создайте новую папку проекта, и инициализируйте Node.js-проект, установив необходимые зависимости:

   cd /Applications/ServBay/www
   mkdir servbay-socketio-chat
   cd servbay-socketio-chat
   npm init -y
   npm install express socket.io

   Это создаст файл package.json в папке servbay-socketio-chat, а также установит ключевые зависимости: express (для обслуживания статических файлов и обработки HTTP-запросов) и socket.io (библиотека для сервера и клиента).

2. Создание серверного файла (server.js):

   В корне проекта servbay-socketio-chat создайте файл server.js и вставьте следующий код. Этот файл отвечает за запуск HTTP-сервера, интеграцию Socket.io и обработку подключений и сообщений клиентов.

   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', ...) — обработка новых подключений клиентов по WebSocket.
   • socket.on('disconnect', ...) — отслеживание отключения клиента.
   • socket.on('chat message', ...) — получение событий 'chat message' и данных сообщений с клиента.
   • io.emit('chat message', msg) — рассылка всех принятых сообщений всем текущим клиентам.

3. Создание клиентского файла (index.html):

   В корне проекта servbay-socketio-chat создайте файл index.html и вставьте следующий код. Здесь реализована клиентская разметка, стили, а также JS-код для взаимодействия с Socket.io: подключение к серверу, отправка сообщений, отображение сообщений других пользователей.

   <!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-разметка, CSS (в том числе фирменный баннер ServBay), список для сообщений (ul#messages) и форма отправки (form#form).
   • <script src="/socket.io/socket.io.js"></script> — клиентская библиотека Socket.io. Не создаётся вручную, отдается сервером по маршруту /socket.io/socket.io.js.
   • io() инициализирует клиент Socket.io и устанавливает соединение.
   • Обработчик отправки формы предотвращает стандартное действие и отправляет сообщение на сервер через socket.emit('chat message', ...).
   • Клиент слушает события 'chat message' от сервера и выводит их в список сообщений.

На этом этапе базовая реализация чата через Socket.io завершена. Далее рассмотрим запуск проекта через ServBay.

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

В процессе разработки обычно сервер Node.js запускается вручную, а ServBay используется для обратного проксирования на локальный домен.

1. Запуск серверного приложения Node.js:

   Откройте терминал, перейдите в каталог /Applications/ServBay/www/servbay-socketio-chat и стартуйте сервер. В примере указан порт 8585, его можно изменить по желанию.

   cd /Applications/ServBay/www/servbay-socketio-chat
   PORT=8585 node server.js

   В консоли появится что-то вроде Server running on port 8585. Сервер слушает порт 8585 на локальной машине.

2. Настройка сайта (обратного прокси) в ServBay:

   Для использования удобного локального домена и поддержки HTTPS создайте обратный прокси в ServBay:

   • Откройте панель управления ServBay.
   • Перейдите в раздел “Сайты” (ранее: “Хосты”).
   • Нажмите кнопку для добавления нового сайта.
   • Укажите настройки:
     • Имя: ServBay Socket.io Dev (или другое удобное название)
     • Домены: servbay-socketio-dev.servbay.demo (или другой домен .servbay.demo)
     • Тип сайта: выберите Обратный прокси (Reverse Proxy)
     • Адрес назначения: http://127.0.0.1:8585 (указанный ранее порт вашего Node.js-сервера)
   • Сохраните настройки. ServBay автоматически применит изменения и перезапустит связанный веб-сервер (Caddy/Nginx, в зависимости от конфигурации ServBay).

   Примечание: Для Socket.io критична поддержка обратного проксирования, способного обрабатывать апгрейд WebSocket-протокола. Встроенные конфиги Caddy или Nginx в ServBay уже оснащены поддержкой WebSocket по умолчанию.

   Подробную инструкцию смотрите в Добавление сайта Node.js для разработки. Для включения HTTPS для локального домена используйте SSL/TLS для защиты сайта. Можете применить ServBay User CA или ServBay Public CA для генерации и установки локальных SSL-сертификатов.

3. Доступ к сайту в режиме разработки:

   В браузере перейдите по адресу вашего локального домена: https://servbay-socketio-dev.servbay.demo. Откроется страничка чата, вы сможете проверить обмен сообщениями в нескольких вкладках или на разных устройствах.

Развёртывание проекта в ServBay (боевой режим)

В продакшн-режиме Node.js-приложения обычно запускаются через менеджеры процессов (PM2, forever и др.) и интегрируются с ServBay аналогично. Здесь рассматривается только настройка обратного проксирования в ServBay; предполагается, что сервер приложения уже стабильно работает на выбранном порту.

1. Старт Node.js-приложения в боевом режиме:

   Для стабильности и автоматического рестарта сервер обычно запускается через менеджер процессов, например, через PM2:

   # Если 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

   Сервер стартует на порту 8586 с переменной окружения NODE_ENV=production, а процессом управляет PM2.

2. Настройка продакшн-сайта (обратный прокси) в ServBay:

   Процесс аналогичен режиму разработки. Добавьте новый сайт — обратный прокси — на порт вашего production-сервера.

   • Откройте ServBay.
   • Перейдите в раздел “Сайты”.
   • Нажмите добавить новый сайт.
   • Укажите:
     • Имя: ServBay Socket.io Prod (или другое имя)
     • Домены: servbay-socketio-prod.servbay.demo (или другой локальный домен)
     • Тип сайта: Обратный прокси (Reverse Proxy)
     • Адрес назначения: http://127.0.0.1:8586
   • Сохраните настройки.

3. Доступ к продакшн-сайту:

   Откройте в браузере ваш боевой домен: https://servbay-socketio-prod.servbay.demo.

С помощью обратного прокси ServBay вы можете легко управлять несколькими Node.js-приложениями (и в разработке, и в продакшне), настраивать уникальные домены и SSL-сертификаты для каждого, без ручного редактирования hosts-файлов или работы со сложными конфигами веб-серверов.

Подключение к базам данных, предоставляемым ServBay

ServBay поддерживает различные пакеты баз данных: MySQL, MariaDB, PostgreSQL, MongoDB и Redis. Приложения на Socket.io часто нуждаются в хранении пользовательских данных, истории сообщений и др. Ниже — примеры подключения к этим БД в Node.js.

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

1. Подключение к MongoDB:

   Установите ODM-библиотеку Mongoose (или официальный драйвер mongodb):

   npm install mongoose

   Пример в вашем Node.js-коде (например, в server.js или отдельном модуле):

   const mongoose = require('mongoose');
   
   // Подключение к локальному MongoDB-инстансу (порт 27017 по умолчанию)
   // Пример имени базы: servbay_socketio_app
   mongoose.connect('mongodb://localhost:27017/servbay_socketio_app', {
     useNewUrlParser: true,
     useUnifiedTopology: true,
     // Другие опции, если нужна аутентификация
     // user: 'your_mongo_user',
     // pass: 'your_mongo_password'
   })
   .then(() => console.log('MongoDB connected successfully via Mongoose'))
   .catch(err => console.error('MongoDB connection error:', err));
   
   // Теперь можно определять Schema и Model через mongoose.model()
   // ...

2. Подключение к Redis:

   Установите клиентское ПО redis:

   npm install redis

   Пример подключения:

   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 connection error:', err);
   });
   
   client.on('connect', () => {
     console.log('Redis client connected successfully');
   });
   
   // Подключаемся к серверу Redis
   client.connect(); // Для версии v4+ необходимо явно вызывать connect()
   
   // Теперь можно выполнять команды Redis через client
   // Например: await client.set('mykey', 'myvalue');
   // ...

3. Подключение к MariaDB / MySQL:

   ServBay поддерживает оба решения, клиент mariadb также совместим с MySQL.

   Установите пакет:

   npm install mariadb

   Пример использования:

   const mariadb = require('mariadb');
   
   // Создаём пул подключений
   const pool = mariadb.createPool({
     host: 'localhost',
     port: 3306, // Стандартный порт MariaDB/MySQL
     user: 'root', // Стандартный пользователь — root
     password: 'password', // Ваш пароль к root в ServBay
     database: 'servbay_socketio_app', // Имя базы примерное
     connectionLimit: 5 // Размер пула подключений
   });
   
   // Пробуем подключиться
   pool.getConnection()
     .then(conn => {
       console.log("Connected to MariaDB/MySQL successfully");
       conn.release(); // Освобождаем соединение обратно в пул
       // Теперь можно выполнять запросы через pool
       // Например: await pool.query("SELECT 1");
       // ...
     })
     .catch(err => {
       console.error("MariaDB/MySQL connection error:", err);
     });

   Примечание: Замените password на ваш актуальный пароль пользователя root в ServBay. Рекомендуется для приложений создавать отдельные БД-пользователи взамен root.

4. Подключение к PostgreSQL:

   Устройство клиента:

   npm install pg

   Возьмём пример:

   const { Pool } = require('pg');
   
   // Создаём пул подключений
   const pool = new Pool({
     user: 'user', // Пользователь в PostgreSQL
     host: 'localhost',
     database: 'servbay_socketio_app', // Имя БД для примера
     password: 'password', // Пароль пользователя, заданный в ServBay
     port: 5432, // Стандартный порт PostgreSQL
   });
   
   // Получаем соединение для теста
   pool.connect((err, client, done) => {
     if (err) {
       console.error('PostgreSQL connection error:', err);
       return;
     }
     console.log('Connected to PostgreSQL successfully');
     client.release(); // Освобождаем соединение
     // Теперь через pool доступны SQL-запросы
     // Например: pool.query('SELECT NOW()', (err, res) => { ... });
     // ...
   });

   Примечание: Поменяйте user и password на ваши актуальные значения из ServBay.

Интеграция этих БД позволяет приложениям на Socket.io хранить данные, строить сложные сервисы и реализовывать обмен данными в реальном времени. ServBay делает развёртывание локальной инфраструктуры на основе Node.js и разных БД простым и быстрым.

Важные замечания

• Конфликты портов: Убедитесь, что порт, выбранный для приложения Node.js (например, 8585 или 8586), не занят другими программами. При необходимости измените значение переменной окружения PORT.
• Настройка сайта ServBay: После добавления обратного прокси проверьте, что внутренний веб-сервер ServBay (Caddy или Nginx) успешно перезапущен и применил новые настройки.
• Проксирование WebSocket: Обратный прокси ServBay поддерживает автоматическую обработку WebSocket-протоколов. Если возникли проблемы с WebSocket-подключением, посмотрите логи или настройки веб-сервера и уточните, что проксирование WebSocket включено.
• Брандмауэр: Проверьте, чтобы порты (80, 443, а также порты вашего Node.js-приложения) не были заблокированы фаерволом операционной системы.

Часто задаваемые вопросы