Tworzenie i uruchamianie projektów Socket.io z ServBay

Socket.io to popularna biblioteka JavaScript zaprojektowana do budowania webowych aplikacji czasu rzeczywistego, opartych o dwukierunkową, zdarzeniową komunikację. Wykorzystuje protokół WebSocket, a w razie potrzeby automatycznie stosuje mechanizmy zastępcze (takie jak długie odpytywanie), zapewniając stabilne i bezawaryjne połączenie nawet w starszych przeglądarkach i w trudniejszych warunkach sieciowych.

W tym przewodniku szczegółowo pokażemy, jak wykorzystać możliwości ServBay do lokalnego przygotowania, uruchomienia i zarządzania projektem Socket.io. ServBay zapewnia gotowe środowisko Node.js oraz wygodne narzędzia do zarządzania stronami (wcześniej nazywanymi "hostami"), co znacząco usprawnia cały proces deweloperski.

Czym jest Socket.io?

Socket.io to biblioteka umożliwiająca wdrożenie komunikacji czasu rzeczywistego, dwukierunkowej i opartej na zdarzeniach. Składa się z dwóch głównych części:

1. Biblioteki działającej po stronie serwera na Node.js.
2. Biblioteki klienckiej JavaScript zintegrowanej w przeglądarce.

Mimo że głównym celem Socket.io jest wykorzystanie WebSocketów, to automatycznie rozpoznaje i przełącza się na inne protokoły transportowe (takie jak Adobe Flash Socket, Ajax Long Polling, Ajax Multipart Streaming, Forever IFrame, JSONP Polling itp.), aby zapewnić kompatybilność ze starszymi przeglądarkami lub w warunkach restrykcyjnych sieci.

Kluczowe cechy i zalety Socket.io

• Komunikacja w czasie rzeczywistym: Umożliwia natychmiastową wymianę danych pomiędzy serwerem a klientem – idealny wybór dla czatów, narzędzi kolaboracyjnych, dashboardów czy gier online.
• Wieloplatformowość: Używany zarówno w przeglądarkach, aplikacjach mobilnych, jak i po stronie serwera Node.js.
• Automatyczna rekonnekcja: Klient próbuje samodzielnie odnowić połączenie po jego zerwaniu, dzięki czemu aplikacja jest bardziej odporna na błędy.
• Model zdarzeniowy: Programowanie oparte na eventach upraszcza zarządzanie asynchroniczną komunikacją.
• Pokoje i przestrzenie nazw: Możliwość grupowania klientów w „pokoje” (broadcast tylko do wybranych grup) oraz używanie przestrzeni nazw do wielokrotnego wykorzystania połączeń i rozdzielenia ruchu.
• Obsługa danych binarnych: Łatwa wysyłka i odbiór danych binarnych.
• Wysoka kompatybilność: Dzięki wielu obsługiwanym metodom transportu zapewnia pewną komunikację w każdych warunkach.

Socket.io pozwala programiście skupić się na logice aplikacji, eliminując konieczność wdrażania skomplikowanej infrastruktury komunikacji czasu rzeczywistego.

Tworzenie i uruchamianie projektu Socket.io w ServBay

ServBay udostępnia deweloperom Node.js kompleksowe, "od ręki" środowisko lokalne – z preinstalowanym Node.js, narzędziem npm oraz wygodnym kreatorem stron WWW. Wykorzystamy te funkcje do zbudowania i uruchomienia przykładowej aplikacji z Socket.io.

Wymagania wstępne

Przed rozpoczęciem upewnij się, że:

1. Zainstalowałeś ServBay: Pobierz najnowszą wersję ze strony ServBay.
2. Zainstalowałeś paczkę Node.js w ServBay: Upewnij się, że Node.js jest dostępny w sekcji "Paczki" (dawniej: "Usługi") w panelu ServBay. Szczegółową instrukcję znajdziesz w Korzystanie z Node.js w ServBay.

Tworzenie przykładowego projektu Socket.io

Stworzymy prostą aplikację czatu.

