使用React18和WebSocket构建实时通信功能详解

npm install websocket
# 或
yarn add websocket

import { useEffect, useRef, useState } from 'react';
import WebSocketClient from 'websocket';


export function useWebSocket(accessToken: string, requestName: string): SocketType {
  const clientRef = useRef<WebSocketClient | null>(null);
  const [isActive, setIsActive] = useState<boolean>(false);
  const [socketClient, setSockClient] = useState<WebSocketClient | null>(null);
  // 获取url
  let port = window.location.port;
  let wsUrl = '';

  if (window.location.protocol === 'https:') {
    //如果当前是HTTPS加密的，那么使用wss
    if (!port) {
      port = '4174';
    }
    wsUrl = 'wss:';
  } else {
    if (!port) {
      port = '8080';
    }
    wsUrl = 'ws:';
  }
  wsUrl +=
    `//${window.location.hostname}:${port}/api/ws/plugins/${requestName}?token=` +
    accessToken;
  if (!socketClient) {
    setSockClient(new WebSocketClient(wsUrl, isActive)); // 创建 WebSocketClient 实例并传入 URL 和活动状态 isActive
  }

  useEffect(() => {
    clientRef.current = socketClient;
    if (!socketClient?.socket) {
      socketClient?.start(); // 启动WebSocket连接
    }
    return () => {
      socketClient?.close(); // 组件卸载时关闭WebSocket连接
    };
  }, []);

  // 建立 WebSocket 连接
  const connect = () => {
    const client = clientRef.current;

    if (client) {
      client.connect(); // 建立WebSocket连接
    }
  };

  // 关闭 WebSocket 连接
  const close = () => {
    const client = clientRef.current;

    if (client) {
      client.close(); // 关闭WebSocket连接
    }
  };

  // 订阅消息处理程序
  const subscribe = (handler: MessageHandler) => {
    const client = clientRef.current;

    setIsActive(true);
    if (client) {
      client.subscribe(handler);
    }
  };

  // 取消订阅消息
  const unsubscribe = () => {
    const client = clientRef.current;

    if (client && isActive) {
      setIsActive(false);
      client.unsubscribe();
    }
  };

  // 发送消息
  const send = (message: string) => {
    const client = clientRef.current;

    if (client && client.socket?.readyState === WebSocket.OPEN) {
      client.send(message); // 发送消息
    } else if (client && client.socket?.readyState === WebSocket.CLOSED) {
      // WebSocket连接未建立或已关闭，需要重新建立连接
      client.connect(); // 建立WebSocket连接
    }
  };

  return { connect, close, subscribe, unsubscribe, send };
}

import React, { useContext, useEffect } from 'react';
import { useWebSocket } from './useWebSocket';

const WebSocketContext = React.createContext();

export const useWebSocketContext = () => {
  return useContext(WebSocketContext);
};

export const WebSocketProvider = ({ children, accessToken }) => {
  const webSocket = useWebSocket(accessToken);

  useEffect(() => {
    webSocket.connect();

    return () => {
      webSocket.close();
    };
  }, [webSocket]);

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

import React from 'react';
import { useWebSocketContext } from './WebSocketProvider';

function ChatComponent() {
  const webSocket = useWebSocketContext();

  const sendMessage = () => {
    if (webSocket) {
      webSocket.send('Hello, WebSocket!');
    }
  };

  return (
    <div>
      <button onClick={sendMessage}>Send Message</button>
    </div>
  );
}

export default ChatComponent;

import React from 'react';
import ChatComponent from './ChatComponent';
import { WebSocketProvider } from './WebSocketProvider';

function RealTimeChatApp() {
  const accessToken = 'your_access_token'; // 替换为你的访问令牌

  return (
    <WebSocketProvider accessToken={accessToken}>
      <div>
        <h1>Real Time Chat App</h1>
        <ChatComponent />
      </div>
    </WebSocketProvider>
  );
}

export default RealTimeChatApp;

import React from 'react';
import { useWebSocketContext } from './WebSocketProvider';
function ChatComponent() {
  const webSocket = useWebSocketContext();
  const [messages, setMessages] = React.useState([]);
  const [newMessage, setNewMessage] = React.useState('');

  React.useEffect(() => {
    const messageHandler = (message) => {
      setMessages((prevMessages) => [...prevMessages, message]);
    };
    webSocket.subscribe(messageHandler);

    return () => {
      webSocket.unsubscribe();
    };
  }, [webSocket]);

  const sendMessage = () => {
    if (webSocket) {
      webSocket.send(newMessage);
      setNewMessage('');
    }
  };

  return (
    <div>
      <div>
        {messages.map((message, index) => (
          <div key={index}>{message}</div>
        ))}
      </div>
      <div>
        <input
          type="text"
          value={newMessage}
          onChange={(e) => setNewMessage(e.target.value)}
        />
        <button onClick={sendMessage}>Send</button>
      </div>
    </div>
  );
}

export default ChatComponent;