Node.js Backend Development Bootcamp · Pelajaran

Menerapkan Socket.IO dalam Node.js

Integrasikan Socket.IO ke dalam aplikasi Express Anda untuk memungkinkan komunikasi dua arah berbasis peristiwa.

Menerapkan Socket.IO dalam Node.js adalah pelajaran Node.js Backend Development Bootcamp gratis di CoddyKit. Ini adalah pelajaran 3 dari 6. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Node.js Backend Development Bootcamp, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Node.js Backend Development Bootcamp mencakup 6 pelajaran total.

Bagian dari pelajaran ini belum diterjemahkan dan ditampilkan dalam bahasa Inggris.

Meet Socket.IO

In the previous lesson, we learned about WebSockets for real-time communication. While powerful, raw WebSockets can be complex to manage, especially with connection stability and fallback options.

This is where Socket.IO comes in! It's a library that enables real-time, bi-directional, and event-based communication between web clients and servers. It works on every platform, browser, and device, ensuring reliable connections.

Abstraction: Simplifies WebSocket API.
Reliability: Handles disconnections and re-connections.
Fallback: Uses HTTP long-polling if WebSockets aren't available.
Broadcasting: Easily send messages to multiple clients.

Project Setup

First, let's prepare our project. We'll need Node.js and npm installed. Open your terminal and create a new project folder.

Inside your new folder, initialize a Node.js project and then install the necessary packages: express for our web server and socket.io for real-time communication.

npm init -y
npm install express socket.io

Our Base: Express Server

Before integrating Socket.IO, let's set up a basic Express server. This server will handle our HTTP requests and also serve as the foundation for our real-time communication.

Create a file named server.js and add the following code. This sets up an Express app that listens on 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}`);
});

Attach Socket.IO

Now, let's attach Socket.IO to our existing Express HTTP server. This allows Socket.IO to listen for WebSocket connections on the same port as our web server.

We import the socket.io library and pass our http server instance to it. This creates a Socket.IO server instance, conventionally named 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}`);
});

Client Connection Events

The most fundamental event in Socket.IO is 'connection'. This event fires every time a new client successfully connects to the Socket.IO server.

Inside this event listener, you get a socket object, which represents the individual client. You can then listen for specific events from that client or send messages directly to it.

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 Emits Events

The server can send (or 'emit') custom events to clients. To send a message to a specific client who just connected, we use socket.emit().

This method takes an event name (e.g., 'welcome') and any data you want to send along with it. The client will then listen for this specific event.

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 Receives Events

Just as the server can emit events, it can also listen for events sent from clients. We use socket.on() for this, similar to how we listened for 'connection'.

When a client sends an event with a specific name, the corresponding server-side listener will execute, receiving any data the client sent.

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}`);
});

Client-Side Interaction

To connect to our Socket.IO server, the client needs the Socket.IO client library. You can include it via a CDN or npm.

This HTML snippet shows a basic client that connects, listens for the 'welcome' event, and sends a 'clientMessage' event to the server. Save this as 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>

Broadcasting Messages

Often, you need to send a message to *all* connected clients, not just the one that triggered an event. This is called broadcasting.

Instead of socket.emit(), which sends to a specific socket, we use io.emit() to send to everyone connected to the Socket.IO server.

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}`);
});

Quick Check: Event Scope

You've seen how to send messages using both socket.emit() and io.emit(). Which method would you use to send a message to *all* connected clients?

Recap: Socket.IO Integration

Excellent work! In this lesson, you've learned to integrate Socket.IO into your Node.js Express application, enabling powerful real-time features.

Setup: Installed express and socket.io.
Server: Attached Socket.IO to an existing HTTP server.
Connections: Handled client 'connection' and 'disconnect' events.
Communication: Used socket.emit() to send to specific clients and io.emit() for broadcasting to all clients.
Listeners: Set up socket.on() to receive custom events from clients.

You now have the foundation to build interactive, real-time applications!

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Menerapkan Socket.IO dalam Node.js” gratis?

Ya — teks lengkap “Menerapkan Socket.IO dalam Node.js” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Node.js Backend Development Bootcamp, upgrade ke CoddyKit PRO. Kursus Node.js Backend Development Bootcamp mencakup 6 pelajaran total.

Apa yang akan aku pelajari di “Menerapkan Socket.IO dalam Node.js”?

Integrasikan Socket.IO ke dalam aplikasi Express Anda untuk memungkinkan komunikasi dua arah berbasis peristiwa. Kamu berlatih Node.js Backend Development Bootcamp dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Node.js Backend Development Bootcamp?

Tidak diperlukan pengalaman sebelumnya. Node.js Backend Development Bootcamp di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 3 dari 6.

Berapa lama pelajaran “Menerapkan Socket.IO dalam Node.js” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Node.js Backend Development Bootcamp ini?

Ya. Setiap pelajaran Node.js Backend Development Bootcamp menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke Node.js Backend Development Bootcamp