React WebSocket 集成教程 – wiki基地

作者： /

React 应用中的实时通信：WebSocket 集成深度教程

在现代 Web 应用中，实时交互体验变得越来越重要。无论是聊天应用、在线协作工具、实时数据仪表盘，还是游戏，用户都期望能够即时接收到最新信息，而无需手动刷新页面。传统的 HTTP 请求/响应模式在这种场景下显得效率低下，因为它无法实现服务器主动向客户端推送数据。

这就是 WebSocket 协议发挥作用的地方。WebSocket 提供了一个在客户端和服务器之间进行全双工、持久连接的机制。一旦连接建立，服务器和客户端可以随时互相发送数据，实现了真正的实时通信。

本篇文章将带你深入了解如何在 React 应用中集成 WebSocket，构建具有实时功能的 Web 应用。我们将从 WebSocket 的基础知识开始，逐步构建一个简单的实时通信示例，并探讨如何在 React 中优雅地管理 WebSocket 连接和数据。

1. 为什么选择 WebSocket？

在深入技术细节之前，我们先来理解为什么 WebSocket 是实现实时性的首选方案，以及它与传统 HTTP 轮询（Polling）或长轮询（Long Polling）的区别。

  • HTTP 轮询: 客户端定期（比如每秒）向服务器发送 HTTP 请求，询问是否有新的数据。这种方式简单易实现，但在大多数时间里，服务器可能并没有新数据，导致大量无效请求，浪费带宽和服务器资源。延迟较高，取决于轮询间隔。
  • HTTP 长轮询: 客户端发送一个 HTTP 请求到服务器，服务器会“ hold”住这个请求，直到有新数据可用，或者达到超时时间。一旦有数据或超时，服务器发送响应。客户端接收响应后立即发送新的请求。这比普通轮询效率更高，减少了空闲请求，但仍然是基于请求/响应模式，并且每次通信都需要重新建立连接（或使用连接池），头部信息开销较大。
  • WebSocket: 客户端发起一个 HTTP 请求（带有特殊的 Upgrade 头），请求协议升级到 WebSocket。如果服务器支持，双方建立一个持久的 TCP 连接。在此之后，客户端和服务器可以通过这个连接随时发送数据帧，没有 HTTP 头部开销，延迟极低，效率极高。这是一种真正的双向实时通信。

WebSocket 的优势总结：

  • 全双工通信: 服务器和客户端可以同时发送和接收数据。
  • 持久连接: 连接一旦建立就保持开启状态，无需重复建立连接的开销。
  • 低延迟: 数据可以即时推送，无需等待客户端请求。
  • 协议开销小: 相较于 HTTP 请求，WebSocket 的数据帧头部非常小。
  • 更高效: 尤其适用于高频率、小数据量的实时更新场景。

因此，对于需要高实时性、频繁数据更新的应用，WebSocket 是远优于 HTTP 轮询的方案。

2. 前置准备

在开始之前，请确保你已经具备以下环境和知识：

  • Node.js 和 npm/yarn 安装。
  • 对 React 及其 Hooks 有基本了解。
  • 一个 React 项目（可以使用 create-react-app 或 Vite 创建）。
  • 一个 WebSocket 服务器（我们将在教程中搭建一个简单的示例服务器）。

3. 搭建一个简单的 WebSocket 服务器

为了测试 React 客户端，我们需要一个 WebSocket 服务器。这里我们使用 Node.js 和 ws 库来快速搭建一个 Echo（回声）服务器，它会将收到的任何消息原样发回给客户端。我们还会稍微修改一下，使其能广播消息给所有连接的客户端，模拟聊天室功能。

步骤 1: 创建项目和安装 ws

在一个新的文件夹中初始化 Node.js 项目并安装 ws：

bash
mkdir websocket-server
cd websocket-server
npm init -y
npm install ws

步骤 2: 编写服务器代码 (server.js)

创建 server.js 文件，并添加以下代码：

