使用 react + webSocket 封装属于自己的hooks组件

1、描述：

复制代码

平时前端请求后端除了http请求，用的最多的就是webSocket了，它可以解决http请求不能双向通信的问题，解决有些场景下http请求需要不断轮询请求的问题。尤其是聊天，客服推消息等场景比较实用。

2、功能：

arduino 复制代码

使用 react + webSocket 封装成hooks，主要功能方法包括：连接connect，断开连接disconnect，发送信息sendMessage，获取的信息messages，是否连接isConnected

3、下面是封装的useWebSocket完整代码：

ini 复制代码

import { useEffect, useRef, useState, useCallback } from 'react';

export function useWebSocket() {
  const [isConnected, setIsConnected] = useState(false);
  const [messages, setMessages] = useState([]);
  const webSocketRef = useRef(null);

  const connect = url => {
    // 如果已经连接，则不再创建新连接
    if (
      webSocketRef.current &&
      webSocketRef.current.readyState === WebSocket.OPEN
    ) {
      return;
    }

    console.log('connect-url', url);

    // 创建 WebSocket 连接
    webSocketRef.current = new WebSocket(url);

    // 连接打开时的处理
    webSocketRef.current.onopen = () => {
      setIsConnected(true);
      console.log('WebSocket connected');
    };

    // 接收到消息时的处理
    webSocketRef.current.onmessage = event => {
      try {
        const message = JSON.parse(event.data);
        setMessages(message);
        console.log('收到信息', message);
      } catch (error) {
        console.error('Error parsing message:', error);
      }
    };

    // 连接关闭时的处理
    webSocketRef.current.onclose = () => {
      setIsConnected(false);
      console.log('WebSocket disconnected');
    };

    // 错误处理
    webSocketRef.current.onerror = error => {
      console.error('WebSocket error:', error);
      setIsConnected(false);
    };
  };

  const disconnect = useCallback(() => {
    console.log('点击关闭');
    if (webSocketRef.current) {
      webSocketRef.current.close();
    }
  }, []);

  const sendMessage = useCallback(message => {
    console.log('发送信息', message);
    if (
      webSocketRef.current &&
      webSocketRef.current.readyState === WebSocket.OPEN
    ) {
      webSocketRef.current.send(JSON.stringify(message));
    }
  }, []);

  // 组件卸载时自动关闭连接
  useEffect(() => {
    return () => {
      disconnect();
    };
  }, [disconnect]);

  return {
    isConnected,
    messages,
    connect,
    disconnect,
    sendMessage,
  };
}

4、使用实例

scss 复制代码

import { useWebSocket } from './js/useWebSocket.jsx';

const { isConnected, messages, connect, disconnect, sendMessage } =
    useWebSocket(); // 使用自定义 hook

// 是否连接，断开连接
if (isConnected) disconnect();

// 建立连接
connect("wss://172.16.1.112:10000/api/smartassistfront/authless/smart_websocket?token=111");

// 收到消息
useEffect(() => {
    if (isConnected && messages) {
      console.log('qqqqqqqqqmessages', messages);
    }
}, [messages]);

// 发送消息
sendMessage("发送服务器消息")

5、总结

webSocket使用还是比较多的，封装好以后使用更加方便