当前位置：首页 > news >正文

WHAT - useWebSocket 推荐

news 2025/5/30 15:53:28

文章目录

什么是 useWebSocket？
常用库推荐
示例：使用 react-use-websocket
- 1. 安装依赖
- 2. 基本使用示例
如果你想自定义 useWebSocket Hook
适合的使用场景

在 WHAT - 学习 WebSocket 实时 Web 开发中我们知道：

推荐前端封装 WebSocket hook：如 useWebSocket Hook 在 React 项目中使用。

useWebSocket 是一个在 React 项目中封装 WebSocket 连接的 Hook，让 WebSocket 的使用更符合 React 的思维方式（组件化、响应式）。

什么是 useWebSocket？

它是一种自定义 Hook，可以：

管理连接状态（连接中、已连接、已断开）
发送和接收消息
支持自动重连、心跳机制
在 React 生命周期内自动清理连接

常用库推荐

名称	特点
`react-use-websocket`	功能全面、使用简单、支持重连、心跳、发送 JSON
自定义 `useWebSocket`	可根据自己项目封装，灵活控制逻辑

示例：使用 react-use-websocket

1. 安装依赖

npm install react-use-websocket

2. 基本使用示例

import useWebSocket, { ReadyState } from 'react-use-websocket';const Chat = () => {const { sendMessage, lastMessage, readyState } = useWebSocket('ws://localhost:3000', {onOpen: () => console.log('WebSocket connected!'),onClose: () => console.log('WebSocket disconnected!'),shouldReconnect: () => true, // 自动重连});const connectionStatus = {[ReadyState.CONNECTING]: '连接中',[ReadyState.OPEN]: '已连接',[ReadyState.CLOSING]: '正在关闭',[ReadyState.CLOSED]: '已关闭',[ReadyState.UNINSTANTIATED]: '未初始化',}[readyState];return (<div><p>连接状态：{connectionStatus}</p><button onClick={() => sendMessage('你好 WebSocket!')}>发送消息</button><p>收到消息：{lastMessage?.data}</p></div>);
};

如果你想自定义 useWebSocket Hook

你也可以手动封装一个简化版的：

import { useEffect, useRef, useState } from 'react';export function useWebSocket(url: string) {const ws = useRef<WebSocket | null>(null);const [messages, setMessages] = useState<string[]>([]);useEffect(() => {ws.current = new WebSocket(url);ws.current.onmessage = (e) => {setMessages((prev) => [...prev, e.data]);};return () => {ws.current?.close();};}, [url]);const sendMessage = (msg: string) => {ws.current?.send(msg);};return { messages, sendMessage };
}