Mencipta & Menjalankan Projek Socket.io dengan ServBay

Socket.io ialah perpustakaan JavaScript yang popular, direka khas untuk membina aplikasi web masa nyata, dua hala, dan berasaskan acara. Sokongan utama adalah protokol WebSocket, namun ia juga menawarkan mekanisme fallback seperti long polling untuk memastikan komunikasi kekal stabil di pelbagai pelanggan dan keadaan rangkaian.

Panduan ini menerangkan secara terperinci cara menggunakan persekitaran pembangunan tempatan ServBay untuk membina, menjalankan, dan menguruskan projek Socket.io. ServBay menyediakan persekitaran Node.js yang telah siap dipasang dan kemudahan pengurusan laman (dahulunya dikenali sebagai “host”), menjadikan pembangunan Socket.io lebih cekap dan mudah.

Apa Itu Socket.io?

Socket.io merupakan perpustakaan yang merealisasikan mekanisme komunikasi waktu sebenar, dua hala, dan berasaskan acara. Ia terdiri daripada dua bahagian:

1. Perpustakaan belakang yang berjalan pada pelayan Node.js.
2. Perpustakaan JavaScript klien yang berjalan dalam pelayar.

Walaupun matlamat utama Socket.io adalah menggunakan WebSocket, ia secara automatik mengesan dan fallback ke mod pemindahan lain (seperti Adobe Flash Socket, Ajax Long Polling, Ajax Multipart Streaming, Forever IFrame, JSONP Polling, dan sebagainya) demi memastikan keserasian dalam pelayar lama atau rangkaian yang terhad.

Ciri-Ciri dan Kelebihan Socket.io

• Komunikasi Masa Nyata: Membolehkan pertukaran data segera antara pelayan dan klien, ideal untuk aplikasi chat, alat kerjasama, papan pemuka masa nyata, permainan dalam talian dan banyak lagi.
• Sokongan Pelbagai Platform: Berfungsi pada pelayar web, aplikasi mudah alih, serta pelayan Node.js.
• Auto Reconnect: Klien akan cuba menyambung semula secara automatik jika sambungan rangkaian terputus; ini meningkatkan kebolehpercayaan aplikasi.
• Berasaskan Acara: Model pengaturcaraan berasaskan acara memudahkan pengurusan komunikasi asinkron dengan lebih intuitif.
• Rooms & Namespaces: Menyokong pengelompokan klien dalam “room” (untuk siaran ke kumpulan tertentu) dan “namespace” (untuk multiplexing dalam satu sambungan).
• Sokongan Data Binari: Mudah untuk menghantar dan menerima data binari.
• Keserasian Tinggi: Menjamin kebolehpercayaan melalui pelbagai mekanisme pemindahan di segala keadaan rangkaian.

Dengan bantuan Socket.io, pembangun boleh fokus kepada logik aplikasi tanpa perlu risau tentang selok-belok teknikal komunikasi masa nyata.

Mencipta & Menjalankan Projek Socket.io dengan ServBay

ServBay menyediakan persekitaran tempatan “plug-and-play” untuk pembangunan Node.js, termasuk runtime Node.js, npm, serta alat pengurusan laman yang mudah. Kita akan menggunakan ciri-ciri ini untuk membina dan menjalankan projek contoh Socket.io.

Prasyarat

Sebelum bermula, pastikan anda telah lakukan perkara berikut:

1. Pasang ServBay: Muat turun dan pasang versi terkini dari laman rasmi ServBay.
2. Pasang Pakej Node.js di ServBay: Pastikan Node.js telah dipasang dalam ServBay. Anda boleh memasang dan mengurus melalui bahagian “Pakej” (dahulunya “Servis”) dalam panel kawalan ServBay. Rujuk dokumentasi Menggunakan Node.js dalam ServBay untuk panduan lanjut.

Cipta Projek Contoh Socket.io

Kita akan mencipta aplikasi chat ringkas sebagai contoh.

