如何使用openai api在React Native中实现文本流？

Question

我正在开发一个React Native聊天应用程序，我想使用openai api来实现自动回复。
openai 的 api 提供了流，但它使用 SSE，这在 React Native 中似乎效果不佳。
有什么方法可以在我的项目中使用文本流吗？

我已经尝试了here提到的大部分建议和其他解决方案，但它们没有按预期工作。

1. 外部库：我已经成功地在 React 中实现了流式传输（使用 Next.js），其中包括

   openai-streams

   、

   react-chat-stream

   、

   openai-streaming-hooks

   等库。然而，这些库不能在 React Native 中工作。
2. Fetch for Streaming：有人提到 fetch 可用于流式传输，我也尝试过，还有

   @async-util/fetch

   、

   react-native-fetch-api

   等库。但他们也没有工作。
3. React Native WebView：它可以发出请求并将响应发送回应用程序，受到 this 存储库的启发，但我认为长期使用它是不可行的，因为应用程序中可能会有越来越多的功能未来，我认为维护起来会很困难，因为使用这种方法需要注入js代码。
4. SSE 套餐：我尝试了

   react-native-event-source

   、

   react-native-sse

   等套餐。但是，我仍然遇到功能无法按预期工作的问题。我不确定问题是否出在我的实施或软件包上。

我现在很困惑。是否有任何指导或工作示例来实现流响应？
这里有两个我认为最合适的解决方案，并将继续尝试，请告诉我是否有任何我应该考虑的替代方法或对这些方法的改进，我将非常感谢您的建议。

• 实现SSE，但我对它比较陌生，所以如果提供一些具体的样板代码或示例，那就太好了。
• 使用服务器（如axios？）来接收流响应并返回到应用程序，但我不确定服务器应该写在应用程序本身还是应用程序外部。另外，当我使用Expo时，我注意到即将推出的ExpoSDK包含api路由，这是否意味着我可以稍后在应用程序中编写请求？

感谢您的宝贵时间。

---

回复zoran404：
是的，我已经尝试过。添加

react-native-polyfill-globals/auto

是因为没有它会引发错误

Property 'TextEncoder' doesn't exist

。这是我的方法，我真的不确定。

import 'react-native-polyfill-globals/auto'
import { fetch } from 'react-native-fetch-api'

async function fetchStreamMessage() {
    const url = 'https://api.openai.com/v1/chat/completions'
    fetch(url, {
      reactNative: { textStreaming: true },
      method: 'POST',
      headers: {
        Authorization: `Bearer ${OPENAI_KEY}`,
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        messages: [{ role: 'user', content: 'Tell me a joke' }],
        model: 'gpt-4',
        stream: true
      })
    })
      .then((response: Response) => response.body)
      .then((body: ReadableStream) => {
        const reader = body.getReader()
        console.log(reader)
      })
  }

Answer 1

一旦从 body.getReader() 获得了读取器，您就需要一个循环来读取流块。之后

const reader = body.getReader()

            const reader = body.getReader();
            let done, value;
            while (!done) {
                ({ done, value } = await reader.read());
                if (!done) {
                    const chunk = new TextDecoder().decode(value);
                    console.log(chunk);
                }
            }
            console.log('Streaming complete.');