“`javascript
const WebSocket = require(‘ws’);

// 创建 WebSocket 服务器，监听 8080 端口
const wss = new WebSocket.Server({ port: 8080 });

console.log(‘WebSocket server started on port 8080’);

// 当有新的客户端连接时触发
wss.on(‘connection’, function connection(ws) {
console.log(‘Client connected’);

// 当收到客户端消息时触发
ws.on(‘message’, function incoming(message) {
console.log(Received message => ${message});

// 假设收到的是文本消息
const messageString = message.toString();

// **广播消息给所有连接的客户端**
// 遍历所有连接的客户端
wss.clients.forEach(function each(client) {
  // 检查客户端连接状态是否为 OPEN (1)
  if (client.readyState === WebSocket.OPEN) {
    // 发送消息
    client.send(`Server received: ${messageString}`);
  }
});

// 也可以只回显给发送消息的客户端:
// ws.send(`You sent: ${messageString}`);

});

// 当客户端连接关闭时触发
ws.on(‘close’, function close() {
console.log(‘Client disconnected’);
});

// 当发生错误时触发
ws.on(‘error’, function error(err) {
console.error(WebSocket error: ${err});
});

// 连接成功后，可以发送一个欢迎消息给新连接的客户端
ws.send(‘Welcome to the WebSocket server!’);
});

// 可选：监听服务器启动事件
wss.on(‘listening’, () => {
const address = wss.address();
console.log(WebSocket server is listening on ${address.address}:${address.port});
});
“`

步骤 3: 启动服务器

在终端中运行：

bash
node server.js

你应该会看到控制台输出 WebSocket server started on port 8080。服务器现在正在运行，等待客户端连接。

这个简单的服务器做了以下几件事：
* 在 8080 端口创建了一个 WebSocket 服务器。
* 监听 connection 事件，处理新的客户端连接。
* 在每个连接上监听 message 事件，接收客户端发送的消息。
* 接收到消息后，将消息广播给所有当前处于开放状态的客户端。
* 监听 close 和 error 事件，进行日志记录。
* 新连接建立时发送一个欢迎消息。

4. 在 React 中集成 WebSocket

现在我们有了服务器，接下来构建 React 客户端来连接并与之通信。在 React 中管理 WebSocket 连接的最佳实践通常涉及使用 Hooks，特别是 useState 来管理状态（连接状态、接收到的消息等）和 useEffect 来处理连接的建立、事件监听和清理。

我们将创建一个自定义 Hook useWebSocket 来封装 WebSocket 的逻辑，然后在组件中使用这个 Hook。

步骤 1: 创建 React 项目

如果你还没有 React 项目，可以创建一个：

“`bash
npx create-react-app my-websocket-app
cd my-websocket-app

或者使用 Vite

npm create vite@latest my-websocket-app –template react

cd my-websocket-app

npm install

“`

步骤 2: 创建 useWebSocket 自定义 Hook

在 src 目录下创建一个 hooks 文件夹（如果不存在），然后在里面创建一个 useWebSocket.js 文件。