1. Inisialkan Direktori Projek:

   Pertama, buka aplikasi terminal anda. ServBay mencadangkan supaya projek laman web disimpan dalam direktori /Applications/ServBay/www. Masuk ke direktori tersebut, cipta folder projek baharu, inisialisasi projek Node.js dan pasang kebergantungan yang diperlukan:

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

   Ini akan mewujudkan fail package.json di dalam folder servbay-socketio-chat, serta memasang express (untuk melayan fail statik dan HTTP request) dan socket.io (pustaka server & klien utama).

2. Cipta Fail Server (server.js):

   Dalam direktori utama projek servbay-socketio-chat, cipta fail server.js dan salin kod berikut. Fail ini bertanggungjawab memulakan pelayan HTTP, mengintegrasi Socket.io, serta mengendalikan sambungan & siaran mesej klien.

   const express = require('express');
   const http = require('http');
   const socketIo = require('socket.io');
   const path = require('path'); // Import modul path
   
   const app = express();
   // Membina pelayan HTTP berdasarkan aplikasi express
   const server = http.createServer(app);
   // Lampirkan Socket.io pada pelayan HTTP
   const io = socketIo(server);
   
   // Tetapkan folder statik, arahkan ke direktori semasa
   app.use(express.static(__dirname));
   
   // Kendalikan permintaan GET pada root, hantar fail index.html
   app.get('/', (req, res) => {
     // path.join memastikan path berfungsi merentas sistem operasi
     res.sendFile(path.join(__dirname, 'index.html'));
   });
   
   // Dengari acara sambungan Socket.io
   io.on('connection', (socket) => {
     console.log('a user connected'); // Log bila pengguna baharu menyambung
   
     // Dengari acara putus sambungan
     socket.on('disconnect', () => {
       console.log('user disconnected'); // Log bila pengguna terputus sambungan
     });
   
     // Dengari acara 'chat message'
     socket.on('chat message', (msg) => {
       console.log('message: ' + msg); // Log mesej diterima
       // Siarkan mesej kepada semua klien yang bersambung
       io.emit('chat message', msg);
     });
   });
   
   // Dapatkan nombor port dari pembolehubah persekitaran atau nilai lalai
   const port = process.env.PORT || 3000;
   server.listen(port, () => {
     console.log(`Server running on port ${port}`);
     console.log(`Access it via http://localhost:${port} (secara terus) atau melalui reverse proxy ServBay`);
   });

   Penjelasan kod:

   • Kita menggunakan express untuk bina server web ringkas yang menyajikan index.html.
   • http.createServer(app) mencipta pelayan HTTP – asas untuk Socket.io.
   • socketIo(server) menginisialisasi Socket.io dan lampirkan ke pelayan HTTP.
   • io.on('connection', ...) untuk sambungan klien baharu.
   • socket.on('disconnect', ...) untuk mengesan pemutusan klien.
   • socket.on('chat message', ...) menerima acara 'chat message' beserta data.
   • io.emit('chat message', msg) menyiarkan mesej kepada semua klien yang bersambung.

