当前位置：首页 > news >正文

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

news 来源：原创 2025/4/26 20:08:11

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>