“`javascript
import { useState, useEffect, useRef, useCallback } from ‘react’;

// 定义连接状态枚举
const ReadyState = {
CONNECTING: 0,
OPEN: 1,
CLOSING: 2,
CLOSED: 3,
};

const useWebSocket = (url) => {
// 使用 useRef 存储 WebSocket 实例
// useRef 不会在组件重新渲染时丢失其值，且更新它不会触发重新渲染
// 非常适合存储 WebSocket 实例或定时器 ID 等需要在多次渲染中保持不变的对象
const ws = useRef(null);

// 使用 useState 存储连接状态和接收到的消息
const [readyState, setReadyState] = useState(ReadyState.CLOSED);
const [latestMessage, setLatestMessage] = useState(null);
const [error, setError] = useState(null);

// 使用 useRef 来存储事件回调函数
// 这样可以确保在 useEffect 内部访问到最新的回调函数，
// 同时避免将回调函数作为 useEffect 的依赖，从而防止不必要的重连
const messageHandlerRef = useRef(null);
const openHandlerRef = useRef(null);
const errorHandlerRef = useRef(null);
const closeHandlerRef = useRef(null);

// 用于发送消息的函数
const sendMessage = useCallback((message) => {
    if (ws.current && ws.current.readyState === ReadyState.OPEN) {
        try {
            ws.current.send(message);
        } catch (err) {
            console.error("WebSocket send error:", err);
            setError(err); // 也可以通过 setError 暴露发送错误
        }
    } else {
        console.warn("WebSocket is not connected.");
        // 可以在此设置一个状态或调用 errorHandlerRef.current
        setError(new Error("WebSocket is not connected. Cannot send message."));
    }
}, []); // sendMessage 不依赖外部变量，所以依赖数组为空

// 主要的 useEffect 负责连接的建立、事件监听和清理
useEffect(() => {
    console.log(`Attempting to connect to ${url}`);
    // 创建新的 WebSocket 实例
    const websocket = new WebSocket(url);
    ws.current = websocket; // 将实例存储到 ref 中

    // 设置连接状态为 CONNECTING
    setReadyState(ReadyState.CONNECTING);
    setError(null); // 重置错误状态

    // --- 事件监听 ---

    // 连接成功
    websocket.onopen = (event) => {
        console.log('WebSocket connected');
        setReadyState(ReadyState.OPEN);
        // 调用外部提供的 onOpen 回调
        if (openHandlerRef.current) {
            openHandlerRef.current(event);
        }
    };

    // 接收到消息
    websocket.onmessage = (event) => {
        console.log('WebSocket message received:', event.data);
        // 更新最新消息状态
        setLatestMessage(event.data);
        // 调用外部提供的 onMessage 回调
        if (messageHandlerRef.current) {
            // 尝试解析 JSON，如果失败则按原始文本处理
            try {
                const data = JSON.parse(event.data);
                messageHandlerRef.current(data);
            } catch (e) {
                messageHandlerRef.current(event.data);
            }
        }
    };

    // 发生错误
    websocket.onerror = (event) => {
        console.error('WebSocket error:', event);
        // 设置错误状态
        setError(event);
        // 调用外部提供的 onError 回调
        if (errorHandlerRef.current) {
            errorHandlerRefRef.current(event);
        }
        // 通常错误发生后连接会关闭，onclose 会被触发
    };

    // 连接关闭
    websocket.onclose = (event) => {
        console.log('WebSocket disconnected:', event.code, event.reason);
        // 设置连接状态为 CLOSED
        setReadyState(ReadyState.CLOSED);
        // 调用外部提供的 onClose 回调
        if (closeHandlerRef.current) {
            closeHandlerRef.current(event);
        }
        // 可以在此处实现自动重连逻辑，但为了示例简洁，这里省略
    };

    // --- 清理函数 ---
    // useEffect 的清理函数会在组件卸载时或依赖项改变前执行
    return () => {
        console.log('Cleaning up WebSocket connection');
        // 确保 WebSocket 实例存在且连接不是已经关闭的状态
        if (ws.current && ws.current.readyState !== ReadyState.CLOSED) {
            // 主动关闭连接
            ws.current.close();
        }
        // 清空 ref
        ws.current = null;
        // 清理所有事件监听器（虽然 close() 会触发 onclose，但显式清理是好的习惯）
        // 在这个例子中，我们替换了整个 on* 处理器，所以不需要手动 removeEventListener
        // 如果你使用了 addEventListener，则需要对应的 removeEventListener
    };

}, [url]); // 依赖数组：当 url 改变时，effect 会重新运行，建立新的连接

// 允许用户通过参数传递事件处理函数
// 使用 useCallback 包裹，避免在组件重新渲染时创建新的函数导致 useEffect 频繁执行 (如果我们把它们放在 useEffect 依赖中)
// 但由于我们使用 useRef 存储回调，直接传入函数或 useCallback 都可以，
// 使用 useRef 避免依赖数组中包含函数，简化依赖管理
const setCallbacks = useCallback(({ onOpen, onMessage, onError, onClose }) => {
    openHandlerRef.current = onOpen;
    messageHandlerRef.current = onMessage;
    errorHandlerRef.current = onError;
    closeHandlerRef.current = onClose;
}, []); // 这个 useCallback 也不依赖外部变量

// 暴露给组件的状态和方法
return {
    readyState,
    latestMessage,
    error,
    sendMessage,
    setCallbacks, // 暴露设置回调的函数
    wsInstance: ws.current, // 有时需要直接访问实例
};

};

export { useWebSocket, ReadyState };
“`

