React Native 如何实现 SSE 流式数据请求与获取

由于 React Native 与浏览器环境不一样，无法直接照搬浏览器的 SSE 请求获取方案。

但是可以通过 React Native WebView 作为中间件来承担 SSE 请求与获取的平台，间接实现 SSE 类型的请求。

jsx 部分

// 封装后的组件放置，特别注意 useMemo 有效防止 WebView 反复刷新，导致请求过程失败
{
  useMemo(() => {
    return (
      <StreamWebView 
          webViewRef={webViewRef} 
          messageCallback={webViewMessageCallback}
      />
    )
  }, [])
}

StreamWebView 组件

import { View } from "react-native"
import WebView from "react-native-webview"
import { createWebViewScript } from "./script";
import { BaseUrl } from "~/utils/http";

interface Props {
  webViewRef: any;
  messageCallback: (payload: string) => void
  onLoad?: () => void
}

function App({
  webViewRef,
  messageCallback,
  onLoad
}: Props): JSX.Element {
  return (
    <View style={{
      height: 0.1,
    }}>
      <WebView
        ref={webViewRef}
        injectedJavaScript={createWebViewScript()} // 注入 WebView 脚本
        originWhitelist={['*']}
        source={{ uri: BaseUrl }} // 与 injectedJavascript 中的 fetch 地址一致，否则失败
        style={{
          flex: 1,
        }}
        onMessage={(event) => {
          messageCallback(event.nativeEvent.data)
        }}
        onLoadEnd={() => {
          onLoad && onLoad()
        }}
      />
    </View>
  )
}

export default App;

在使用时，直接注入 js 脚本

webViewRef.current.injectJavaScript(
    `
     写入函数执行相关逻辑
    `
);

我在请求过程中使用的一直是 https 地址，如果为 http 可能还会有其他问题，涉及到了 ios 或 android 相关的证书安全问题等等