本文正在参加 ✍🏻 技术视角深入 ChatGPT 征文活动

往期文章

如何搭建属于自己的ChatGPT应用（一）通过Docker搞定gpt-3.5 API - 掘金 (juejin.cn) 如何搭建属于自己的ChatGPT应用（二）使用Express转发GPT3.5 API - 掘金 (juejin.cn)

前言

本文将在项目中描述如何通过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 应用程序中，主要用于实现实时通信和更新，包括以下几个方面：

实时数据更新：当服务器端有新的数据可用时，可以使用 EventStream 将这些数据推送给客户端，从而实现实时数据更新，例如在线聊天、实时监控等应用场景。
增量更新：使用 EventStream 可以仅发送有变化的数据，从而减少网络流量和服务器负载，特别是在处理大量数据时更加明显，例如金融行情、股票报价等应用场景。
消息通知：使用 EventStream 可以实现消息通知功能，当有新的消息到达时可以立即通知客户端，例如电子邮件、社交网络等应用场景。
服务器监控：使用 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**事件处理程序中进行处理。

如何搭建属于自己的ChatGPT应用（三）通过Axios+EventSource使用GPT3.5 API

往期文章

前言

EventStream

介绍

用途

EventSource

用途

示例代码

Axios