useWebSocket Hook 的解释：

  1. ws = useRef(null): 使用 useRef 来存储 WebSocket 实例。useRef 返回一个可变的 ref 对象，其 .current 属性可以持有任意值。它在组件的整个生命周期中保持不变，不像 useState 的值在每次渲染时都可能不同。这是存储 DOM 元素引用、定时器 ID 或 WebSocket 实例等不需要触发渲染但需要在多次渲染中访问和修改的值的理想选择。
  2. readyState, latestMessage, error: 使用 useState 来存储需要触发组件重新渲染的状态：连接状态、最新收到的消息和可能的错误。
  3. messageHandlerRef, openHandlerRef, etc.: 使用 useRef 来存储外部传递进来的事件处理函数。这样做是为了防止这些函数作为 useEffect 的依赖项。如果它们是依赖项，并且父组件在每次渲染时都创建新的函数实例（这是 React 函数组件中常见的行为，除非使用 useCallback），那么 useEffect 就会频繁重新运行，导致 WebSocket 连接被不必要地关闭和重新建立。将它们存储在 ref 中，useEffect 的依赖数组中就不需要包含它们，从而只在 url 改变时才重新连接。
  4. useEffect: 这是 Hook 的核心。
    • 当组件挂载时（或 url 改变时），它创建一个新的 WebSocket 实例并存储在 ws.current 中。
    • 设置连接状态为 CONNECTING。
    • 为 WebSocket 实例的 onopen, onmessage, onerror, onclose 事件分配处理函数。这些处理函数会更新 Hook 内部的状态，并调用存储在 ref 中的外部回调。
    • 返回一个清理函数。这个函数会在组件卸载时（或 url 改变导致 effect 重新运行时）执行。它负责关闭当前的 WebSocket 连接，释放资源。确保连接状态不是 CLOSED 后再调用 close()，避免在连接已经关闭时重复操作。
  5. sendMessage: 一个使用 useCallback 封装的函数，用于向服务器发送消息。它检查连接状态是否为 OPEN 后才尝试发送。
  6. setCallbacks: 一个暴露给组件的函数，允许组件在 Hook 外部设置或更新各种 WebSocket 事件的处理函数（如 onMessage）。这些函数会被存储到对应的 ref 中，并在事件发生时被调用。使用 useCallback 包裹它，因为它也可能被多次调用。
  7. 返回值: Hook 返回当前连接的状态、最新消息、错误信息、发送消息的函数以及一个设置回调的函数。

步骤 3: 在组件中使用 useWebSocket Hook

现在，我们可以在一个 React 组件中使用这个 Hook 来显示连接状态、接收消息并发送消息。

修改 src/App.js 文件：