3. Cipta Fail Klien (index.html):

   Dalam direktori projek, cipta fail index.html dan salin kod berikut. Fail ini mengandungi HTML, CSS, dan kod JavaScript klien Socket.io untuk menyambung ke pelayan, mengirim serta menerima mesej.

   <!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; /* Biru 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">Selamat Datang ke Demo Chat ServBay Socket.io!</div>
     <ul id="messages"></ul>
     <form id="form" action="">
       <input id="input" autocomplete="off" /><button type="submit">Hantar</button>
     </form>
   
     <!-- Import pustaka klien Socket.io -->
     <!-- Fail ini dihasilkan secara dinamik oleh pelayan Socket.io waktu runtime -->
     <script src="/socket.io/socket.io.js"></script>
     <script>
       // Sambung ke pelayan Socket.io
       // Jika klien & server di domain dan port yang sama, io() akan sambung automatik
       var socket = io();
   
       var form = document.getElementById('form');
       var input = document.getElementById('input');
       var messages = document.getElementById('messages'); // Dapatkan elemen messages
   
       form.addEventListener('submit', function(e) {
         e.preventDefault(); // Halang perilaku hantar borang secara default
         if (input.value) {
           // Emelkan acara 'chat message' dan kandungan mesej ke server
           socket.emit('chat message', input.value);
           input.value = ''; // Kosongkan kotak input
         }
       });
   
       // Dengari acara 'chat message' dari pelayan
       socket.on('chat message', function(msg) {
         // Cipta elemen senarai baharu untuk paparan mesej
         var item = document.createElement('li');
         item.textContent = msg; // Guna textContent untuk elak serangan XSS
         messages.appendChild(item); // Tambah mesej ke senarai
         // Skrol ke bawah untuk mesej terkini
         window.scrollTo(0, document.body.scrollHeight);
       });
     </script>
   </body>
   </html>

   Penjelasan kod:

   • Halaman terdiri daripada struktur HTML ringkas, gaya CSS (termasuk banner bertema ServBay), senarai mesej (ul#messages), dan borang hantar mesej (form#form).
   • <script src="/socket.io/socket.io.js"></script> mengimport pustaka klien Socket.io – dihasilkan secara automatik oleh pelayan waktu runtime.
   • io() inisialisasi dan sambung ke pelayan Socket.io.
   • Klien mendengar acara penghantaran borang, menghalang perilaku lalai, dan menghantar mesej ke pelayan dengan socket.emit('chat message', input.value).
   • Klien terima 'chat message' dari pelayan & tambahkannya ke senarai mesej di halaman.

Setakat ini anda telah melengkapkan kod asas projek contoh Socket.io. Seterusnya, kita akan jalankan dan mengaksesnya menggunakan ServBay.

Menjalankan Projek Melalui ServBay (Mod Pembangunan)

Semasa pembangunan, biasanya kita menjalankan pelayan Node.js secara langsung, dan gunakan fungsi reverse proxy ServBay untuk memetakan port ke domain tempatan anda.

1. Jalankan Pelayan Node.js (pembangunan):

   Buka terminal, masuk direktori /Applications/ServBay/www/servbay-socketio-chat, dan jalankan pelayan pada port 8585 (anda boleh ubah port mengikut keperluan):

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

   Selepas server bermula, di terminal anda akan terpampang ayat seperti Server running on port 8585. Kini pelayan mendengar pada port 8585 di localhost.

2. Konfigurasikan Laman di ServBay (Proxy Songsang):

   Untuk akses mudah melalui domain tempatan (dan juga guna ciri HTTPS/SSL ServBay), cipta laman reverse proxy baharu di ServBay:

   • Buka panel kawalan ServBay.
   • Pergi ke bahagian “Laman Web” (dahulunya “host”).
   • Klik butang tambah laman baharu.
   • Konfigurasi seperti berikut:
     • Nama: ServBay Socket.io Dev (atau nama pilihan anda)
     • Domain: servbay-socketio-dev.servbay.demo (atau domain .servbay.demo lain)
     • Jenis: Pilih Proxy Songsang (Reverse Proxy)
     • Destinasi Proxy: http://127.0.0.1:8585 (arah ke pelayan Node.js & port anda)
   • Simpan konfigurasi. ServBay akan serta-merta mengaplikasikan perubahan dan mungkin akan restart pelayan web berkaitan (sama ada Caddy atau Nginx, mengikut konfigurasi ServBay anda).

   Nota: Reverse proxy sangat penting untuk Socket.io kerana ia bukan sahaja memforward HTTP biasa, tetapi turut mengendalikan handshake upgrade WebSocket. Konfigurasi Caddy @ Nginx yang siap tersedia dalam ServBay telah menyokong proxy WebSocket.

   Untuk langkah terperinci menambah laman Node.js, rujuk Tambah Laman Node.js untuk Pembangunan. Untuk aktivasi HTTPS lokal, rujuk Guna SSL/TLS untuk Lindungi Laman – anda boleh gunakan User CA mahupun Public CA ServBay bagi menghasilkan dan mempercayai sijil SSL tempatan.

3. Akses Laman Pembangunan:

   Di pelayar, buka domain tempatan anda seperti https://servbay-socketio-dev.servbay.demo. Anda akan melihat antaramuka chat, dan boleh buka di tab pelayar/komputer berbeza untuk cuba chat masa nyata.

Deploy Projek Melalui ServBay (Mod Pengeluaran)

Untuk pengeluaran, biasanya anda ingin jalankan Node.js menggunakan pengurus proses (seperti PM2 atau forever) bagi kestabilan maksimum, dan integrasikan ia dengan proxy ServBay.

1. Jalankan Pelayan Node.js (pengeluaran):

   Di pengeluaran, gunakan pengurus proses supaya aplikasi auto restart jika berlaku crash, serta berjalan di background – contoh menggunakan PM2:

   # Jika belum pasang 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

   Ini jalankan server.js menggunakan PM2, dengan port 8586 dan NODE_ENV tetapan kepada production. Pengurus proses akan pastikan server sentiasa berjalan.

2. Konfigurasikan Laman Pengeluaran di ServBay (Proxy Songsang):

   Cara sama seperti mod pembangunan, cipta laman baru berjenis proxy songsang di ServBay, arahkan ke port pelayan Node.js produksi anda.

   • Buka panel kawalan ServBay.
   • Navigasi ke bahagian “Laman Web”.
   • Klik tambah laman baru.
   • Konfigurasi:
     • Nama: ServBay Socket.io Prod (atau nama pilihan anda)
     • Domain: servbay-socketio-prod.servbay.demo (atau domain .servbay.demo lain)
     • Jenis: Pilih Proxy Songsang (Reverse Proxy)
     • Destinasi Proxy: http://127.0.0.1:8586 (halakan ke port Node.js produksi)
   • Simpan konfigurasi.

3. Akses Laman Pengeluaran:

   Di pelayar, buka domain pengeluaran yang anda tetapkan, contohnya https://servbay-socketio-prod.servbay.demo.

Fungsi proxy songsang ServBay memudahkan anda mengurus pelbagai aplikasi Node.js, sama ada dalam pembangunan atau pengeluaran, dengan pengurusan domain tempatan dan sijil SSL secara automatik — tiada lagi perlu sunting fail hosts atau konfigurasi server web secara manual.

Sambungkan Aplikasi ke Pangkalan Data ServBay

ServBay menyokong pelbagai perisian pangkalan data seperti MySQL, MariaDB, PostgreSQL, MongoDB, dan Redis. Projek Socket.io anda mungkin perlu berinteraksi dengan DB untuk menyimpan pengguna, log sejarah mesej dan sebagainya. Berikut beberapa contoh kod Node.js untuk bersambung ke pangkalan data tersebut.

PENTING: Pastikan anda telah memasang & menghidupkan perisian pangkalan data yang diperlukan di panel kawalan ServBay dulu. Maklumat sambungan lalai (seperti port, pengguna & kata laluan) boleh didapati dalam antara muka pengurusan DB atau dokumentasi ServBay. Untuk MySQL / MariaDB, kata laluan root biasanya ditetapkan sewaktu pemasangan. Anda juga boleh reset pasword root melalui alat dalaman ServBay.

1. Sambung ke MongoDB:

   Pasang ODM Mongoose (atau pemacu rasmi mongodb):

   npm install mongoose

   Dalam kod Node.js anda (cth. server.js atau modul DB berasingan):

   const mongoose = require('mongoose');
   
   // Sambung ke contoh MongoDB tempatan (port 27017 lalai)
   // Nama pangkalan data 'servbay_socketio_app' hanya sebagai contoh
   mongoose.connect('mongodb://localhost:27017/servbay_socketio_app', {
     useNewUrlParser: true,
     useUnifiedTopology: true,
     // Pilihan lain seperti user, pass jika perlukan autentikasi
     // user: 'your_mongo_user',
     // pass: 'your_mongo_password'
   })
   .then(() => console.log('MongoDB berjaya disambungkan melalui Mongoose'))
   .catch(err => console.error('Ralat sambungan MongoDB:', err));
   
   // Kini anda boleh gunakan mongoose.model() untuk definisi Schema & Model
   // ...

2. Sambung ke Redis:

   Pasang pustaka klien redis:

   npm install redis

   Dalam Node.js anda:

   const redis = require('redis');
   
   // Cipta klien Redis, lalai ke localhost:6379
   const client = redis.createClient({
     // Jika Redis perlu kata laluan
     // password: 'your_redis_password',
     // url: 'redis://localhost:6379' // Atau dalam format URL
   });
   
   client.on('error', (err) => {
     console.error('Ralat sambungan Redis:', err);
   });
   
   client.on('connect', () => {
     console.log('Klien Redis berjaya disambungkan');
   });
   
   // Sambung ke server Redis
   client.connect(); // Perlu panggil connect() untuk versi v4+
   
   // Anda boleh guna objek client untuk pelbagai arahan Redis
   // Contoh: await client.set('mykey', 'myvalue');
   // ...

3. Sambung ke MariaDB / MySQL:

   ServBay menyokong kedua-dua MariaDB dan MySQL. Kaedahnya serupa. Kita akan guna pustaka mariadb (juga serasi MySQL).

   Pasang pustaka mariadb:

   npm install mariadb

   Dalam Node.js anda:

   const mariadb = require('mariadb');
   
   // Cipta pool sambungan
   const pool = mariadb.createPool({
     host: 'localhost',
     port: 3306, // Port lalai
     user: 'root', // Biasanya root dalam ServBay
     password: 'password', // Tukarkan kepada kata laluan sebenar root anda
     database: 'servbay_socketio_app', // Nama DB contoh
     connectionLimit: 5 // Saiz pool
   });
   
   // Dapatkan sambungan dari pool dan uji
   pool.getConnection()
     .then(conn => {
       console.log("Berjaya disambung ke MariaDB/MySQL");
       conn.release(); // Lepaskan balik sambungan ke pool
       // Kini anda boleh gunakan pool untuk query
       // Contoh: await pool.query("SELECT 1");
       // ...
     })
     .catch(err => {
       console.error("Ralat sambungan MariaDB/MySQL:", err);
     });

   Nota: Pastikan anda tukar password kepada yang sebenar (root untuk MariaDB/MySQL dalam ServBay). Amat disarankan cipta pengguna khusus untuk aplikasi, bukan terus guna root.

4. Sambung ke PostgreSQL:

   Pasang japustaka klien pg:

   npm install pg

   Dalam Node.js anda:

   const { Pool } = require('pg');
   
   // Cipta pool sambungan
   const pool = new Pool({
     user: 'user', // Tukar kepada nama pengguna benar
     host: 'localhost',
     database: 'servbay_socketio_app', // Nama DB contoh
     password: 'password', // Kata laluan sebenar
     port: 5432, // Port lalai Postgres
   });
   
   // Mendapatkan sambungan dan uji
   pool.connect((err, client, done) => {
     if (err) {
       console.error('Ralat sambungan PostgreSQL:', err);
       return;
     }
     console.log('Berjaya disambung ke PostgreSQL');
     client.release(); // Lepaskan balik ke pool
     // Kini pool boleh digunakan untuk query
     // Contoh: pool.query('SELECT NOW()', (err, res) => { ... });
     // ...
   });

   Nota: Sila tukar user & password kepada butiran yang betul untuk pemasangan ServBay anda.

Dengan integrasi pelbagai DB ini, aplikasi Socket.io anda boleh menyimpan data berkekalan dan membina pelbagai fungsi lebih canggih. ServBay memudahkan pembangunan tempatan Node.js + multi-database tanpa perlu konfigurasi rumit.

Perkara Penting Untuk Diperhatikan

• Konflik Port: Pastikan port di mana aplikasi Node.js anda mendengar (cth. 8585/8586) tidak digunakan oleh aplikasi lain. Anda boleh tukar nilai port melalui pembolehubah PORT jika perlu.
• Konfigurasi Laman ServBay: Selepas tetapan reverse proxy di ServBay, pastikan pelayan web (Caddy/Nginx) telah berjaya dimulakan semula dan gunakan konfigurasi baharu.
• Proxy WebSocket: Konfigurasi siap guna ServBay menyokong upgrade protokol WebSocket. Jika timbul isu, semak log pelayan web & pastikan WebSocket proxy diaktifkan.
• Firewall: Pastikan firewall sistem anda tidak menghalang akses ke port yang digunakan oleh ServBay (seperti 80, 443) atau aplikasi Node.js.

Soalan Lazim