ReactJS中的SignalR -在不同组件中使用相同的hubConnection

import React, { useEffect, useState } from 'react';
import { HubConnectionBuilder } from '@microsoft/signalr';

const MyComponent = () => {
  const [connection, setConnection] = useState(null);
  const [message, setMessage] = useState('');

  useEffect(() => {
    const hubConnection = new HubConnectionBuilder()
      .withUrl('/chatHub') // SignalR服务器的URL
      .build();

    setConnection(hubConnection);

    hubConnection.start()
      .then(() => console.log('SignalR连接成功'))
      .catch(err => console.error('SignalR连接失败：', err));

    hubConnection.on('ReceiveMessage', (user, msg) => {
      console.log(`收到来自${user}的消息：${msg}`);
    });

    return () => {
      hubConnection.off('ReceiveMessage');
      hubConnection.stop();
    };
  }, []);

  const sendMessage = () => {
    connection.invoke('SendMessage', 'User1', message)
      .then(() => setMessage(''))
      .catch(err => console.error('发送消息失败：', err));
  };

  return (
    <div>
      <input type="text" value={message} onChange={e => setMessage(e.target.value)} />
      <button onClick={sendMessage}>发送消息</button>
    </div>
  );
};

export default MyComponent;