Penyepaduan WebSocket dalam React untuk Komunikasi Masa Nyata

Penyatuan WebSocket dalam React

WebSockets membenarkan komunikasi masa nyata, dupleks penuh antara pelanggan dan pelayan. Tidak seperti permintaan HTTP tradisional, yang berasaskan tindak balas permintaan, WebSockets membenarkan pelayan dan pelanggan menghantar mesej pada bila-bila masa, mendayakan ciri masa nyata seperti sembang langsung, pemberitahuan atau kemas kini data langsung.

Dalam aplikasi React, penyepaduan WebSocket boleh digunakan untuk membina ciri seperti sistem pemesejan, kemas kini langsung, penanda saham atau permainan berbilang pemain. React menyediakan cangkuk dan kaedah kitaran hayat komponen yang boleh membantu mengurus sambungan WebSocket.

---

1. Mengapa Menggunakan WebSockets?

• Komunikasi Masa Nyata: WebSockets menyediakan keupayaan untuk menghantar dan menerima mesej serta-merta antara pelanggan dan pelayan.
• Latensi Dikurangkan: Sambungan WebSocket berterusan, mengurangkan overhed permintaan HTTP berulang.
• Pemindahan Data yang Cekap: WebSocket hanya membuka satu sambungan, mengurangkan penggunaan lebar jalur dan meningkatkan kelajuan komunikasi.
• Aplikasi Interaktif: WebSockets sesuai untuk aplikasi yang memerlukan kemas kini yang kerap atau masa nyata, seperti apl sembang atau suapan langsung.

---

2. Cara WebSockets Berfungsi

WebSockets mewujudkan saluran komunikasi dua hala antara klien (pelayar) dan pelayan. Selepas jabat tangan awal (melalui HTTP), protokol WebSocket mengambil alih, mewujudkan sambungan berterusan.

1. Pelanggan menghantar permintaan jabat tangan WebSocket ke pelayan (serupa dengan permintaan HTTP).
2. Pelayan menerima permintaan dan mewujudkan sambungan WebSocket.
3. Setelah sambungan dibuka, kedua-dua pelanggan dan pelayan boleh menghantar mesej berulang-alik melalui sambungan WebSocket.
4. Sambungan kekal terbuka, mengurangkan keperluan untuk berjabat tangan berulang kali.

---

3. Menyediakan Penyepaduan WebSocket dalam React

Mari kita terokai cara mengintegrasikan WebSockets ke dalam aplikasi React. Kami akan menggunakan API WebSocket yang tersedia dalam kebanyakan penyemak imbas moden.

Langkah 1: Buat Sambungan WebSocket

Mula-mula, buat sambungan WebSocket dalam komponen React anda. Kami akan menggunakan cangkuk useEffect untuk mewujudkan sambungan dan useState untuk mengurus mesej masuk.

import React, { useState, useEffect } from 'react';

const WebSocketExample = () => {
  const [message, setMessage] = useState('');
  const [socket, setSocket] = useState(null);

  // Establish WebSocket connection
  useEffect(() => {
    const ws = new WebSocket('wss://example.com/socket'); // Replace with your WebSocket server URL

    // Set WebSocket object in state
    setSocket(ws);

    // Set up event listener for receiving messages
    ws.onmessage = (event) => {
      console.log('Message from server:', event.data);
      setMessage(event.data); // Store the incoming message in state
    };

    // Clean up WebSocket on component unmount
    return () => {
      ws.close();
    };
  }, []);

  const sendMessage = () => {
    if (socket && socket.readyState === WebSocket.OPEN) {
      socket.send('Hello Server');
    }
  };

  return (
    <div>
      <h1>WebSocket Integration Example</h1>
      <p>Message from server: {message}</p>
      <button onClick={sendMessage}>Send Message</button>
    </div>
  );
};

export default WebSocketExample;

---

4. Penjelasan Kod

Pengurusan Negeri:

• mesej: Menahan mesej yang diterima daripada pelayan.
• soket: Menyimpan objek sambungan WebSocket.

useEffect Hook:

• Mewujudkan Sambungan WebSocket: Sambungan WebSocket dibuat apabila komponen dipasang (useEffect berjalan). Gantikan 'wss://example.com/socket' dengan URL WebSocket pelayan anda.
• Pendengar Acara onmessage: Acara onmessage mendengar mesej masuk daripada pelayan WebSocket dan mengemas kini keadaan dengan data baharu.
• Membersihkan: Apabila komponen dinyahlekap atau sambungan tidak diperlukan lagi, ws.close() menutup sambungan WebSocket.