“`javascript
import React, { useState, useEffect, useCallback } from ‘react’;
import { useWebSocket, ReadyState } from ‘./hooks/useWebSocket’; // 确保路径正确
import ‘./App.css’; // 如果你使用了 create-react-app，通常有这个文件

function App() {
const websocketUrl = ‘ws://localhost:8080’; // WebSocket 服务器地址

// 使用 useWebSocket Hook
const {
    readyState,
    latestMessage,
    sendMessage,
    setCallbacks, // 获取设置回调的函数
} = useWebSocket(websocketUrl);

const [messageInput, setMessageInput] = useState('');
const [messages, setMessages] = useState([]); // 存储收到的所有消息

// 使用 useEffect 来设置 WebSocket 的事件回调
// 这样可以在组件需要时（比如接收到特定类型的消息时更新特定状态）处理消息
// setCallbacks 是一个稳定的函数，所以这里没有依赖问题
useEffect(() => {
    const handleMessage = (data) => {
        console.log("App component received message:", data);
        // 将收到的消息添加到消息列表中
        // 确保使用函数式更新 state，避免因为依赖 latestMessage 导致 useEffect 重新运行
        setMessages(prevMessages => [...prevMessages, data]);
    };

    const handleError = (event) => {
        console.error("App component received WebSocket error:", event);
        // 可以在 UI 中显示错误信息
        setMessages(prevMessages => [...prevMessages, `Error: ${event.message || 'Unknown error'}`]);
    };

    const handleOpen = (event) => {
         console.log("App component received WebSocket open event:", event);
         setMessages(prevMessages => [...prevMessages, '--- Connected ---']);
    };

     const handleClose = (event) => {
         console.log("App component received WebSocket close event:", event);
         setMessages(prevMessages => [...prevMessages, `--- Disconnected (${event.code}) ---`]);
     };


    // 使用 setCallbacks 将处理函数传递给 Hook
    setCallbacks({
        onMessage: handleMessage,
        onError: handleError,
        onOpen: handleOpen,
        onClose: handleClose,
    });

    // 清理函数：当组件卸载时，如果需要取消特定的回调，可以在这里做
    // 在我们的 Hook 设计中，关闭连接会自动触发 onClose 并清理内部引用，
    // 所以这里通常不需要额外清理，除非你在组件内部 addEventListener
    // return () => { ... };

}, [setCallbacks]); // setCallbacks 是由 useWebSocket 使用 useCallback 返回的稳定函数

// 监听来自 Hook 的 latestMessage 变化（如果需要基于此更新UI，虽然推荐使用回调）
// useEffect(() => {
//     if (latestMessage !== null) {
//         console.log("App component reacting to latestMessage state:", latestMessage);
//         // 如果不想使用回调，而是直接依赖 latestMessage state，可以在这里处理
//         // setMessages(prevMessages => [...prevMessages, latestMessage]);
//     }
// }, [latestMessage]); // 依赖 latestMessage state

const handleSendClick = () => {
    if (messageInput.trim() !== '') {
        sendMessage(messageInput);
        setMessageInput(''); // 清空输入框
    }
};

const handleInputChange = (event) => {
    setMessageInput(event.target.value);
};

// 根据 readyState 显示连接状态
const connectionStatus = {
    [ReadyState.CONNECTING]: 'Connecting...',
    [ReadyState.OPEN]: 'Open',
    [ReadyState.CLOSING]: 'Closing...',
    [ReadyState.CLOSED]: 'Closed',
}[readyState];

return (
    <div className="App">
        <header className="App-header">
            <h1>React WebSocket Chat</h1>
            <p>Connection Status: <strong>{connectionStatus}</strong></p>
        </header>

        <div className="chat-container">
            <div className="messages">
                {messages.map((msg, index) => (
                    // 注意：在实际应用中，如果有唯一ID，应该用ID作为key
                    // 这里使用 index 仅为示例
                    <p key={index}>{msg}</p>
                ))}
            </div>
            <div className="input-area">
                <input
                    type="text"
                    value={messageInput}
                    onChange={handleInputChange}
                    placeholder="Enter message"
                    disabled={readyState !== ReadyState.OPEN} // 连接打开时才能输入
                />
                <button
                    onClick={handleSendClick}
                    disabled={readyState !== ReadyState.OPEN || messageInput.trim() === ''} // 连接打开且输入不为空才能发送
                >
                    Send
                </button>
            </div>
        </div>
    </div>
);

}

export default App;
“`

App.js 组件的解释：

  1. useWebSocket(websocketUrl): 在组件顶部调用自定义 Hook，传入 WebSocket 服务器的 URL。Hook 返回连接状态、最新消息、发送消息函数和设置回调函数。
  2. useState: 用于管理用户输入的消息 (messageInput) 和所有已接收/发送并显示在界面上的消息列表 (messages)。
  3. useEffect 和 setCallbacks: 使用 useEffect 来在组件挂载时设置 WebSocket 的事件处理函数。我们将 handleMessage, handleError, handleOpen, handleClose 等函数定义好，然后通过 setCallbacks 方法传递给 useWebSocket Hook。这样做的好处是，这些处理函数在 App 组件内部可以直接访问 App 组件的状态（如 messages），并且可以在需要时更新这些状态（如调用 setMessages）。Hook 内部的 useRef 机制确保了即使 App 组件重新渲染，Hook 也能调用到这些函数的最新版本。
  4. handleSendClick: 处理发送按钮点击事件。调用 sendMessage 函数发送输入框中的文本，然后清空输入框。
  5. connectionStatus: 根据 readyState 显示当前连接的状态。
  6. 渲染逻辑: 显示连接状态、已收到的消息列表、输入框和发送按钮。输入框和发送按钮在连接未打开时处于禁用状态。

