本文正在参与✍技能视角深化 ChatGPT 征文活动

往期文章

怎么搭建归于自己的ChatGPT运用（一）经过Docker搞定gpt-3.5 API – ()
怎么搭建归于自己的ChatGPT运用（二）运用Express转发GPT3.5 API – ()

前言

本文将在项目中描绘怎么经过Axios和EventSource接入GPT3.5 API，处理返回数据

经过5分钟阅读，10分钟实践掌握解决方案。

GPT3.5 API运用了EventStream来发送成果。当你向API发送恳求时，API会将成果作为EventStream的一系列事情（event）返回。这种方法能够让API向客户端实时推送成果，而且能够节约网络带宽，因为不需求在每次成果准备好后都发送一个完好的HTTP呼应。相反，API能够将成果分红多个事情，每个事情都是一个片段，而且每个片段都包含最新的成果。

EventStream

介绍

EventStream 是一种 Web 技能，它答应服务器向客户端推送数据，以完成实时通讯和更新。它是根据 HTTP 协议的一种轻量级的长衔接技能，经过耐久化衔接来传输数据，能够避免频繁地创立和关闭衔接，然后削减网络流量和服务器负载。

EventStream 运用简略，只需求在服务器端生成一个输出流，然后在客户端经过 JavaScript 中的 EventSource 对象来监听这个流即可。当服务器端有新数据可用时，它会主动推送给客户端，然后完成实时通讯和更新。

用处

EventStream 广泛运用于 Web 运用程序中，首要用于完成实时通讯和更新，包含以下几个方面：

  1. 实时数据更新：当服务器端有新的数据可用时，能够运用 EventStream 将这些数据推送给客户端，然后完成实时数据更新，例如在线聊天、实时监控等运用场景。
  2. 增量更新：运用 EventStream 能够仅发送有变化的数据，然后削减网络流量和服务器负载，特别是在处理大量数据时愈加显着，例如金融行情、股票报价等运用场景。
  3. 音讯告诉：运用 EventStream 能够完成音讯告诉功能，当有新的音讯抵达时能够当即告诉客户端，例如电子邮件、社交网络等运用场景。
  4. 服务器监控：运用 EventStream 能够实时监控服务器的状态和性能，例如 CPU 运用率、内存运用率、网络流量等目标。

EventSource

EventSource是一个根据HTTP协议的API，它答应浏览器经过一个耐久化的HTTP衔接来接收来自服务器的事情流。这个API现已被广泛运用于客户端与服务器之间的实时通讯，特别是在Web运用程序中。

用处

EventSource 用于完成服务器向客户端推送实时数据的功能。当客户端与服务器树立一个EventSource衔接后，服务器会定时地向客户端发送事情流，而客户端则能够经过监听事情流的方法获取最新的数据。这种方法比起轮询来说，愈加高效，能够削减网络带宽的运用，一起也能够降低服务器的负载。

示例代码

以下是一个运用EventSource的示例代码，它演示了怎么向客户端发送实时的数据：

const eventSource = new EventSource('/events');
eventSource.onopen = function() {
  console.log('衔接现已树立');
};
eventSource.onmessage = function(event) {
  console.log('收到新的音讯：', event.data);
};
eventSource.onerror = function() {
  console.log('衔接产生过错');
};

在上面的代码中，咱们首要创立了一个EventSource对象，并将其衔接到服务器的**/events端点。接下来，咱们运用onopen事情处理程序来处理衔接成功的状况，运用onmessage事情处理程序来处理收到新音讯的状况，以及运用onerror**事情处理程序来处理衔接产生过错的状况。

在服务器端，咱们需求运用特定的呼应头来指定事情流的数据格局。例如，以下是一个运用Node.js和Express结构来发送事情流的示例代码：

const express = require('express');
const app = express();
app.get('/events', function(req, res) {
  res.setHeader('Content-Type', 'text/event-stream');
  res.setHeader('Cache-Control', 'no-cache');
  res.setHeader('Connection', 'keep-alive');
  const intervalId = setInterval(function() {
    const data = '当时时间：' + new Date().toLocaleTimeString();
    res.write('data: ' + data + '\n\n');
  }, 1000);
  res.on('close', function() {
    clearInterval(intervalId);
  });
});

在上面的代码中，咱们运用**setHeader方法来设置呼应头，包含Content-Type 、 Cache-Control和Connection 。接下来，咱们运用setInterval方法来定时地向客户端发送事情流数据。在每个事情流数据中，咱们需求增加data**字段来指定事情数据。最后，在客户端关闭事情流衔接时，咱们需求铲除定时器。

Axios

前端能够运用axios库来处理eventStream数据。axios供给了一个**request**方法来发送HTTP恳求，而且能够经过装备参数来处理不同类型的恳求。

对于eventStream，咱们需求装备responseType为stream ，这样就能够获取到一个事情流的呼应数据。接下来，咱们能够经过onmessage事情来处理每个事情的数据，而且在需求时调用data()**方法来获取数据。

以下是一个运用axios处理eventStream数据的示例代码：

axios({
  method: 'get',
  url: '/event-stream',
  responseType: 'stream'
}).then(response => {
  const eventSource = new EventSource('/event-stream');
  eventSource.onmessage = function(event) {
    const data = JSON.parse(event.data);
    // 处理数据
  };
  eventSource.onerror = function(event) {
    // 处理过错
  };
});

在上面的示例代码中，咱们经过axios发送一个GET恳求，而且将responseType设置为stream 。然后，咱们运用EventSource来创立一个事情流对象，而且运用onmessage事情来处理每个事情的数据。在onmessage事情处理程序中，咱们能够将event.data解析为JSON格局的数据，而且进行进一步处理。在需求关闭事情流时，咱们能够调用close()方法来关闭事情流对象。如果产生过错，则能够在onerror**事情处理程序中进行处理。