C#通过SignalR直接返回流式响应内容

news/2025/3/20 20:06:12/

1、背景

实现流式响应基本上分为两大技术方案：（1）基于HTTP的Stream处理；（2）基于socket的连接。前者的实现方式有：《C#通过API接口返回流式响应内容—SSE方式》和《C#通过API接口返回流式响应内容—分块编码方式》。后者有：《C#通过API接口返回流式响应内容—SignalR方式》。
在上一篇的SignalR文章中，本质上还是是用socket发消息的功能，但实际上SignalR本身也是支持流式处理的。本篇阐述通过SignalR直接返回流式内容。并且个人认为比较适合DeepSeek的流式响应的。

2、效果

在这里插入图片描述

3、具体代码

3.1 服务器端的代码

新创建一个StreamHub，实现Hub功能
在这里插入图片描述
具体代码如下：

using Microsoft.AspNetCore.SignalR;
using System.Threading.Channels;namespace SignalRHub.Hubs
{public class StreamHub:Hub{public ChannelReader<string> DeepSeekStream(string inputStr,CancellationToken cancellationToken){var channel = Channel.CreateUnbounded<string>();_ = WriteItemsAsync(channel.Writer, inputStr, cancellationToken);return channel.Reader;}//将返回的内容写入到流中private async Task WriteItemsAsync(ChannelWriter<string> writer,string inputStr,CancellationToken cancellationToken){Exception localException = null;try{//模拟deepseek的对话内容var phrases = new string[] { "你好！", "我是", "北京清华长庚医院", "信息管理部的", "郑林" };foreach (var item in phrases){await writer.WriteAsync(item, cancellationToken);await Task.Delay(1000, cancellationToken);}}catch (Exception ex){localException = ex;}finally{writer.Complete(localException);}}}
}

3.2 前端代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>SignalR Client</title><script src="https://cdnjs.cloudflare.com/ajax/libs/microsoft-signalr/3.1.18/signalr.min.js"></script>
</head>
<body><h3>流式响应</h3><div id="stockPrices"></div><script>const stockPricesDiv = document.getElementById("stockPrices");stockPricesDiv.addEventListener("click", (event) =>{sendMsgAndReturnStream("Hello");});const connection = new signalR.HubConnectionBuilder().withUrl("http://localhost:5071/dsstream").configureLogging(signalR.LogLevel.Information).build();async function start() {try {await connection.start().then(() => {sendMsgAndReturnStream("Hello");});console.log("SignalR Connected.");} catch (err) {console.log(err);setTimeout(start, 5000);}};connection.onclose(async () => {await start();});// Start the connection.start();function sendMsgAndReturnStream(msg){connection.stream("DeepSeekStream", msg).subscribe({next: (item) => {stockPricesDiv.innerHTML+= item +'&nbsp;'; },complete: () => {stockPricesDiv.innerHTML+= "已完成"; },error: (err) => {stockPricesDiv.innerHTML+= "异常"+err; },});}</script>
</body>
</html>