概述
流式返回是指服务器将回复数据作为流逐步返回给客户端,而不是等待全部数据准备就绪后一次性返回。这对于聊天式应用程序非常有用,因为它允许实时更新对话内容,而不需要等待所有回复都准备好后才显示。
通过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事件逐步接收和处理服务器返回的回复数据,从而实现流式返回。这样,你可以即时地在客户端上更新对话内容,而无需等待全部回复准备就绪后才显示。这对于实现实时对话功能非常有帮助。