React 中的 WebSocket 整合用於即時通信-js教程-PHP中文網

WebSocket Integration in React for Real-Time Communication

React 中的 WebSocket 整合

WebSocket 允許客戶端和伺服器之間進行即時、全雙工通訊。與基於請求-回應的傳統 HTTP 請求不同，WebSocket 允許伺服器和用戶端隨時發送訊息，從而實現即時聊天、通知或即時資料更新等即時功能。

在 React 應用程式中，WebSocket 整合可用於建立訊息系統、即時更新、股票行情或多人遊戲等功能。 React 提供了鉤子和元件生命週期方法，可以幫助管理 WebSocket 連線。

1.為什麼要使用 WebSocket？

即時通訊：WebSocket 提供了在客戶端和伺服器之間即時發送和接收訊息的能力。
減少延遲：WebSocket 連線是持久的，減少重複 HTTP 請求的開銷。
高效率資料傳輸：WebSocket 只開啟單一連接，減少頻寬佔用，提高通訊速度。
互動式應用程式：WebSocket 非常適合需要頻繁或即時更新的應用程序，例如聊天應用程式或即時提要。

2. WebSocket 的工作原理

WebSockets 在客戶端（瀏覽器）和伺服器之間建立雙向通訊通道。初始握手（透過 HTTP）後，WebSocket 協定接管，創建持久連線。

客戶端向伺服器傳送WebSocket握手請求（類似HTTP請求）。
伺服器接受請求並建立 WebSocket 連線。
連線開啟後，客戶端和伺服器都可以透過 WebSocket 連線來回傳送訊息。
連線保持開放狀態，減少了重複握手的需要。

3.在 React 中設定 WebSocket 整合

讓我們探索如何將 WebSocket 整合到 React 應用程式中。我們將使用大多數現代瀏覽器中可用的 WebSocket API。

第 1 步：建立 WebSocket 連線

首先，在 React 元件中建立一個 WebSocket 連線。我們將使用 useEffect 掛鉤來建立連接，並使用 useState 來管理傳入訊息。

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.代碼說明

狀態管理：

訊息：儲存從伺服器收到的訊息。
socket：儲存WebSocket連線物件。

useEffect Hook：

建立 WebSocket 連線：WebSocket 連線在元件掛載（useEffect 運作）時建立。將「wss://example.com/socket」替換為伺服器的 WebSocket URL。
onmessage 事件監聽器：onmessage 事件監聽來自 WebSocket 伺服器的傳入訊息，並使用新資料更新狀態。
清理：當元件卸載或不再需要連線時，ws.close() 關閉 WebSocket 連線。

發送訊息：

sendMessage 函數：此函數會向 WebSocket 伺服器傳送訊息，但前提是連線已開啟 (socket.readyState === WebSocket.OPEN)。

5. WebSocket 事件監聽器

WebSocket 提供了幾個可以互動的事件：

onopen：建立連線時觸發。
onmessage：從伺服器收到訊息時觸發。
onclose：WebSocket 連線關閉時觸發。
onerror：當 WebSocket 連線出現錯誤時觸發。

例如：

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.在 React 中處理 WebSocket 訊息

使用 WebSocket 時，尤其是在 React 應用程式中，您收到的資料可能需要即時處理或顯示。您可以透過每次收到新訊息時更新狀態來處理此問題。

例如，想像一下建立一個即時聊天應用程式。您可以使用新訊息更新狀態並動態渲染它：

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

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

登入後複製

這可確保每個新訊息都會新增至聊天訊息清單並顯示在 UI 中。

7. WebSocket 與重新連線邏輯

WebSocket 連線可能偶爾會斷開，處理重新連接邏輯可以確保您的應用程式保持穩健。您可以如下實現重連邏輯：

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();
  };
}, []);

登入後複製

每當連線關閉時，此程式碼都會嘗試重新連線到 WebSocket 伺服器。