NetCore ajax 实现chatgpt响应消息流式返回

概述

流式返回是指服务器将回复数据作为流逐步返回给客户端，而不是等待全部数据准备就绪后一次性返回。这对于聊天式应用程序非常有用，因为它允许实时更新对话内容，而不需要等待所有回复都准备好后才显示。

通过Ajax和XHRFields，你可以将用户的输入作为请求发送到ChatGPT服务器，然后将服务器返回的回复作为响应返回给客户端。

前端代码

使用Ajax和XHRFields进行与ChatGPT消息的流式返回的代码：

function sendChatMessage(message) {
  $.ajax({
    url: '/Chat',
    type: 'POST',
    data: { userMessage : message },
    xhrFields: {
      onprogress: function(e) {
        // 处理流式返回的数据
        var response = e.target.responseText;
        // 更新UI，显示新的回复
      }
    },
    success: function(data) {
      // 处理最终的响应数据
      var response = JSON.parse(data);
      // 更新UI，显示最终的回复
    },
    error: function() {
      // 处理请求错误
    }
  });
}

// 调用函数发送聊天消息
sendChatMessage("Hello!");

后端代码

使用Azure OpenAI的接口进行调用需要提前引入Azure.AI.OpenAI，关于Azure OpenAI的介绍可参考博文：使用Azure OpenAI服务创建聊天机器人_程序猿老罗的博客-CSDN博客。

using Azure;
using Azure.AI.OpenAI;

接口实现代码仅供参考，具体实现需要根据具体要求来写。

注意需要设置响应的 ContentType = "application/octet-stream"

[Route("[controller]")]
public class OpenAIChatController : ControllerBase
{
	private string apiKey = "";
	private string endpoint = "";
	private string modelName = "";

	private ChatCompletionsOptions completionsOptions;
	public OpenAIChatController()
	{
		completionsOptions = new ChatCompletionsOptions
		{
			Messages =
			{
			new ChatMessage(ChatRole.System, "你是一个精通开发的资深工程师，熟悉全栈技术，任何问题都难不倒你。"),
			new ChatMessage(ChatRole.User, "你好"),
			}
		};
	}

	[HttpPost("Chat")]
	public async Task Chat(string userMessage )
	{
		HttpContext.Response.ContentType = "application/octet-stream";

		var client = new OpenAIClient(new Uri(endpoint), new AzureKeyCredential(apiKey));

		completionsOptions.Messages.Add(new ChatMessage(ChatRole.User, userMessage));//问题

		var completionsResponse = await client.GetChatCompletionsStreamingAsync(modelName, completionsOptions);

		await foreach (var choice in completionsResponse.Value.GetChoicesStreaming())
		{
			await foreach (var message in choice.GetMessageStreaming())
			{
				if (message.Content != null)
				{
					string data = message.Content;
					var bitys = Encoding.UTF8.GetBytes(data);

					await HttpContext.Response.Body.WriteAsync(bitys);
					await HttpContext.Response.Body.FlushAsync(); 

					await Task.Delay(TimeSpan.FromMilliseconds(100));
				}
			}
		}

	}
}

总结

流式返回允许服务器将回复数据分块发送给客户端，使客户端能够实时接收和显示这些数据，从而实现实时更新对话内容的效果。这在聊天式应用程序中非常有用。

通过Ajax和XHRFields配置，你可以发送用户的输入作为请求到ChatGPT服务器，并通过XHRFields的onprogress事件逐步接收和处理服务器返回的回复数据，从而实现流式返回。这样，你可以即时地在客户端上更新对话内容，而无需等待全部回复准备就绪后才显示。这对于实现实时对话功能非常有帮助。