React 18使用websocket，在React封装websocket，在React中使用WebSocket

原创

已于 2025-02-25 11:52:31 修改 · 816 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #websocket #前端

于 2025-02-14 17:31:20 首次发布

在业务中使用WebSocket是很常见的需求，但是原生WebSocket使用太过复杂，本文将介绍如何在ahooks3.0库 useWebSocket() hook的基础上再次封装，达到app只使用一个WebSocket链接进行通信的目的。

1. src/contexts/WebSocketContext.tsx

import type { ReadyState } from "ahooks/es/useWebSocket"
import { createContext, useContext } from "react"

export interface WebSocketContext {
  sendMessage: (message: string | object) => void
  readyState: ReadyState
  lastMessage: MessageEvent<any> | null
  connect: () => void
  disconnect: () => void
  webSocketIns: WebSocket | null
}

export const WebSocketContext = createContext<WebSocketContext>({} as WebSocketContext)

export const useWebSocketContext = () => useContext(WebSocketContext)

2. src/providers/WebSocketProvider.tsx

import { WebSocketContext } from "@/contexts/WebSocketContext"
import { useWebSocketHeartbeat } from "@/hooks/useWebSocketHeartbeat"
import { useWebSocket }