Streaming APIs
Streaming APIs обеспечивают непрерывный поток данных по долгосрочному HTTP-соединению, позволяя осуществлять обновления в реальном времени для вашего приложения.
В отличие от REST API, которые предоставляют данные в ответ на конкретные запросы, streaming API разработаны для поддержания открытого соединения между клиентом и сервером, непрерывно отправляя данные по мере их получения. Это особенно полезно для приложений, требующих обновлений в реальном времени, таких как результаты спортивных матчей в прямом эфире, котировки фондового рынка, чат-приложения и уведомления в реальном времени.
Это уменьшает задержку и улучшает пользовательский опыт, предоставляя мгновенную обратную связь. Самым распространенным протоколом, используемым для streaming API, является Server Sent Events (SSE), но можно также использовать другие, например WebSockets, в зависимости от требований приложения.
Различие между REST API и Streaming API
Основное различие между REST API и Streaming API заключается в способах доставки данных:
-
REST API:
- Модель Запроса/Ответа: Клиент отправляет запрос, и сервер отвечает данными.
- Процесс соединения: Каждая пара запрос/ответ независима, и сервер закрывает соединение после отправки ответа.
- Сфера применения: Подходит для приложений, где данные не изменяются часто, и обновления в реальном времени не являются критическими.
- Пример ответа:
{
"event": "match_score",
"data": {
"team1": "Красные Драконы",
"team2": "Серебряные Акулы",
"score": "2-1"
}
} -
Streaming API (Server Sent Events):
- Непрерывный поток данных: Сервер поддерживает открытое соединение и непрерывно отправляет данные клиенту по мере поступления.
- Процесс соединения: Соединение остается открытым, позволяя серверу отправлять новые данные клиенту без необходимости запроса.
- Сфера применения: Идеально подходит для приложений, требующих обновлений в реальном времени, таких как результаты спортивных матчей в прямом эфире, уведомления в реальном времени и приложения для обмена сообщениями в реальном времени.
- Пример ответа:
event: match_score
data: {"team1": "Красные Драконы", "team2": "Серебряные Акулы", "score": "2-1"}
event: match_score
data: {"team1": "Красные Драконы", "team2": "Серебряные Акулы", "score": "3-1"}
event: match_score
data: {"team1": "Красные Драконы", "team2": "Серебряные Акулы", "score": "3-2"}
Пример: Обзор обзоров AI
Давайте посмотрим, как можно использовать streaming API в FlutterFlow, создав пример, который позволяет пользователям видеть AI-краткое содержание обзоров продуктов в реальном времени. При загрузке страницы приложение отображает AI-обзор в реальном времени, позволяя пользователям следить за анализом по мере его создания.
Окончательное приложение выглядит следующим образом:
Шаги по созданию приложения следующие:
- Построить пользовательский интерфейс
- Создать API
- Создать переменную состояния страницы
- Триггер и обработка ответа API
- Извлечение данных для диаграммы
1. Построить пользовательский интерфейс
Интерфейс пользователя включает раздел для средней оценки и количества обзоров, а также подробный обзор обзоров, включая плюсы, минусы и визуализацию распределения настроения. Вот ключевые виджеты для построения страницы:
- Text Widget: Отображает AI-генерируемое краткое содержание обзоров и список положительных и отрицательных аспектов, упоминаемых в обзорах.
- Chart (Bar chart) Widget: Визуальное представление распределения настроений (положительное, нейтральное, отрицательное) в виде столбчатой диаграммы.
2. Создать API
Для создания этого приложения мы будем использовать OpenAI's Chat Completion API для генерации резюме на основе предоставленных обзоров. Прежде чем создавать что-либо, связанное с API в вашем приложении, важно создать и протестировать API, чтобы убедиться, что они работают корректно. Поэтому давайте создадим и протестируем API Chat Completion в нашем проекте.
После создания откройте Расширенные настройки и включите переключатель Process Streaming Response.
Вот как это сделать:
3. Создать переменные состояния страницы
В этом примере, чтобы сохранить и отобразить результат созданного AI-краткого содержания, вам понадобятся две переменные.
summary: Эта переменная будет хранить полный текст резюме, который включает общее настроение обзоров, ключевые моменты, упоминаемые клиентами, а также списки плюсов и минусов. Она инициализируется пустой строкой и затем будет обновлена текстом, созданным AI.sentimentValues: Эта переменная будет хранить значения распределения настроений. Это список double, представляющий количество положительных, нейтральных и отрицательных обзоров. Обратите внимание, эти значения будут использованы для предоставления Значений столбцов в столбчатой диаграмме. Они инициализированы тремя нулями и затем будут обновлены фактическими значениями положительных, нейтральных и отрицательных обзоров.
4. Триггер и извлечение данных из ответа API
Вы можете триггерить streaming API так же, как любой другой обычный API. Безусловно, метод извлечения и разбора данных отличается от стандартного API. В отличие от непрерывных API, где вы получаете ответ в переменной вывода действия, streaming API предоставляет данные через следующие действия ответа:
- onMessage: Это действие срабатывает каждый раз, когда получается новая порция данных от streaming API. Вы можете использовать это действие для обновления вашего интерфейса или выполнения любой логики с поступающими данными в реальном времени.
- onError: Это действие срабатывает, когда есть ошибка в потоковом соединении. Можно использовать это действие для грациозной обработки ошибок, такой как отображение сообщения об ошибке пользователю или попытки повторного подключения.
- onClose: Это действие срабатывает, когда потоковое соединение закрывается. Можно использовать это действие для выполнения завершающих задач или уведомления пользователя о завершении потока.
Каждый раз, когда данные поступают, вы можете получить доступ к телу ответа через OnMessage > ->Выбрать переменную->Параметры действия->OnMessageInput. а затем использовать Параметры сообщения потока ответа для извлечения данных.
Для этого конкретного примера мы используем опцию Server Sent Event Stream Data JSON и затем используем этот JSON путь $['choices'][0]['delta']['content'] для извлечения данных истории.
Вот как это делается:
5. Извлечение данных для диаграммы
API возвращает подробное резюме в виде текста, но для отображения количества положительных, нейтральных и отрицательных обзоров на диаграмме, вам нужно извлечь эти данные из текста. Для этого можно написать простую пользовательскую функцию. По завершении потока передайте полный текст в пользовательскую функцию для извлечения необходимых данных и сохраните вывод в переменной состояния страницы sentimentValues, которую мы создали ранее.
Вот как это делается:
- После сохранения
sentimentValues, хорошей практикой будет удалить одинаковые данные из сгенерированного текста обзора, чтобы избежать избыточности. - Подобным образом, можно извлечь другие данные, такие как 'плюсы' и 'минусы', и отобразить их по своему усмотрению.
Параметры сообщения потока ответа
При работе с Server Sent Events (SSE) в FlutterFlow важно понимать, как обрабатывать и обрабатывать различные компоненты сообщений событий. FlutterFlow предоставляет несколько опций для захвата различных частей сообщений SSE. Вот они:
Данные JSON Server Sent Event (Тип: JSON)
Это поле захватывает результат разбора JSON. Например:
event: chat
data: {"response": "hello", "version": 7}
id: 2
В поле Данные JSON Server Sent Event будет:
{
"response": "hello",
"version": 7
}
Обратите внимание, если данные не в формате JSON, они будут равны null:
event: ping
data: Server time is 2024-06-28T11:52:56+00:00
id: 2
Данные JSON Server Sent Event будут null.
Текстовые данные Server Sent Event (Тип: Строка)
Это поле содержит только текст поля "data" из SSE. Если есть несколько записей "data", они объединяются с новой строкой. Например, из события:
event: ping
data: Server time is 2024-06-28T11:52:56+00:00
id: 2
Текстовые данные Server Sent Event будут: Server time is 2024-06-28T11:52:56+00:00
Из события:
event: journalEntry
data: Today I went to the