步骤 4: 运行 React 应用

在 React 项目的根目录下运行：

“`bash
npm start

或者 yarn start

“`

React 应用应该会在浏览器中打开（通常是 http://localhost:3000）。

测试：

  1. 确保你的 Node.js WebSocket 服务器正在运行 (node server.js)。
  2. 打开 React 应用。你应该会看到连接状态显示为 “Connecting…” 然后变为 “Open”，并且接收到服务器发送的欢迎消息 “Welcome to the WebSocket server!”。
  3. 在输入框中输入消息，点击 “Send”。
  4. 消息会被发送到服务器。服务器会广播消息给所有客户端，包括发送者自己。你应该会在消息列表中看到服务器返回的消息（例如 “Server received: Your message here”）。
  5. 尝试打开多个浏览器窗口或标签页连接到同一个 React 应用。在一个窗口发送消息，其他窗口应该也会即时收到。
  6. 停止 Node.js 服务器，观察 React 应用中的连接状态变化。重新启动服务器，观察应用是否重新连接（本示例未实现自动重连，连接会保持 CLOSED）。

5. 增强和考虑

上面的 Hook 提供了一个基础的 WebSocket 集成。在真实的生产应用中，你可能需要考虑以下增强和更复杂的场景：

  • 自动重连: 当连接意外关闭时，实现指数退避（Exponential Backoff）策略尝试重新连接。这需要在 onclose 或 onerror 中触发一个延时函数来创建新的连接。
  • 心跳机制 (Heartbeat): 为了防止连接因为长时间不活动而被防火墙或代理中断，客户端或服务器可以定期发送小的数据包（称为 Ping/Pong 帧）。ws 库和浏览器原生的 WebSocket API 通常会自动处理 Ping/Pong 帧，但在某些情况下，你可能需要自己实现应用层的心跳。
  • 消息格式: 在实际应用中，消息通常是结构化的 JSON 对象，包含消息类型、内容、发送者等信息。Hook 的 onmessage 处理函数需要解析 JSON 并根据消息类型进行不同的处理。我们的 Hook 已经包含了基本的 JSON 解析尝试。
  • 处理不同类型的消息: 你可能需要根据收到的消息类型（例如 chat_message, user_joined, data_update 等）来更新不同的组件状态或触发不同的行为。可以在 Hook 的 onMessage 回调中添加逻辑来分发处理。
  • 认证和授权: WebSocket 连接建立时或建立后，需要验证用户的身份和权限。这通常通过在连接请求中包含 token（例如在 URL 查询参数或自定义头，虽然标准 WebSocket API 不直接支持自定义头，但可以在建立连接前的 HTTP Upgrade 请求中处理）或连接建立后发送认证消息来实现。
  • 全局状态管理: 如果多个组件需要访问 WebSocket 连接状态或接收到的消息，可以考虑将 WebSocket 逻辑集成到全局状态管理库（如 Redux, Zustand, Context API）中。你可以创建一个 Redux slice 或 Context Provider 来管理 WebSocket 状态和消息流。
  • 使用 WebSocket 库 (例如 Socket.IO): 对于更复杂的需求，考虑使用更高级的 WebSocket 库，如 Socket.IO。Socket.IO 提供了自动重连、事件广播、房间管理、二进制支持以及回退到长轮询等功能，极大地简化了开发，但它是一个更高层次的抽象，有自己的协议，需要服务器端也使用 Socket.IO 库。如果你只需要基本的 WebSocket 功能，原生 API 或 ws 这样的库就足够了。
  • 错误处理: 区分不同类型的错误（连接错误、协议错误、服务器错误）并向用户提供有用的反馈。
  • 发送队列: 如果在连接未打开时尝试发送消息，可以将消息放入队列中，待连接打开后再发送。
  • 并发连接管理: 如果应用需要连接到多个 WebSocket 端点，需要管理多个 WebSocket 实例。

