Semantic Kernel 中的流式输出SSE与Vue3前端接收示例

本文主要是介绍Semantic Kernel 中的流式输出SSE与Vue3前端接收示例,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

本文将介绍如何在使用 Semantic Kernel 框架的 ASP.NET 项目中使用流式输出 SSE(Server-Sent Events),并展示如何在Vue3前端应用中接收这些数据。并介绍了如何使用 @microsoft/fetch-event-source 库使用 POST 方法来接收 SSE 数据。

1. 背景

在大模型的应用场景中,用户经常需要与模型进行实时交互,例如,生成文本、回答问题等。这些场景要求数据传输能够快速且连续,以提供流畅的用户体验。SSE作为一种基于HTTP的标准协议,允许服务器向客户端推送实时数据,非常适合于此类应用。

2. 什么是 SSE

SSE 并不是一种新的技术,但是随着 ChatGPT 的火热,这种技术又重新受到了关注。

SSE(Server-Sent Events)是一种基于 HTTP 的服务器推送技术,允许服务器实时向客户端推送数据。与 WebSocket 不同,SSE 是单向通信,只能由服务器向客户端推送数据,而客户端无法向服务器发送数据。SSE 使用简单,易于实现,适用于需要实时数据推送的场景。

SSE 的工作原理是,客户端通过 EventSource 对象与服务器建立连接,服务器端通过发送特定格式的数据(如 data: Hello, world!\n\n)来推送消息给客户端。客户端收到消息后,可以通过监听 message 事件来处理数据。

3. 在 Semantic Kernel 中使用 SSE

如果要使用 SSE,首先需要在 ASP.NET 项目正确的引入 Semantic Kernel,并在控制器中添加 SSE 的处理逻辑。

3.1. 引入 Semantic Kernel

以下是 Program.cs 中引入 Semantic Kernel 的相关代码,这里以 Azure OpenAI 做演示:

using Microsoft.SemanticKernel;var builder = WebApplication.CreateBuilder(args);
// ··· 略去其他代码
// 添加语义内核
builder.Services.AddKernel();
builder.Services.AddOpenAIChatCompletion("gpt-4o", new OpenAIClient(new Uri("https://[your-gpt].openai.azure.com/"), new Azure.AzureKeyCredential("[your-key]")));
// ··· 略去其他代码

3.2. 控制器中添加 SSE 处理逻辑

在控制器中添加 SSE 处理逻辑,需要使用 KernelInvokePromptStreamingAsyncInvokeStreamingAsync 方法来获取模型的流式结果输出,并将输出推送给客户端。

示例代码如下:

using Sang.AspNetCore.CommonLibraries.Models;[HttpPost("test")]
[Produces("text/event-stream")]
public async Task<IResult> SSETest()
{var content = _kernel.InvokePromptStreamingAsync("什么是快乐星球?");Response.Headers.ContentType = "text/event-stream";Response.Headers.CacheControl = "no-cache";await Response.Body.FlushAsync();if (content is null){var error = JsonSerializer.Serialize(MessageModel<string>.Fail("生成失败"), _jsonSerializerOptions);await Response.WriteAsync($"data: {error}\n\n");await Response.Body.FlushAsync();}else{await foreach (var item in content){await Response.WriteAsync($"data: {MessageModel<string>.Ok(item.ToString())}\n\n");await Response.Body.FlushAsync();}}// 结束标记await Response.WriteAsync($"data: [DONE]\n\n");await Response.Body.FlushAsync();return Results.Empty;
}

在上面额代码中,我们使用 InvokePromptStreamingAsync 方法获取模型的流式输出,并通过 Response.WriteAsync 方法将输出推送给客户端。每个完整数据包后跟随两个换行符(\n\n),这是SSE协议的要求。在客户端接收到 [DONE] 标记后,表示数据传输结束。这里的 MessageModel 是一个自定义的消息模型,可以安装 Sang.AspNetCore.CommonLibraries 包来使用,每个数据包(message)都是一个完整的 json 数据,方便解析。下图是测试结果:

在这里插入图片描述

4. 前端接收

在Vue3应用中,我们可以使用 EventSource 接口或者第三方库来接收SSE数据。对于原生使用和 EventSource 的更多信息,请参考 MDN 文档。

这里,我们将使用 @microsoft/fetch-event-source 库来演示如何接收服务器发送的数据。

首先,安装 @microsoft/fetch-event-source 库:

npm install @microsoft/fetch-event-source

然后,在Vue组件中,我们可以这样接收数据:

import { ref } from 'vue';
import { fetchEventSource } from '@microsoft/fetch-event-source';const dataStream = ref('');const fetchDataStream = () => {fetchEventSource('/test', {method: 'POST',headers: {"Content-Type": 'application/json',},body: JSON.stringify({ /* 请求体 */ }),onmessage(event) {if (event.data === '[DONE]') {console.log('Stream ended');return;}let data = JSON.parse(event.data);dataStream.value += data.data;// 更新UI等操作},onerror(error) {console.error('Stream encountered error:', error);}});
};

在上面的代码中,我们使用fetchEventSource方法订阅了服务器端的SSE。每当服务器发送新的数据时,onmessage回调就会被触发,我们可以在这里更新Vue组件的状态,以实现数据的实时展示。

注意,这里演示使用的是 POST 请求,在这个案例中直接将服务端和接收端使用 GET 请求也是可以的。但是默认浏览器 EventSource API 对允许发出的请求类型施加了一些限制作,其中就包括不允许使用 POST 请求。因此,如果需要使用 POST 请求,可以使用 @microsoft/fetch-event-source 库。具体的更多信息可以参考 GitHub 仓库 Azure/fetch-event-source。

5. 结语

SSE提供了一种高效、简单的方法,允许服务器向客户端推送实时数据。通过结合Semantic Kernel和Vue3,我们可以构建出能够实时响应大模型推理结果的Web应用,从而提供更加流畅和动态的用户体验。希望本文所介绍的内容能够帮助到你,欢迎留言讨论。

这篇关于Semantic Kernel 中的流式输出SSE与Vue3前端接收示例的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1069535

相关文章

SpringBoot中SM2公钥加密、私钥解密的实现示例详解

《SpringBoot中SM2公钥加密、私钥解密的实现示例详解》本文介绍了如何在SpringBoot项目中实现SM2公钥加密和私钥解密的功能,通过使用Hutool库和BouncyCastle依赖,简化... 目录一、前言1、加密信息(示例)2、加密结果(示例)二、实现代码1、yml文件配置2、创建SM2工具

MySQL 定时新增分区的实现示例

《MySQL定时新增分区的实现示例》本文主要介绍了通过存储过程和定时任务实现MySQL分区的自动创建,解决大数据量下手动维护的繁琐问题,具有一定的参考价值,感兴趣的可以了解一下... mysql创建好分区之后,有时候会需要自动创建分区。比如,一些表数据量非常大,有些数据是热点数据,按照日期分区MululbU

Python函数作用域示例详解

《Python函数作用域示例详解》本文介绍了Python中的LEGB作用域规则,详细解析了变量查找的四个层级,通过具体代码示例,展示了各层级的变量访问规则和特性,对python函数作用域相关知识感兴趣... 目录一、LEGB 规则二、作用域实例2.1 局部作用域(Local)2.2 闭包作用域(Enclos

C++20管道运算符的实现示例

《C++20管道运算符的实现示例》本文简要介绍C++20管道运算符的使用与实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧... 目录标准库的管道运算符使用自己实现类似的管道运算符我们不打算介绍太多,因为它实际属于c++20最为重要的

Java中调用数据库存储过程的示例代码

《Java中调用数据库存储过程的示例代码》本文介绍Java通过JDBC调用数据库存储过程的方法,涵盖参数类型、执行步骤及数据库差异,需注意异常处理与资源管理,以优化性能并实现复杂业务逻辑,感兴趣的朋友... 目录一、存储过程概述二、Java调用存储过程的基本javascript步骤三、Java调用存储过程示

ModelMapper基本使用和常见场景示例详解

《ModelMapper基本使用和常见场景示例详解》ModelMapper是Java对象映射库,支持自动映射、自定义规则、集合转换及高级配置(如匹配策略、转换器),可集成SpringBoot,减少样板... 目录1. 添加依赖2. 基本用法示例:简单对象映射3. 自定义映射规则4. 集合映射5. 高级配置匹

C++11作用域枚举(Scoped Enums)的实现示例

《C++11作用域枚举(ScopedEnums)的实现示例》枚举类型是一种非常实用的工具,C++11标准引入了作用域枚举,也称为强类型枚举,本文主要介绍了C++11作用域枚举(ScopedEnums... 目录一、引言二、传统枚举类型的局限性2.1 命名空间污染2.2 整型提升问题2.3 类型转换问题三、C

Java实现自定义table宽高的示例代码

《Java实现自定义table宽高的示例代码》在桌面应用、管理系统乃至报表工具中,表格(JTable)作为最常用的数据展示组件,不仅承载对数据的增删改查,还需要配合布局与视觉需求,而JavaSwing... 目录一、项目背景详细介绍二、项目需求详细介绍三、相关技术详细介绍四、实现思路详细介绍五、完整实现代码

前端如何通过nginx访问本地端口

《前端如何通过nginx访问本地端口》:本文主要介绍前端如何通过nginx访问本地端口的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、nginx安装1、下载(1)下载地址(2)系统选择(3)版本选择2、安装部署(1)解压(2)配置文件修改(3)启动(4)

C++ 检测文件大小和文件传输的方法示例详解

《C++检测文件大小和文件传输的方法示例详解》文章介绍了在C/C++中获取文件大小的三种方法,推荐使用stat()函数,并详细说明了如何设计一次性发送压缩包的结构体及传输流程,包含CRC校验和自动解... 目录检测文件的大小✅ 方法一:使用 stat() 函数(推荐)✅ 用法示例:✅ 方法二:使用 fsee