Menghantar Mesej:

• Fungsi sendMessage: Fungsi ini menghantar mesej kepada pelayan WebSocket, tetapi hanya jika sambungan dibuka (socket.readyState === WebSocket.OPEN).

---

5. Pendengar Acara WebSocket

WebSocket menyediakan beberapa acara untuk berinteraksi dengan:

• tidak terbuka: Dipecat apabila sambungan diwujudkan.
• onmessage: Dipecat apabila mesej diterima daripada pelayan.
• onclose: Dipecat apabila sambungan WebSocket ditutup.
• onerror: Dipecat apabila terdapat ralat dengan sambungan WebSocket.

Contohnya:

const ws = new WebSocket('wss://example.com/socket');

ws.onopen = () => {
  console.log('WebSocket connection established');
};

ws.onerror = (error) => {
  console.error('WebSocket error:', error);
};

ws.onclose = () => {
  console.log('WebSocket connection closed');
};

---

6. Mengendalikan Mesej WebSocket dalam React

Apabila bekerja dengan WebSockets, terutamanya dalam apl React, data yang anda terima mungkin perlu diproses atau dipaparkan dalam masa nyata. Anda boleh mengendalikannya dengan mengemas kini keadaan setiap kali mesej baharu diterima.

Sebagai contoh, bayangkan membina apl sembang langsung. Anda akan mengemas kini keadaan dengan mesej baharu dan menjadikannya secara dinamik:

const [messages, setMessages] = useState([]);

ws.onmessage = (event) => {
  const newMessage = event.data;
  setMessages((prevMessages) => [...prevMessages, newMessage]); // Append new message to state
};

Ini memastikan setiap mesej baharu ditambahkan pada senarai mesej sembang dan dipaparkan dalam UI.

---

7. WebSocket dan Sambung Semula Logik

Sambungan WebSocket mungkin terputus sekali-sekala dan pengendalian logik penyambungan semula boleh memastikan apl anda kekal teguh. Anda boleh melaksanakan logik penyambungan semula seperti berikut:

useEffect(() => {
  const connectWebSocket = () => {
    const ws = new WebSocket('wss://example.com/socket');

    ws.onopen = () => console.log('WebSocket connected');
    ws.onclose = () => {
      console.log('WebSocket disconnected, reconnecting...');
      setTimeout(connectWebSocket, 1000); // Reconnect after 1 second
    };

    return ws;
  };

  const ws = connectWebSocket();

  // Clean up WebSocket on component unmount
  return () => {
    ws.close();
  };
}, []);

Kod ini akan cuba menyambung semula ke pelayan WebSocket apabila sambungan ditutup.

---

8. Pertimbangan Keselamatan

• Gunakan wss://: Sentiasa gunakan protokol wss:// (WebSocket Secure) untuk komunikasi yang disulitkan, terutamanya apabila menghantar data sensitif.
• Pengesahan: Untuk sambungan WebSocket terjamin, gunakan pengesahan berasaskan token (cth., JWT) untuk mengesahkan pengguna sebelum membenarkan mereka menyambung ke pelayan WebSocket.

---

9. Menggunakan Perpustakaan WebSocket

Terdapat beberapa perpustakaan pihak ketiga yang boleh memudahkan penyepaduan WebSocket dalam React:

• socket.io-client: Pustaka yang digunakan secara meluas untuk komunikasi masa nyata yang mengabstrak sambungan WebSocket dan menawarkan ciri tambahan seperti pemesejan berasaskan acara.
• Menyambung SemulaWebSocket: Pembalut untuk WebSocket yang menyediakan penyambungan semula automatik.

---

10. Kesimpulan

Menyepadukan WebSockets ke dalam aplikasi React ialah cara yang berkuasa untuk mendayakan ciri masa nyata, seperti kemas kini data langsung atau pengalaman pengguna interaktif. Dengan cangkuk seperti useState dan useEffect, anda boleh mengurus sambungan WebSocket dengan mudah, menghantar dan menerima mesej serta memastikan UI anda disegerakkan dengan data masa nyata.

---

Atas ialah kandungan terperinci Penyepaduan WebSocket dalam React untuk Komunikasi Masa Nyata. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!