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

前端接入,实现流式文字的显示 业务需求：

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

相关技术原理： 1. JS中的流:

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

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

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

2. API

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

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

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.onFirst);
  const onNext = useRef(params.onNext);
  const onError = useRef(params.onError);
  const onDone = useRef(params.onDone);
  const close = useCallback(() => {
    if (streamRef.current) {
      streamRef.current.abort();
    }
  }, []);
  useEffect(() => {
    if (streamRef.current) {
      streamRef.current.abort();
    }
    streamRef.current = new AbortController();
    if (params.fetchParams) {
      startStream(url, {
        onFirst: onFirst,
        onNext: onNext,
        onError: onError,
        onDone: onDone,
        fetchParams: {
          ...params.fetchParams,
          signal: streamRef.current.signal
        }
      });
    }
  }, [url, params.fetchParams]);
  useEffect(() => {
    onFirst.current = params.onFirst;
  }, [params.onFirst]);
  useEffect(() => {
    onNext.current = params.onNext;
  }, [params.onNext]);
  useEffect(() => {
    onError.current = params.onError;
  }, [params.onError]);
  useEffect(() => {
    onDone.current = params.onDone;
  }, [params.onDone]);
  return {
    close
  };
}
/**
 * Use this function to start streaming data from an URL
 * @param {string} url
 * @param {object} params
 * @param {React.MutableRefObject} params.onNext
 * @param {React.MutableRefObject} params.onError
 * @param {React.MutableRefObject} params.onDone
 * @param {RequestInit} params.fetchParams
 */
async function startStream(url, {
  onFirst,
  onNext,
  onError,
  onDone,
  fetchParams
}) {
  const errCb = err => {
    if (typeof onError.current === 'function') {
      onError.current(err);
    }
  };
  try {
    // 获取role
    const locationType = getRoleFromLocation();
    // add header
    const reqHeaders = { Authorization: getLoginToken(locationType), 'Content-Type': "application/json"}
    const res = await fetch(url, { method: 'GET', ...fetchParams, headers: reqHeaders });
    const reader = res.body.getReader();
    const headers = res.headers;
    if (typeof onFirst.current === 'function') {
      onFirst.current(headers);
    }
    if (fetchParams.signal instanceof AbortSignal) {
      fetchParams.signal.addEventListener('abort', evt => reader.cancel(evt), {
        once: true,
        passive: true
      });
    } // eslint-disable-next-line no-constant-condition
    while (true) {
      try {
        const {
          done,
          value
        } = await reader.read();
        if (done) {
          if (typeof onDone.current === 'function') {
            onDone.current();
          }
          return;
        }
        if (typeof onNext.current === 'function') {
          const data = new TextDecoder('utf-8').decode(value);
          onNext.current(data);
        }
      } catch (e) {
        errCb(e);
        return;
      }
    }
  } catch (e) {
    errCb(e);
  }
}
export default useStream;

3. React中的TML

TML是React中的一个属性，允许你直接在组件内部插入HTML代码字符串。由于直接使用HTML字符串可能会导致跨站脚本（XSS）攻击，因此React将其命名为TML，以此提醒开发者注意使用时的潜在风险。

使用TML时，需要传递一个对象，该对象有一个键，对应的值就是你想要插入的HTML字符串。

例如：

<div dangerouslySetInnerHTML={{ __html: "这是HTML内容" }}>