6. 将 WebSocket 集成到 Context API (全局状态管理)

为了让 WebSocket 连接和消息在整个应用中可用，而不是局限于使用 Hook 的组件，我们可以将 useWebSocket Hook 的逻辑与 React 的 Context API 结合起来。

步骤 1: 创建 WebSocket Context

创建一个新的文件，例如 src/contexts/WebSocketContext.js。

“`javascript
import React, { createContext, useContext, useState, useEffect, useRef, useCallback } from ‘react’;
import { useWebSocket, ReadyState } from ‘../hooks/useWebSocket’; // 确保路径正确

// 创建 Context
const WebSocketContext = createContext(null);

// 创建 Provider 组件
const WebSocketProvider = ({ children, url }) => {
// 使用 useWebSocket Hook
const {
readyState,
latestMessage, // Hook 内部状态，可选暴露
error,
sendMessage,
setCallbacks, // 获取设置回调的函数
wsInstance, // 获取 WebSocket 实例
} = useWebSocket(url);

// 在 Context 中存储接收到的所有消息（作为全局状态）
const [messages, setMessages] = useState([]);

// 使用 useEffect 来设置 Hook 的回调函数，以便在 Provider 内部处理消息
useEffect(() => {
    const handleMessage = (data) => {
        console.log("WebSocketContext received message:", data);
        // 将收到的消息添加到全局消息列表中
        setMessages(prevMessages => [...prevMessages, data]);
    };

    const handleError = (event) => {
         console.error("WebSocketContext received error:", event);
         // 可以在这里处理全局错误状态或日志
         setMessages(prevMessages => [...prevMessages, `Error: ${event.message || 'Unknown error'}`]);
    };

    const handleOpen = (event) => {
        console.log("WebSocketContext received open event:", event);
        setMessages(prevMessages => [...prevMessages, '--- Connected ---']);
    };

    const handleClose = (event) => {
         console.log("WebSocketContext received close event:", event);
         setMessages(prevMessages => [...prevMessages, `--- Disconnected (${event.code}) ---`]);
     };


    // 使用 setCallbacks 将处理函数传递给 Hook
    setCallbacks({
        onMessage: handleMessage,
        onError: handleError,
        onOpen: handleOpen,
        onClose: handleClose,
    });

}, [setCallbacks]); // setCallbacks 是稳定的

// 暴露给消费者的 Context 值
const contextValue = {
    readyState,
    messages, // 暴露全局消息列表
    error,
    sendMessage,
    // expose latestMessage from hook state if needed, though messages array is often sufficient
    // latestMessage,
    wsInstance, // Sometimes direct access is useful
};

return (
    <WebSocketContext.Provider value={contextValue}>
        {children}
    </WebSocketContext.Provider>
);

};

// 创建一个自定义 Hook 来方便消费 Context
const useWebSocketContext = () => {
const context = useContext(WebSocketContext);
if (context === undefined) {
throw new Error(‘useWebSocketContext must be used within a WebSocketProvider’);
}
return context;
};

export { WebSocketProvider, useWebSocketContext, ReadyState };
“`

WebSocketContext.js 的解释：

  1. 创建 WebSocketContext。
  2. 创建一个 WebSocketProvider 组件。这个组件包裹了 useWebSocket Hook，并在内部处理 Hook 的回调 (onMessage 等)，将收到的消息存储在 Provider 的状态 (messages) 中。
  3. Provider 将连接状态 (readyState)、全局消息列表 (messages)、错误信息 (error) 和发送消息的函数 (sendMessage) 暴露给 Context 值。
  4. 创建一个 useWebSocketContext 自定义 Hook，以便在任何子组件中轻松访问 Context 值。

步骤 2: 在应用根部包裹 Provider

在 src/index.js 或 src/App.js 的顶层包裹 WebSocketProvider。

修改 src/index.js：

“`javascript
import React from ‘react’;
import ReactDOM from ‘react-dom/client’;
import ‘./index.css’;
import App from ‘./App’;
import { WebSocketProvider } from ‘./contexts/WebSocketContext’; // 导入 Provider

const root = ReactDOM.createRoot(document.getElementById(‘root’));
root.render(

{/ 用 WebSocketProvider 包裹 App 组件 /}




);
“`

