React Academy · Pelajaran

Menggunakan Socket.IO dengan React

Sambungkan React kepada pelayan Socket.IO, dengarkan peristiwa dan keluarkan mesej daripada cangkuk.

Pelajaran 2 daripada 413 langkah

Menggunakan Socket.IO dengan React ialah pelajaran React Academy percuma di CoddyKit. Ini ialah pelajaran 2 daripada 4. 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 React Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus React Academy merangkumi sejumlah 4 pelajaran.

Mengapakah Socket.IO

Socket.IO menambah bilik, ruang nama, penyambungan semula automatik dan pemesejan berasaskan peristiwa pada WebSocket, dengan sandaran kepada pengundian panjang HTTP — jauh lebih mudah digunakan berbanding WebSocket mentah.

Memasang Klien

Pasang pakej klien Socket.IO.

npm install socket.io-client

Mencipta Contoh Soket

Panggil io(url) di luar komponen React supaya sambungan dikongsi dan tidak dicipta semula pada setiap pemaparan. Eksportnya sebagai satu contoh 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,
});

Menyambung dalam useEffect

Sambung apabila komponen dipasang dan putuskan sambungan apabila komponen dinyahpasang untuk mengelakkan sambungan yang tertinggal.

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

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

Mendengar Peristiwa

Gunakan socket.on('event', handler) untuk melanggan. Buang pendengar dalam fungsi pembersihan bagi mengelakkan pengendali pendua apabila pemaparan semula berlaku.

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

  socket.on('message', onMessage);

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

Mengeluarkan Peristiwa

Panggil socket.emit('event', data) untuk menghantar data kepada pelayan. Secara pilihan, berikan fungsi panggil balik (pengesahan penerimaan) sebagai argumen terakhir.

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

Cangkuk useSocket Tersuai

Encapsulkan logik sambungan soket dalam cangkuk tersuai supaya boleh digunakan semula merentas 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]));

Bilik dan Ruang Nama

Sertai bilik dengan mengeluarkan peristiwa sertai (dikendalikan pada bahagian pelayan). Gunakan ruang nama (io('/chat')) untuk mengasingkan trafik soket pada aras sambungan.

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

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

Status Sambungan

Jejaki keadaan sambungan 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');
  };
}, []);

Pengeluaran Volatile

Gunakan socket.volatile.emit() untuk mesej yang kehilangan paket sekali-sekala boleh diterima (contohnya, kedudukan kursor atau keadaan permainan).

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

Socket.IO berbanding WebSocket Mentah

Socket.IO menambah pengurusan bilik, ruang nama, penyambungan semula automatik dan sokongan binari pada WebSocket. Gunakan WebSocket mentah jika anda memerlukan overhed minimum atau pelayan tidak menyokong Socket.IO.

Semakan Pantas

Mengapakah anda perlu membuang pendengar peristiwa Socket.IO dalam pembersihan useEffect?

Jawab dalam pelajaran interaktif

Imbas Kembali

Cipta contoh tunggal socket dengan io(url, { autoConnect: false }). Sambungkan dan putuskan sambungan dalam useEffect, sentiasa buang pendengar dalam pembersihan, dan keluarkan peristiwa dengan socket.emit(). Encapsulkan logik dalam cangkuk tersuai supaya boleh digunakan semula.

Percuma untuk bermula

Pelajari React 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: 88
Pelajaran: 324

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Menggunakan Socket.IO dengan React” percuma?

Ya — teks penuh “Menggunakan Socket.IO dengan React” 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 React Academy, tingkat taraf kepada CoddyKit PRO. Kursus React Academy merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Menggunakan Socket.IO dengan React”?

Sambungkan React kepada pelayan Socket.IO, dengarkan peristiwa dan keluarkan mesej daripada cangkuk. Anda berlatih React Academy 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 React Academy?

Tiada pengalaman terdahulu diperlukan. Pembelajaran React Academy 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 2 daripada 4.

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

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

Asas WebSocket dalam Pelayar
Menggunakan Socket.IO dengan React
Membina Komponen Sembang Masa Nyata
Penyambungan Semula, Pengendalian Ralat & Pembersihan

← Kembali ke React Academy