1. Inicjalizacja katalogu projektu:

   Otwórz terminal. ServBay zaleca przechowywanie projektów w /Applications/ServBay/www. Przejdź do tego katalogu, utwórz folder projektu, zainicjuj projekt Node.js i zainstaluj wymagane zależności:

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

   To polecenie utworzy plik package.json w katalogu servbay-socketio-chat i zainstaluje kluczowe zależności: express (do serwowania plików statycznych i żądań HTTP) oraz socket.io (część serwerowa i klient).

2. Tworzenie pliku serwera (server.js):

   W katalogu projektu (servbay-socketio-chat) utwórz plik server.js. Skopiuj do niego poniższy kod – pozwoli on uruchomić serwer HTTP, zintegrować Socket.io i obsługiwać łączenie się klientów oraz rozsyłanie wiadomości.

   const express = require('express');
   const http = require('http');
   const socketIo = require('socket.io');
   const path = require('path'); // Załaduj moduł path
   
   const app = express();
   // Utwórz serwer HTTP oparty o aplikację express
   const server = http.createServer(app);
   // Dołącz Socket.io do serwera HTTP
   const io = socketIo(server);
   
   // Ustaw katalog z plikami statycznymi na bieżący
   app.use(express.static(__dirname));
   
   // Obsługa żądań GET na ścieżce root – wysłanie pliku index.html
   app.get('/', (req, res) => {
     // Użycie path.join dla poprawności ścieżek pod różnymi systemami operacyjnymi
     res.sendFile(path.join(__dirname, 'index.html'));
   });
   
   // Nasłuchuj połączeń Socket.io
   io.on('connection', (socket) => {
     console.log('a user connected'); // Loguj połączenie nowego użytkownika
   
     // Nasłuchuj rozłączenia klienta
     socket.on('disconnect', () => {
       console.log('user disconnected'); // Loguj odłączenie użytkownika
     });
   
     // Nasłuchuj zdarzenia 'chat message'
     socket.on('chat message', (msg) => {
       console.log('message: ' + msg); // Loguj odebraną wiadomość
       // Rozsyłaj otrzymaną wiadomość do wszystkich klientów
       io.emit('chat message', msg);
     });
   });
   
   // Pobierz port z ENV lub użyj domyślnego
   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`);
   });

   Opis kodu:

   • Użytą bibliotekę express do utworzenia prostego serwera WWW udostępniającego index.html.
   • http.createServer(app) tworzy standardowy serwer HTTP niezbędny dla działania Socket.io.
   • socketIo(server) inicjalizuje Socket.io i podłącza go do utworzonego serwera.
   • io.on('connection', ...) nasłuchuje nowych połączeń od klientów.
   • socket.on('disconnect', ...) nasłuchuje rozłączania klienta.
   • socket.on('chat message', ...) nasłuchuje przesyłania wiadomości na zdarzeniu chat message.
   • io.emit('chat message', msg) rozsyła otrzymaną wiadomość do wszystkich połączonych klientów.

3. Tworzenie pliku klienta (index.html):

   W katalogu głównym projektu utwórz plik index.html i skopiuj poniższy kod. Zawiera on szkielet HTML, style oraz kod JavaScript klienta – odpowiadający m.in. za połączenie z serwerem, obsługę przesyłania i wyświetlania wiadomości.

   <!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; /* Niebieski 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">Witamy w demonstracji czatu ServBay Socket.io!</div>
     <ul id="messages"></ul>
     <form id="form" action="">
       <input id="input" autocomplete="off" /><button type="submit">Wyślij</button>
     </form>
   
     <!-- Dołącz bibliotekę klienta Socket.io -->
     <!-- Ten plik jest generowany dynamicznie po stronie serwera Socket.io -->
     <script src="/socket.io/socket.io.js"></script>
     <script>
       // Połącz z serwerem Socket.io
       // Jeśli klient i serwer są na tym samym host/porcie, io() połączy się automatycznie
       var socket = io();
   
       var form = document.getElementById('form');
       var input = document.getElementById('input');
       var messages = document.getElementById('messages'); // Pobierz element messages
   
       form.addEventListener('submit', function(e) {
         e.preventDefault(); // Zatrzymaj domyślne przesyłanie formularza
         if (input.value) {
           // Wyślij zdarzenie 'chat message' wraz z wiadomością na serwer
           socket.emit('chat message', input.value);
           input.value = ''; // Wyczyść pole input
         }
       });
   
       // Nasłuchuj zdarzenia 'chat message' wysyłanego przez serwer
       socket.on('chat message', function(msg) {
         // Stwórz nowy element listy do wyświetlenia wiadomości
         var item = document.createElement('li');
         item.textContent = msg; // Użycie textContent zapobiega XSS
         messages.appendChild(item); // Dodaj wiadomość do listy
         // Przewiń do najnowszej wiadomości
         window.scrollTo(0, document.body.scrollHeight);
       });
     </script>
   </body>
   </html>

   Opis kodu:

   • Strona zawiera prostą strukturę HTML, CSS oraz baner w kolorze firmowym ServBay, listę (ul#messages) i formularz nadawania wiadomości (form#form).
   • <script src="/socket.io/socket.io.js"></script> ładuje klienta Socket.io. Plik pod tą ścieżką jest automatycznie serwowany przez serwer Socket.io.
   • io() inicjalizuje i nawiązuje połączenie z Socket.io.
   • Klient nasłuchuje wysyłki formularza, zatrzymuje domyślną akcję, po czym przez socket.emit('chat message', input.value) przekazuje wiadomość na serwer.
   • Klient nasłuchuje eventu 'chat message' z serwera i dodaje go do listy wiadomości na stronie.

Na tym etapie kod projektu demonstracyjnego jest gotowy. W kolejnych krokach uruchomisz go i udostępnisz przez ServBay.

Uruchamianie projektu przez ServBay (tryb deweloperski)

W fazie deweloperskiej zwykle uruchamia się serwer Node.js bezpośrednio, a konfigurację reverse proxy w ServBay wykorzystuje do łatwego mapowania na lokalne domeny.

1. Uruchamianie serwera Node.js w trybie deweloperskim:

   Przejdź do katalogu projektu /Applications/ServBay/www/servbay-socketio-chat i uruchom serwer na porcie 8585 (możesz zmienić ten numer):

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

   Po uruchomieniu serwera zobaczysz w terminalu komunikat np. Server running on port 8585. Teraz serwer nasłuchuje lokalnie na tym porcie.

2. Konfiguracja strony w ServBay (reverse proxy):

   Aby wygodnie korzystać z lokalnej domeny i funkcji HTTPS/SSL ServBay, dodaj nową stronę reverse proxy:

   • Otwórz panel ServBay.
   • Przejdź do sekcji „Strony” (dawniej: „Hosty”).
   • Kliknij przycisk dodania nowej strony.
   • Wprowadź poniższe ustawienia:
     • Nazwa: ServBay Socket.io Dev (lub dowolna rozpoznawalna nazwa)
     • Domena: servbay-socketio-dev.servbay.demo (lub inna domena .servbay.demo)
     • Typ strony: wybierz Reverse Proxy
     • Cel proxy: http://127.0.0.1:8585 (adres i port serwera Node.js)
   • Zapisz ustawienia. ServBay zastosuje zmiany i może automatycznie przeładować serwer WWW (Caddy albo Nginx, w zależności od ustawień).

   Uwaga: Reverse proxy jest niezbędny dla Socket.io, ponieważ obsługuje zarówno standardowe żądania HTTP, jak i upgrade protokołu WebSocket. ServBay domyślnie ma poprawną konfigurację proxy dla WebSocket (w Caddy lub Nginx).

   Szczegółowy przewodnik przy dodawaniu stron znajdziesz w Dodawanie strony deweloperskiej Node.js. Instrukcję aktywowania HTTPS dla tej domeny znajdziesz w Zabezpieczanie strony SSL/TLS – ServBay User CA oraz ServBay Public CA pozwalają na generowanie i zaufanie certyfikatom lokalnym.

3. Otwieranie strony deweloperskiej:

   Otwórz w przeglądarce swoją lokalną domenę, np. https://servbay-socketio-dev.servbay.demo. Powinieneś zobaczyć interfejs czatu i, otwierając adres na różnych kartach lub urządzeniach, testować komunikację w czasie rzeczywistym.

Wdrażanie projektu przez ServBay (tryb produkcyjny)

W środowisku produkcyjnym aplikację Node.js warto uruchomić stabilniej (np. za pomocą menedżerów procesów: PM2, forever), a reverse proxy ServBay przełączyć na port z działającym stabilnie serwerem.

1. Uruchomienie serwera Node.js produkcyjnie:

   Najczęściej używa się menedżera procesów, który automatycznie restartuje aplikację w razie awarii i działa w tle. Przykład z PM2:

   # Jeśli nie masz 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

   Teraz serwer jest uruchamiany przez PM2 na porcie 8586 oraz z NODE_ENV=production. Menedżer dba o jego niezawodność.

2. Konfiguracja strony produkcyjnej w ServBay (reverse proxy):

   Tak samo jak wyżej, skonfiguruj nową stronę reverse proxy przekierowującą na port produkcyjnego procesu Node.js.

   • Otwórz panel ServBay.
   • Przejdź do sekcji „Strony”.
   • Kliknij dodaj nową stronę.
   • Wprowadź:
     • Nazwa: ServBay Socket.io Prod (lub inna rozpoznawalna nazwa)
     • Domena: servbay-socketio-prod.servbay.demo (lub inna domena .servbay.demo)
     • Typ: Reverse Proxy
     • Cel proxy: http://127.0.0.1:8586 (port Twojego serwera Node.js na produkcji)
   • Zapisz konfigurację.

3. Otwieranie produkcyjnej strony:

   W przeglądarce wpisz swoją domenę produkcyjną, np. https://servbay-socketio-prod.servbay.demo.

Dzięki ServBay i jego mechanizmowi reverse proxy możesz wygodnie zarządzać wieloma aplikacjami Node.js (zarówno w trybie deweloperskim, jak i produkcyjnie), przypisywać lokalne domeny i SSL bez ręcznej edycji pliku hosts czy skomplikowanych zmian w konfiguracji serwera WWW.

Łączenie z bazami danych ServBay

ServBay obsługuje popularne bazy danych, m.in. MySQL, MariaDB, PostgreSQL, MongoDB i Redis. Twoja aplikacja Socket.io może z nich korzystać do przechowywania użytkowników, historii wiadomości itp. Poniżej znajdziesz wzory kodu Node.js do łączenia się z każdym z nich.

Ważne: Przed uruchomieniem tych fragmentów upewnij się, że odpowiednia baza jest aktywna w ServBay. Szczegóły (port, login, hasło) znajdziesz w panelu zarządzania bazą lub dokumentacji. Domyślne hasło do użytkownika root dla MySQL/MariaDB ustalasz podczas instalacji. W razie potrzeby możesz je zresetować przez panel ServBay.

1. Łączenie z MongoDB:

   Instalacja Mongoose (lub oficjalnego mongodb):

   npm install mongoose

   Dodaj w swoim kodzie (np. server.js):

   const mongoose = require('mongoose');
   
   // Domyślne połączenie do lokalnego MongoDB (domyślny port 27017)
   // Nazwa bazy: servbay_socketio_app (przykład)
   mongoose.connect('mongodb://localhost:27017/servbay_socketio_app', {
     useNewUrlParser: true,
     useUnifiedTopology: true,
     // Dodatkowe opcje, gdy wymagana autoryzacja
     // user: 'your_mongo_user',
     // pass: 'your_mongo_password'
   })
   .then(() => console.log('MongoDB connected successfully via Mongoose'))
   .catch(err => console.error('MongoDB connection error:', err));
   
   // Możesz definiować modele przez mongoose.model()
   // ...

2. Łączenie z Redis:

   Instalacja klienta Redis:

   npm install redis

   W kodzie Node.js:

   const redis = require('redis');
   
   // Tworzenie klienta Redis (domyślnie localhost:6379)
   const client = redis.createClient({
     // Jeśli wymagana autoryzacja do Redis
     // password: 'your_redis_password',
     // url: 'redis://localhost:6379' // również możliwy ten format
   });
   
   client.on('error', (err) => {
     console.error('Redis connection error:', err);
   });
   
   client.on('connect', () => {
     console.log('Redis client connected successfully');
   });
   
   // Połączenie z serwerem Redis
   client.connect(); // od wersji v4+ wymagane jawne connect()
   
   // Teraz możesz używać klienta do komend Redis
   // Np. await client.set('mykey', 'myvalue');
   // ...

3. Łączenie z MariaDB / MySQL:

   ServBay obsługuje MariaDB oraz MySQL. Łączenie przebiega identycznie (przykład z biblioteką mariadb, kompatybilną także z MySQL).

   Instalacja klienta:

   npm install mariadb

   Kod Node.js:

   const mariadb = require('mariadb');
   
   // Utworzenie puli połączeń
   const pool = mariadb.createPool({
     host: 'localhost',
     port: 3306, // Domyślny port MariaDB/MySQL
     user: 'root', // Domyślnie root w ServBay
     password: 'password', // Użyj swojego hasła root z ServBay
     database: 'servbay_socketio_app', // przykładowa nazwa bazy
     connectionLimit: 5 // wielkość puli
   });
   
   // Testowe pobranie połączenia
   pool.getConnection()
     .then(conn => {
       console.log("Connected to MariaDB/MySQL successfully");
       conn.release(); // Zwolnij połączenie do puli
       // Możesz korzystać z 'pool' do zapytań
       // np. await pool.query("SELECT 1");
       // ...
     })
     .catch(err => {
       console.error("MariaDB/MySQL connection error:", err);
     });

   Uwaga: Zamień password na swoje prawdziwe hasło root z ServBay. Zaleca się tworzenie osobnego użytkownika bazy dla aplikacji, nie korzystanie z root.

4. Łączenie z PostgreSQL:

   Instalacja klienta:

   npm install pg

   Kod Node.js:

   const { Pool } = require('pg');
   
   // Tworzenie puli połączeń
   const pool = new Pool({
     user: 'user', // Domyślnie 'user' w PostgreSQL
     host: 'localhost',
     database: 'servbay_socketio_app', // przykładowa nazwa bazy
     password: 'password', // Twoje hasło z ServBay
     port: 5432, // domyślny port PostgreSQL
   });
   
   // Testowe połączenie
   pool.connect((err, client, done) => {
     if (err) {
       console.error('PostgreSQL connection error:', err);
       return;
     }
     console.log('Connected to PostgreSQL successfully');
     client.release();
     // Można wykonywać zapytania, np.
     // pool.query('SELECT NOW()', (err, res) => { ... });
     // ...
   });

   Uwaga: Zamień user i password na właściwe dane dostępu z ServBay.

Integrując te bazy, zyskujesz możliwość trwałego przechowywania danych w aplikacjach Socket.io. ServBay pozwala błyskawicznie skonfigurować lokalne środowisko programistyczne z Node.js i bazą danych.

Wskazówki i uwagi

• Konflikt portów: Upewnij się, że wybrany port (w przykładzie 8585 lub 8586) nie jest zajęty przez inną aplikację. W razie konfliktów, zmień zmienną PORT.
• Konfiguracja stron w ServBay: Po ustawieniu strony reverse proxy upewnij się, że serwer WWW ServBay (Caddy lub Nginx) został przeładowany i obsługuje nowe ustawienie.
• Proxy WebSocket: Domyślna konfiguracja reverse proxy w ServBay obsługuje WebSocket. Przy problemach ze stabilnością sprawdź logi serwera WWW i potwierdź poprawność ustawień proxy dla WebSocket.
• Firewall: Systemowy firewall nie może blokować portów używanych przez ServBay (np. 80, 443) ani portów wybranych dla Node.js.

Najczęściej zadawane pytania