Kem Intensif Pembangunan Backend Node.js · Pelajaran

Melaksanakan Socket.IO dalam Node.js

Integrasikan Socket.IO ke dalam aplikasi Express anda untuk membolehkan komunikasi dua hala berasaskan peristiwa.

Pelajaran 3 daripada 611 langkah

Melaksanakan Socket.IO dalam Node.js ialah pelajaran Kem Intensif Pembangunan Backend Node.js percuma di CoddyKit. Ini ialah pelajaran 3 daripada 6. Anda boleh membaca keseluruhan pelajaran di bawah secara percuma — kemudian berlatih secara praktikal dalam pelayar menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Kem Intensif Pembangunan Backend Node.js, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Kem Intensif Pembangunan Backend Node.js merangkumi sejumlah 6 pelajaran.

Kenali Socket.IO

Dalam pelajaran sebelumnya, kita mempelajari WebSockets untuk komunikasi masa nyata. Walaupun berkuasa, WebSockets mentah boleh menjadi rumit untuk diurus, terutamanya dari segi kestabilan sambungan dan pilihan sandaran.

Di sinilah Socket.IO berguna! Ia ialah pustaka yang membolehkan komunikasi masa nyata, dua hala dan berasaskan peristiwa antara klien web dengan server. Ia berfungsi pada setiap platform, pelayar dan peranti, sekali gus memastikan sambungan yang boleh dipercayai.

Abstraksi: Memudahkan API WebSocket.
Kebolehpercayaan: Mengendalikan pemutusan dan penyambungan semula.
Sandaran: Menggunakan pengundian panjang HTTP jika WebSockets tidak tersedia.
Penyiaran: Menghantar mesej kepada berbilang klien dengan mudah.

Persediaan Projek

Mula-mula, mari sediakan projek kita. Node.js dan npm perlu dipasang. Buka terminal anda dan cipta folder projek baharu.

Dalam folder baharu itu, mulakan projek Node.js, kemudian pasang pakej yang diperlukan: express untuk server web kita dan socket.io untuk komunikasi masa nyata.

npm init -y
npm install express socket.io

Asas Kita: Server Express

Sebelum mengintegrasikan Socket.IO, mari sediakan server Express asas. Server ini akan mengendalikan permintaan HTTP kita dan menjadi asas kepada komunikasi masa nyata.

Cipta file bernama server.js dan tambahkan kod berikut. Kod ini menyediakan app Express yang mendengar pada port 3000.

const express = require('express');
const http = require('http'); // Needed for Socket.IO

const app = express();
const server = http.createServer(app); // Create HTTP server
const PORT = 3000;

app.get('/', (req, res) => {
  res.send('<h1>Hello from Express!</h1>');
});

server.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});

Lampirkan Socket.IO

Sekarang, mari lampirkan Socket.IO pada server HTTP Express sedia ada. Ini membolehkan Socket.IO mendengar sambungan WebSocket pada port yang sama dengan server web kita.

Kita mengimport pustaka socket.io dan menyerahkan tika server http kita kepadanya. Ini mencipta tika server Socket.IO yang lazimnya dinamakan io.

const express = require('express');
const http = require('http');
const { Server } = require('socket.io'); // Import Server class

const app = express();
const server = http.createServer(app);
const io = new Server(server); // Attach Socket.IO to HTTP server

const PORT = 3000;

app.get('/', (req, res) => {
  res.send('<h1>Hello from Express!</h1>');
});

server.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});

Peristiwa Sambungan Klien

Peristiwa paling asas dalam Socket.IO ialah 'connection'. Peristiwa ini dicetuskan setiap kali klien baharu berjaya bersambung kepada server Socket.IO.

Dalam pendengar peristiwa ini, anda memperoleh objek socket yang mewakili klien individu. Anda kemudiannya boleh menunggu peristiwa tertentu daripada klien itu atau menghantar mesej terus kepadanya.

const express = require('express');
const http = require('http');
const { Server } = require('socket.io');

const app = express();
const server = http.createServer(app);
const io = new Server(server);

