React Academy · Pelajaran

Menggunakan Socket.IO dengan React

Hubungkan React ke server Socket.IO, dengarkan event, dan kirim pesan dari hook.

Menggunakan Socket.IO dengan React adalah pelajaran React Academy gratis di CoddyKit. Ini adalah pelajaran 2 dari 4. 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 React Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus React Academy mencakup 4 pelajaran total.

Mengapa Socket.IO?

Socket.IO menambahkan ruang, ruang nama, penyambungan ulang otomatis, dan pengiriman pesan berbasis peristiwa di atas WebSockets dengan mekanisme cadangan berupa polling panjang HTTP—jauh lebih praktis daripada WebSocket mentah.

Memasang Klien

Pasang paket klien Socket.IO.

npm install socket.io-client

Membuat Instans Soket

Panggil io(url) di luar komponen React agar koneksi digunakan bersama dan tidak dibuat ulang pada setiap render. Ekspor sebagai instans tunggal.

// src/lib/socket.ts
import { io } from 'socket.io-client';

export const socket = io('https://api.example.com', {
  autoConnect: false, // connect manually
  withCredentials: true,
});

Menghubungkan dalam useEffect

Hubungkan saat komponen dipasang dan putuskan koneksi saat komponen dilepas untuk menghindari koneksi yang tertinggal.

useEffect(() => {
  socket.connect();

  return () => {
    socket.disconnect();
  };
}, []);

Mendengarkan Peristiwa

Gunakan socket.on('event', handler) untuk berlangganan. Hapus pendengar tersebut dalam fungsi pembersihan untuk mencegah penangan duplikat saat render ulang.

useEffect(() => {
  function onMessage(data) {
    setMessages(prev => [...prev, data]);
  }

  socket.on('message', onMessage);

  return () => {
    socket.off('message', onMessage);
  };
}, []);

Memancarkan Peristiwa

Panggil socket.emit('event', data) untuk mengirim data ke server. Anda juga dapat memberikan panggilan balik (konfirmasi) sebagai argumen terakhir.

function sendMessage(text) {
  socket.emit('message', { text, timestamp: Date.now() }, (ack) => {
    console.log('Server acknowledged:', ack);
  });
}

Kait useSocket Kustom

Enkapsulasi logika koneksi soket dalam kait kustom agar dapat digunakan kembali di berbagai komponen.

function useSocket(event, handler) {
  useEffect(() => {
    socket.on(event, handler);
    return () => socket.off(event, handler);
  }, [event, handler]);
}

// Usage:
useSocket('message', (data) => setMessages(m => [...m, data]));

Ruang dan Ruang Nama

Bergabunglah ke ruang dengan memancarkan peristiwa bergabung (ditangani di sisi server). Gunakan ruang nama (io('/chat')) untuk memisahkan lalu lintas soket pada tingkat koneksi.

// Join a room
socket.emit('join-room', 'room-123');

// Connect to a namespace
const chatSocket = io('https://api.example.com/chat');

Status Koneksi

Lacak status koneksi dengan peristiwa connect, disconnect, dan connect_error.

const [isConnected, setIsConnected] = useState(socket.connected);

useEffect(() => {
  socket.on('connect', () => setIsConnected(true));
  socket.on('disconnect', () => setIsConnected(false));
  return () => {
    socket.off('connect');
    socket.off('disconnect');
  };
}, []);

Pancaran Volatil

Gunakan socket.volatile.emit() untuk pesan yang masih dapat ditoleransi jika sesekali kehilangan paket (misalnya posisi kursor atau status permainan).

// Position updates — OK to lose some
function onMouseMove(e) {
  socket.volatile.emit('cursor', { x: e.clientX, y: e.clientY });
}

Socket.IO vs WebSocket Mentah

Socket.IO menambahkan pengelolaan ruang, ruang nama, penyambungan ulang otomatis, dan dukungan biner di atas WebSocket. Gunakan WebSocket mentah jika Anda memerlukan beban tambahan minimal atau server tidak mendukung Socket.IO.

Pemeriksaan Singkat

Mengapa Anda harus menghapus pendengar peristiwa Socket.IO dalam pembersihan useEffect?

Rangkuman

Buat instans socket tunggal dengan io(url, { autoConnect: false }). Hubungkan dan putuskan koneksi dalam useEffect, selalu hapus pendengar dalam pembersihan, dan pancarkan peristiwa dengan socket.emit(). Enkapsulasi logika dalam kait kustom agar dapat digunakan kembali.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Menggunakan Socket.IO dengan React” gratis?

Ya — teks lengkap “Menggunakan Socket.IO dengan React” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus React Academy, upgrade ke CoddyKit PRO. Kursus React Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Menggunakan Socket.IO dengan React”?

Hubungkan React ke server Socket.IO, dengarkan event, dan kirim pesan dari hook. Kamu berlatih React Academy 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 React Academy?

Tidak diperlukan pengalaman sebelumnya. React Academy 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 2 dari 4.

Berapa lama pelajaran “Menggunakan Socket.IO dengan React” 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 React Academy ini?

Ya. Setiap pelajaran React Academy 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

Dasar-Dasar WebSocket di Browser
Menggunakan Socket.IO dengan React
Membangun Komponen Obrolan Waktu Nyata
Penyambungan Kembali, Penanganan Kesalahan & Pembersihan

← Kembali ke React Academy