步骤 3: 在任何子组件中消费 Context

现在，应用中的任何组件都可以使用 useWebSocketContext Hook 来访问 WebSocket 状态、消息列表和发送消息函数，而无需直接调用 useWebSocket Hook。

例如，修改 src/App.js 来使用 Context：

“`javascript
import React, { useState } from ‘react’;
// import { useWebSocket, ReadyState } from ‘./hooks/useWebSocket’; // 不再直接使用 Hook
import { useWebSocketContext, ReadyState } from ‘./contexts/WebSocketContext’; // 使用 Context Hook
import ‘./App.css’;

function App() {
// const websocketUrl = ‘ws://localhost:8080’; // URL 现在在 Provider 中定义

// 使用 useWebSocketContext Hook
const {
    readyState,
    messages, // 从 Context 中获取全局消息列表
    error, // 从 Context 中获取错误信息
    sendMessage,
    // latestMessage // 如果 Context 没有暴露 latestMessage，这里就不能获取
} = useWebSocketContext();

const [messageInput, setMessageInput] = useState('');
// const [messages, setMessages] = useState([]); // 消息列表现在由 Context 管理

// 消息处理现在主要在 Provider 内部进行

const handleSendClick = () => {
    if (messageInput.trim() !== '') {
        sendMessage(messageInput);
        setMessageInput(''); // 清空输入框
    }
};

const handleInputChange = (event) => {
    setMessageInput(event.target.value);
};

const connectionStatus = {
    [ReadyState.CONNECTING]: 'Connecting...',
    [ReadyState.OPEN]: 'Open',
    [ReadyState.CLOSING]: 'Closing...',
    [ReadyState.CLOSED]: 'Closed',
}[readyState];

return (
    <div className="App">
        <header className="App-header">
            <h1>React WebSocket Chat (via Context)</h1>
            <p>Connection Status: <strong>{connectionStatus}</strong></p>
            {error && <p className="error">WebSocket Error: {error.message || 'Unknown error'}</p>}
        </header>

        <div className="chat-container">
            <div className="messages">
                {messages.map((msg, index) => (
                    // 在实际应用中，如果有唯一ID，应该用ID作为key
                    <p key={index}>{msg}</p>
                ))}
            </div>
            <div className="input-area">
                <input
                    type="text"
                    value={messageInput}
                    onChange={handleInputChange}
                    placeholder="Enter message"
                    disabled={readyState !== ReadyState.OPEN}
                />
                <button
                    onClick={handleSendClick}
                    disabled={readyState !== ReadyState.OPEN || messageInput.trim() === ''}
                >
                    Send
                </button>
            </div>
        </div>
    </div>
);

}

export default App;
“`

现在 App 组件变得更简洁，它不再直接管理 WebSocket 连接和接收到的消息列表，而是通过 useWebSocketContext 从 Context 中获取所需的状态和函数。这使得 WebSocket 功能可以在应用的任何地方轻松访问和共享。

7. 总结

本教程详细介绍了如何在 React 应用中集成 WebSocket。我们从理解 WebSocket 的优势开始，搭建了一个简单的 Node.js WebSocket 服务器，然后重点讲解了如何在 React 中使用自定义 Hook useWebSocket 来管理连接的生命周期、状态和事件。最后，我们展示了如何将 WebSocket 逻辑集成到 React Context API 中，实现全局的 WebSocket 功能共享。

通过封装 WebSocket 逻辑到自定义 Hook 中，我们可以使组件保持简洁和专注于 UI 渲染。结合 Context API，我们可以有效地在大型应用中管理和分发实时数据。

记住，文中提供的 Hook 和服务器示例是基础版本。在生产环境中，你需要考虑更健壮的错误处理、自动重连、心跳机制、消息格式约定、认证授权以及可能的性能优化。但掌握了这些基础知识，你已经为在 React 应用中构建强大的实时功能打下了坚实的基础。

现在，你可以开始在你自己的 React 项目中尝试集成 WebSocket，为你的应用带来实时交互的魔力！

发表评论

您的邮箱地址不会被公开。 必填项已用 * 标注

滚动至顶部