const PORT = 3000;

// Listen for incoming connections
io.on('connection', (socket) => {
  console.log('A user connected:', socket.id);

  // Listen for disconnection
  socket.on('disconnect', () => {
    console.log('User disconnected:', socket.id);
  });
});

app.get('/', (req, res) => {
  res.send('<h1>Hello from Express!</h1>');
});

server.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});

Server Memancarkan Peristiwa

Server boleh menghantar (atau 'emit') peristiwa tersuai kepada klien. Untuk menghantar mesej kepada klien tertentu yang baru bersambung, kita menggunakan socket.emit().

Kaedah ini menerima nama peristiwa (contohnya, 'welcome') dan apa-apa data yang ingin anda sertakan. Klien kemudiannya akan menunggu peristiwa khusus ini.

const express = require('express');
const http = require('http');
const { Server } = require('socket.io');

const app = express();
const server = http.createServer(app);
const io = new Server(server);

const PORT = 3000;

io.on('connection', (socket) => {
  console.log('A user connected:', socket.id);
  
  // Send a 'welcome' event to the newly connected client
  socket.emit('welcome', `Welcome, your ID is ${socket.id}!`);

  socket.on('disconnect', () => {
    console.log('User disconnected:', socket.id);
  });
});

app.get('/', (req, res) => {
  res.send('<h1>Hello from Express!</h1>');
});

server.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});

Server Menerima Peristiwa

Sama seperti server boleh memancarkan peristiwa, server juga boleh menunggu peristiwa yang dihantar oleh klien. Kita menggunakan socket.on() untuk tujuan ini, sama seperti ketika menunggu 'connection'.

Apabila klien menghantar peristiwa dengan nama tertentu, pendengar yang sepadan di sisi server akan dilaksanakan dan menerima apa-apa data yang dihantar oleh klien.

const express = require('express');
const http = require('http');
const { Server } = require('socket.io');

const app = express();
const server = http.createServer(app);
const io = new Server(server);

const PORT = 3000;

io.on('connection', (socket) => {
  console.log('A user connected:', socket.id);
  socket.emit('welcome', `Welcome, your ID is ${socket.id}!`);

  // Listen for a 'clientMessage' event from this specific client
  socket.on('clientMessage', (message) => {
    console.log(`Message from ${socket.id}: ${message}`);
  });

  socket.on('disconnect', () => {
    console.log('User disconnected:', socket.id);
  });
});

app.get('/', (req, res) => {
  res.send('<h1>Hello from Express!</h1>');
});

server.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});

Interaksi di Sisi Klien

Untuk menyambung kepada server Socket.IO kita, klien memerlukan pustaka klien Socket.IO. Anda boleh menyertakannya melalui CDN atau npm.

Petikan HTML ini menunjukkan klien asas yang bersambung, menunggu peristiwa 'welcome' dan menghantar peristiwa 'clientMessage' kepada server. Simpan ini sebagai index.html.

<!DOCTYPE html>
<html>
<head>
  <title>Socket.IO Client</title>
  <script src="/socket.io/socket.io.js"></script>
</head>
<body>
  <h1>Socket.IO Client</h1>
  <p id="status">Connecting...</p>
  <button onclick="sendMessage()">Send Hello</button>
  <ul id="messages"></ul>

  <script>
    const socket = io('http://localhost:3000'); // Connect to your server

    socket.on('connect', () => {
      document.getElementById('status').innerText = 'Connected to server!';
      console.log('Connected to server!');
    });

    socket.on('welcome', (msg) => {
      const item = document.createElement('li');
      item.innerText = `Server: ${msg}`;
      document.getElementById('messages').appendChild(item);
      console.log('Received from server:', msg);
    });

    socket.on('disconnect', () => {
      document.getElementById('status').innerText = 'Disconnected.';
      console.log('Disconnected from server.');
    });

    function sendMessage() {
      const msg = 'Hello from client!';
      socket.emit('clientMessage', msg);
      const item = document.createElement('li');
      item.innerText = `Client: ${msg}`;
      document.getElementById('messages').appendChild(item);
    }
  </script>
