.NET 8 Blazor Web App（Auto渲染模式）：WASM组件调用服务器服务方案问询

1. 混合渲染：用服务器端组件封装服务调用 #

在Auto渲染模式下，把需要调用高性能服务的逻辑封装成服务器端交互组件，然后在WASM客户端组件中直接引用它。服务器端组件可以直接注入你的服务实例，执行对外部可执行文件的操作，再将结果传递给客户端，全程基于Blazor组件模型，不用额外写API。

示例代码：

• 服务器端组件ExternalServiceExecutor.razor：

@rendermode InteractiveServer
@inject IExternalService ExternalService

@if (!string.IsNullOrEmpty(_operationResult))
{
    <p>操作结果：@_operationResult</p>
}

@code {
    private string? _operationResult;

    // 暴露给客户端调用的方法
    public async Task RunHeavyOperation()
    {
        _operationResult = await ExternalService.Execute();
        StateHasChanged();
    }
}

• WASM客户端组件引用：

@rendermode InteractiveWebAssembly
<ExternalServiceExecutor @ref="_executor" />

<button @onclick="TriggerOperation">执行高性能操作</button>

@code {
    private ExternalServiceExecutor? _executor;

    private async Task TriggerOperation()
    {
        if (_executor != null)
        {
            await _executor.RunHeavyOperation();
        }
    }
}

这种方式完全复用Blazor的渲染机制，服务代码不会暴露到WASM客户端，也不用额外维护API接口。

2. 用SignalR强类型Hub实现原生通信 #

SignalR是Blazor内置的双向通信机制，你可以通过强类型Hub在客户端和服务器之间建立调用通道，服务器端注入服务执行操作，客户端通过Hub代理调用，全程不需要编写传统API。

步骤：

1. 客户端定义Hub接口（仅暴露调用方法，不包含实现）：

public interface IExternalServiceHub
{
    Task<string> ExecuteHeavyOperation();
}

2. 服务器端实现Hub：

public class ExternalServiceHub : Hub<IExternalServiceHub>
{
    private readonly IExternalService _externalService;

    public ExternalServiceHub(IExternalService externalService)
    {
        _externalService = externalService;
    }

    public async Task<string> ExecuteHeavyOperation()
    {
        return await _externalService.Execute();
    }
}

3. 服务器端注册Hub：

// Program.cs
builder.Services.AddSignalR();
app.MapHub<ExternalServiceHub>("/external-service-hub");

4. WASM客户端注入并调用：

// 客户端Program.cs
builder.Services.AddSignalR()
    .AddHubConnectionBuilder()
    .WithUrl(builder.HostEnvironment.BaseAddress + "external-service-hub");

// 客户端组件中使用
@inject HubConnection HubConnection

<button @onclick="RunOperation">执行操作</button>
<p>结果：@_result</p>

@code {
    private string? _result;

    private async Task RunOperation()
    {
        _result = await HubConnection.InvokeAsync<string>("ExecuteHeavyOperation");
    }
}

这种方式是Blazor原生的通信方案，相比手动写API更轻量，服务代码完全隔离在服务器端，不会被WASM打包。

内容的提问来源于stack exchange，提问作者Manuel