.Net Core WebApi + signalR + React + Typescript实现录音功能

在React和TypeScript中使用SignalR实现录音功能，你可以遵循以下步骤：

1. 创建.NET Core SignalR Hub

在.NET Core项目中，创建一个新的SignalR Hub：

using Microsoft.AspNetCore.SignalR;
using System.Threading.Tasks;

public class AudioHub : Hub
{
    public async Task SendAudio(byte[] audioData)
    {
        // 在这里处理接收到的音频数据
    }
}

在Startup.cs文件中注册此Hub：

public void ConfigureServices(IServiceCollection services)
{
    services.AddSignalR();
    //...
}

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    app.UseEndpoints(endpoints =>
    {
        endpoints.MapHub<AudioHub>("/audiohub");
    });
    //...
}

2. 在React + TypeScript中实现录音并通过SignalR发送音频数据

首先，安装@microsoft/signalr和react-mic：

npm install @microsoft/signalr react-mic

然后，在React组件中导入它们，并实现录音和发送音频数据的逻辑：

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

const App: React.FC = () => {
  const [connection, setConnection] = useState(null);
  const [isRecording, setIsRecording] = useState(false);

  useEffect(() => {
    const newConnection = new HubConnectionBuilder()
      .withUrl('http://localhost:5000/audiohub') // 替换为你的SignalR服务端URL
      .configureLogging(LogLevel.Information)
      .build();

    setConnection(newConnection);
  }, []);

  useEffect(() => {
    if (connection) {
      connection.start()
        .then(result => {
          console.log('Connected to SignalR Hub!');
        })
        .catch(e => console.log('Connection failed: ', e));
    }
  }, [connection]);

  const startRecording = () => {
    setIsRecording(true);
  }

  const stopRecording = () => {
    setIsRecording(false);
  }

  const onData = (recordedBlob: any) => {
    console.log('chunk of real-time data is: ', recordedBlob);
  }

  const onStop = (recordedBlob: any) => {
    console.log('recordedBlob is: ', recordedBlob);
    if (connection) {
      connection.invoke('SendAudio', recordedBlob.blob)
        .catch(err => console.error(err.toString()));
    }
  }

  return (
    <div>
      <button onClick={startRecording} type="button">Start</button>
      <button onClick={stopRecording} type="button">Stop</button>
      <ReactMic
        record={isRecording}
        className="sound-wave"
        onStop={onStop}
        onData={onData}
        strokeColor="#000000"
        backgroundColor="#FF4081" />
    </div>
  );
};

export default App;

在这个例子中，我们使用了react-mic库来简化音频录制的过程。当用户点击“开始录音”按钮时，我们会启动音频录制。当用户点击“停止录音”按钮时，我们会停止录制，并将音频数据发送到服务器。

请注意，你需要将http://localhost:5000/audiohub替换为你自己的SignalR服务器URL。

以上只是一个基本示例，你可能需要根据你的具体需求进行调整。