前端接入chatgpt,实现流式文字的显示

前端接入chatgpt,实现流式文字的显示

业务需求：

项目需要接入chatgpt提供的api，后端返回流式的字符，前端接收并实时显示。

相关技术原理：

1. JS中的Stream流:

在JavaScript中，使用Stream流通常指的是处理数据流的一种方式，特别是在Node.js环境下。Stream可以是可读的、可写的、或者既可读又可写的。它们允许数据被处理成块，而不是一次性处理整个数据集，这对于处理大量数据或者来自网络请求的数据非常有用。

但曾经这些对于 JavaScript 是不可用的。以前，如果我们想要处理某种资源（如视频、文本文件等），我们必须下载完整的文件，等待它反序列化成适当的格式，然后在完整地接收到所有的内容后再进行处理。

随着流在 JavaScript 中的使用，一切发生了改变——只要原始数据在客户端可用，你就可以使用 JavaScript 按位处理它，而不再需要缓冲区、字符串或 blob。

2. Stream API

以下是封装的用来调用的Stream API的核心代码，为了方便调用封装成了Hook组件。有以下组成部分：

1. useStream Hook: 接受一个URL和一个参数对象。这个对象可以包含几个回调函数（onFirst, onNext, onError, onDone）和一个fetchParams对象，用于自定义fetch请求。
2. startStream 函数: 被useStream内部调用，用于实际发起fetch请求，并使用ReadableStream的reader来逐块读取数据。它处理流数据的读取，并根据提供的回调函数处理数据块、错误和流结束。

import React, { useCallback, useState, useRef, useEffect } from 'react';
import 'abortcontroller-polyfill';
import { getLoginToken } from '../../utils/localStorage.js';
import {getRoleFromLocation} from '../commonUtils.js';

/**
 * React hook for the [Streams API](https://developer.mozilla.org/en-US/docs/Web/API/Streams_API).
 * Use this hook to stream data from a URL.
 * @param {string} url
 * @param {object} [params]
 * @param {function(Response)} [params.onNext]
 * @param {function(Error)} [params.onError]
 * @param {function()} [params.onDone]
 * @param {RequestInit} [params.fetchParams]
 *
 * @returns {StreamHook}
 */

function useStream(url, params) {
  if (typeof params !== 'object' || params === null) {
    params = {};
  }

  const streamRef = useRef();
  const onFirst = useRef(params.onFirs