Directorio de artículos
metas cumplidas
streames OpenAI APIun parámetro que controla el modo de la solicitud. Cuando streamel parámetro se establece Trueen , APIla respuesta se devuelve en forma de transmisión, es decir, los resultados parciales se devuelven inmediatamente durante la solicitud sin esperar la respuesta completa .
Esto permite la interacción en tiempo real, el procesamiento de datos a gran escala y la presentación progresiva de resultados. 
Nuestro Asistente de IA también es, en esencia, un robot de chat, por lo que es muy necesario transmitir para mejorar la interactividad y la velocidad de respuesta .
Al usar el método de transmisión para devolver la respuesta, podemos comenzar a procesar inmediatamente después de que el usuario ingrese y gradualmente devolver resultados parciales, de modo que el usuario pueda recibir comentarios más rápido y la experiencia interactiva sea más fluida.
Al mismo tiempo, es más capaz de permitir a los usuarios leer y comprender los resultados parciales paso a paso mientras esperan una respuesta completa, para que la conversación se desarrolle de manera más coherente.
Comparación de efectos
La siguiente es la comparación de la interacción y el efecto de los dos métodos de solicitud.
modo sin transmisión
- gesto interactivo
- efecto real
modo de transmisión
-
gesto interactivo
-
efecto real
Plan de IMPLEMENTACION
Descripción general de la idea del programa
El front-end se utiliza **EventSource**para solicitar actualizaciones de datos en tiempo real desde el servidor . EventSource proporciona una forma simple basada en eventos para recibir notificaciones de eventos del lado del servidor en tiempo real. Al usar EventSource, el front-end puede establecer una conexión persistente basada en HTTP para recibir actualizaciones de datos en tiempo real desde el servidor.
El backend utiliza **Reactor Flux**tecnología para procesar flujos de datos asíncronos , que es Reactive Streamsuna especificación de procesamiento de flujo de datos en la especificación. Flux puede manejar flujos de datos asíncronos sin bloqueo y tiene capacidades de procesamiento de contrapresión, lo que permite una programación reactiva eficiente. Al usar Flux, el backend puede procesar de manera efectiva una gran cantidad de flujos de datos asíncronos y realizar un control de contrapresión de acuerdo con las capacidades de procesamiento de los consumidores para garantizar un procesamiento estable y eficiente de los flujos de datos.
Combinando front-end EventSourcey back-end Flux, podemos simplemente establecer un mecanismo para actualizaciones de datos en tiempo real.
El front-end establece una conexión persistente con el back-end a través de EventSource. Una vez que el back-end tenga nuevas actualizaciones de datos, enviará los datos al front-end a través de EventSource. Una vez que el front-end recibe los datos, puede procesarlos y mostrarlos según sea necesario.
Interfaz
El front-end cambió 4 soluciones antes y después, y finalmente las usó event-source-polyfillpara el procesamiento.
Comparación de esquemas
La comparación de varios esquemas es la siguiente:
| plan | referencia de implementación | Ventajas y desventajas | Precaución |
|---|---|---|---|
| sse.js | sse.js | No se requieren dependencias de terceros, no apto para React | Debe llamar explícitamente al método stream() para iniciar la solicitud |
| sse.jsx | SSE.jsx | Sin dependencias de terceros, se usa en React, pero no es válida después del empaquetado | Debe llamar explícitamente al método stream() para iniciar la solicitud |
| react-native-sse | https://www.npmjs.com/package/react-native-sse/v/1.0.1 | Solo aplicable a RN, no aplicable a fishx (disponible después del empaquetado, pero hará que el proyecto fishx basado en React inicie un informe de error) admite POST\GET | No es necesario llamar explícitamente al método open(), de lo contrario, puede haber problemas con las solicitudes continuas. |
| evento-fuente-polyfill | https://www.npmjs.com/package/event-source-polyfill | Aplicable a fishx, pero solo admite solicitudes GET (si desea pasar parámetros, debe usar URL con parámetros) | No es necesario llamar explícitamente al método open(), de lo contrario, puede haber problemas con las solicitudes continuas. |
ejemplo de código de fuente de evento-polyfill
import {
EventSourcePolyfill } from 'event-source-polyfill';
const streamChatWithBSS = (value, now) => {
let es = null;
try {
// 1.生成带参URL
const baseUrl = '/chat';
const params = {
}
const queryString = Object.keys(params)
.map(key => `${
encodeURIComponent(key)}=${
encodeURIComponent(params[key])}`