</body>
</html>

Menyiarkan Mesej

Selalunya, anda perlu menghantar mesej kepada *semua* klien yang bersambung, bukan hanya klien yang mencetuskan peristiwa. Proses ini dipanggil penyiaran.

Daripada menggunakan socket.emit(), yang menghantar mesej kepada socket tertentu, kita menggunakan io.emit() untuk menghantarnya kepada semua yang bersambung kepada server Socket.IO.

const express = require('express');
const http = require('http');
const { Server } = require('socket.io');

const app = express();
const server = http.createServer(app);
const io = new Server(server);

const PORT = 3000;

io.on('connection', (socket) => {
  console.log('A user connected:', socket.id);
  socket.emit('welcome', `Welcome, your ID is ${socket.id}!`);
  
  // Broadcast to all clients (except the sender) when a new user connects
  socket.broadcast.emit('user joined', `User ${socket.id} joined.`);

  socket.on('clientMessage', (message) => {
    console.log(`Message from ${socket.id}: ${message}`);
    // Broadcast the message to ALL connected clients
    io.emit('serverMessage', `[${socket.id}] ${message}`); 
  });

  socket.on('disconnect', () => {
    console.log('User disconnected:', socket.id);
    // Broadcast to all clients when a user disconnects
    io.emit('user left', `User ${socket.id} left.`);
  });
});

app.get('/', (req, res) => {
  res.send('<h1>Hello from Express!</h1>');
});

server.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});

Semakan Pantas: Skop Peristiwa

Anda telah melihat cara menghantar mesej menggunakan kedua-dua socket.emit() dan io.emit(). Kaedah manakah yang akan anda gunakan untuk menghantar mesej kepada *semua* klien yang bersambung?

Jawab dalam pelajaran interaktif

Ulang Kaji: Integrasi Socket.IO

Kerja yang cemerlang! Dalam pelajaran ini, anda telah mempelajari cara mengintegrasikan Socket.IO ke dalam aplikasi Express Node.js, sekali gus membolehkan ciri masa nyata yang berkuasa.

Persediaan: Memasang express dan socket.io.
Server: Melampirkan Socket.IO pada server HTTP sedia ada.
Sambungan: Mengendalikan peristiwa 'connection' dan 'disconnect' klien.
Komunikasi: Menggunakan socket.emit() untuk menghantar kepada klien tertentu dan io.emit() untuk menyiarkan kepada semua klien.
Pendengar: Menyediakan socket.on() untuk menerima peristiwa tersuai daripada klien.

Kini anda mempunyai asas untuk membina aplikasi interaktif masa nyata!

Percuma untuk bermula

Pelajari JavaScript dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 22
Pelajaran: 92

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Melaksanakan Socket.IO dalam Node.js” percuma?

Ya — teks penuh “Melaksanakan Socket.IO dalam Node.js” boleh dibaca secara percuma di web ini. Untuk berlatih secara interaktif menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7, serta membuka kunci baki kursus Kem Intensif Pembangunan Backend Node.js, tingkat taraf kepada CoddyKit PRO. Kursus Kem Intensif Pembangunan Backend Node.js merangkumi sejumlah 6 pelajaran.

Apakah yang akan saya pelajari dalam “Melaksanakan Socket.IO dalam Node.js”?

Integrasikan Socket.IO ke dalam aplikasi Express anda untuk membolehkan komunikasi dua hala berasaskan peristiwa. Anda berlatih Kem Intensif Pembangunan Backend Node.js menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan Kem Intensif Pembangunan Backend Node.js?

Tiada pengalaman terdahulu diperlukan. Pembelajaran Kem Intensif Pembangunan Backend Node.js di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 3 daripada 6.

Berapa lamakah pelajaran “Melaksanakan Socket.IO dalam Node.js” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran Kem Intensif Pembangunan Backend Node.js ini?

Ya. Setiap pelajaran Kem Intensif Pembangunan Backend Node.js menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

← Kembali ke Kem Intensif Pembangunan Backend Node.js