.NET 8 Blazor Server移除DOM后MJPEG连接未关闭的原因

我在使用.NET 8 Blazor Server开发组件，通过<img>标签加载MJPEG流式视频。组件逻辑如下：

• 当isStreaming为true时渲染img标签，src指向MJPEG流地址
• 点击按钮触发CloseStream方法，尝试关闭流连接

两种不同的实现导致了不同的结果：

1. 仅清空streamUrl并调用StateHasChanged：连接正常关闭，浏览器中不再显示流
2. 先设置isStreaming = false再调用StateHasChanged：img标签从DOM中移除，但MJPEG连接仍保持开启

组件代码片段：

@if (isStreaming)
{
    <img src="@streamUrl" />
}

private void CloseStream()
{
    // 情况1：仅清空URL
    streamUrl = String.Empty;
    StateHasChanged();

    // 情况2：先隐藏元素再更新状态
    // streamUrl = String.Empty;
    // isStreaming = false;
    // StateHasChanged();
}

protected override async Task OnInitializedAsync()
{
    streamUrl = "https://examplestream"; // MJPEG流地址
}

父组件调用方式：

@rendermode InteractiveServer
@attribute [StreamRendering]

<StreamComponent stream="@clickedstream" @key="@clickedstream"></StreamComponent>

原因分析 #

核心差异在于浏览器对img元素的两种操作行为不同：

• 修改src属性为空：浏览器会立即终止该img对应的所有活跃HTTP请求（包括MJPEG的长连接）。因为src变化意味着要加载新资源，浏览器会主动中断旧连接。
• 从DOM中移除img元素：对于已经建立的MJPEG长连接，浏览器不会主动立即终止。MJPEG是持续流式传输的无限资源，浏览器会等待连接自然结束（但服务器不会主动关闭），因此连接会一直保持。

此外，Blazor Server的DOM更新是通过SignalR异步发送指令到浏览器，元素移除的时机存在延迟，进一步导致连接无法及时终止。

解决方法 #

要确保MJPEG连接被可靠终止，需先触发浏览器中断连接，再隐藏元素：

修改CloseStream方法，先清空streamUrl让浏览器终止连接，再设置isStreaming = false隐藏元素：

private void CloseStream()
{
    // 第一步：清空src，触发浏览器终止连接
    streamUrl = String.Empty;
    StateHasChanged();
    // 第二步：隐藏元素
    isStreaming = false;
    StateHasChanged();
}

或者简化为单次状态更新（Blazor会自动合并渲染批次）：

private void CloseStream()
{
    streamUrl = String.Empty;
    isStreaming = false;
    StateHasChanged();
}

这种情况下，Blazor会先更新img的src为空（触发浏览器终止连接），再移除img元素，从而避免连接残留。

额外说明 #

如果父组件使用了@key属性，当clickedstream变化时，Blazor会销毁旧的StreamComponent实例并创建新实例。此时若要确保旧实例的连接被终止，可在组件中实现IDisposable接口，在销毁时主动处理：

public void Dispose()
{
    streamUrl = String.Empty;
    StateHasChanged();
}

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