如何在使用密钥登录的时候请求ChatGPT的聊天接口并实现流式输出

芋圆不想圆

已于 2023-05-25 16:45:53 修改

阅读量1.7k

点赞数 4

CC 4.0 BY-SA版权

于 2023-05-24 21:05:51 首次发布

本文链接：https://blog.csdn.net/m0_52900946/article/details/130854685

本文介绍了如何利用OpenAI的ChatGPTAPI实现流式输出，通过设置stream参数为true进行SSE（服务器推送事件）通信，处理非标准JSON格式的数据，并展示具体的JavaScript代码示例，展示如何解析和展示聊天回复。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、`ChatGPT`的参考`API`地址

API Reference

二、官网相关`API`介绍

下图是正常请求时候的请求头和body体，这样请求的话是等结果都加载出来后一起出现，并且返回的结果也是标准的json格式。
在这里插入图片描述
如果想要实现和ChatGPT一样的效果，官网的这样推荐的，如下图

从上图可以看到它用的是sse实现的，并且请求的body体加上Stream:true就可以。请求过来的格式可以看到不是标准的json格式，如下图，所以我们要处理成json格式，并拿到数据
流式输出body体
请求结果

三、具体实现代码

我们要怎么拿到数据并实现流式输出，具体代码如下：

// 发送消息的方法
// 参数 content 是发送的消息
function sendAnswer(content) {
   
   
    // 请求的body体
    const data = JSON.stringify({
   
   
      model: 'gpt-3.5-turbo',
      messages: [{
   
    role: 'user', content: content }],
      stream: true
    })
    fetch('https://api.openai.com/v1/chat/completions', {
   
   
      method: 'POST',
     // 这个headers包括 "Content-Type"："application/json" 和 "Authorization", `Bearer ${key}`
     // 其中这个key是你的登录密钥
      headers: headers