React Native 中的服务器发送事件在 onmessage 侦听器中返回旧事件而不是新事件

Question

我正在尝试使用来自我的服务器的文本流。 API 工作得很好，因为我们已经在网络生产中使用了它。目前正在使用 https://www.npmjs.com/package/react-native-sse/ 但我也使用了其他 reavct 原生 sse 包。同样的问题。

下面是我的 React Native 代码。

import EventSource from 'react-native-sse';

.
.
.

const streamUrl = getSteamUrl(question, session_id);
const source = new EventSource(streamUrl);

source.addEventListener('open', () => {
  // eslint-disable-next-line no-console
  console.log('Open SSE connection.');
});

  source.addEventListener('message', (e: any) => {
  // eslint-disable-next-line no-console
  console.log({ val: e.data, type: e.type });
})

附上日志。该流以 [START] 开始，以 [DONE] 令牌结束，以标识何时使用和关闭连接。 您可以看到它们被重复发送，而不仅仅是新消息。 同样的 API 在 Web 上运行良好。事实上，它已部署。 我搜索了互联网，尝试了每个 React Native SSE 库。他们都表现出相同的行为。非常感谢您的帮助。谢谢你。

您可以看到它们被重复发送，而不仅仅是新消息。 同样的 API 在 Web 上运行良好。事实上，它已部署。 我期望出现诸如“[START]”“This”“is”“a”“message”“[DONE]”之类的文本流 我得到的是图片中的内容：“[START]”“This”，然后再次与一个 bew 词相同 我搜索了互联网，尝试了每个 React Native SSE 库。他们都表现出相同的行为。非常感谢您的帮助。谢谢你。

 LOG  Open SSE connection.
 LOG  {"type": "message", "val": "{\"bot_message_id\": \"84a04cb5-9fd0-481f-b393-31dbff15fd73\"}"}
 LOG  {"type": "message", "val": "[START]"}
 LOG  {"type": "message", "val": "No"}
 LOG  {"type": "message", "val": "[START]"}
 LOG  {"type": "message", "val": "No"}
 LOG  {"type": "message", "val": "\",\""}
 LOG  {"type": "message", "val": "[START]"}
 LOG  {"type": "message", "val": "No"}
 LOG  {"type": "message", "val": "\",\""}
 LOG  {"type": "message", "val": "\" you\""}
 LOG  {"type": "message", "val": "[START]"}
 LOG  {"type": "message", "val": "No"}
 LOG  {"type": "message", "val": "\",\""}
 LOG  {"type": "message", "val": "\" you\""}
 LOG  {"type": "message", "val": "\" have\""}
 LOG  {"type": "message", "val": "[START]"}
 LOG  {"type": "message", "val": "No"}
 LOG  {"type": "message", "val": "\",\""}
 LOG  {"type": "message", "val": "\" you\""}
 LOG  {"type": "message", "val": "\" have\""}
 LOG  {"type": "message", "val": "\" not\""}
 LOG  {"type": "message", "val": "[START]"}
 LOG  {"type": "message", "val": "No"}
 LOG  {"type": "message", "val": "\",\""}
 LOG  {"type": "message", "val": "\" you\""}
 LOG  {"type": "message", "val": "\" have\""}
 LOG  {"type": "message", "val": "\" not\""}
 LOG  {"type": "message", "val": "\" capped\""}
 LOG  {"type": "message", "val": "[START]"}
 LOG  {"type": "message", "val": "No"}
 LOG  {"type": "message", "val": "\",\""}
 LOG  {"type": "message", "val": "\" you\""}
 LOG  {"type": "message", "val": "\" have\""}
 LOG  {"type": "message", "val": "\" not\""}
 LOG  {"type": "message", "val": "\" capped\""}
 LOG  {"type": "message", "val": "\" yet\""}
 LOG  {"type": "message", "val": "[START]"}
 LOG  {"type": "message", "val": "No"}
 LOG  {"type": "message", "val": "\",\""}
 LOG  {"type": "message", "val": "\" you\""}
 LOG  {"type": "message", "val": "\" have\""}
 LOG  {"type": "message", "val": "\" not\""}
 LOG  {"type": "message", "val": "\" capped\""}
 LOG  {"type": "message", "val": "\" yet\""}
 LOG  {"type": "message", "val": "\".\""}
 LOG  {"type": "message", "val": "[START]"}
 LOG  {"type": "message", "val": "No"}
 LOG  {"type": "message", "val": "\",\""}
 LOG  {"type": "message", "val": "\" you\""}
 LOG  {"type": "message", "val": "\" have\""}
 LOG  {"type": "message", "val": "\" not\""}
 LOG  {"type": "message", "val": "\" capped\""}
 LOG  {"type": "message", "val": "\" yet\""}
 LOG  {"type": "message", "val": "\".\""}
 LOG  {"type": "message", "val": "[DONE]"}
 LOG  {"type": "message", "val": "[START]"}
 LOG  {"type": "message", "val": "No"}

Answer 1

这可能是因为您每次都记录它，而不是将其保存到例如数组之类的东西中。如果您使用 React / Native，请将其保存在 useState([]) 对象中。

const [data, setData] = useState([]);

并在消息事件监听器中设置以下内容

setData((oldData) => [...oldData, val])

我目前也在使用react-native-sse，并且陷入了一些小事情。连接到本地（例如“http://localhost:3000/events”）时，服务器端事件不会提供任何日志。它仅在会话关闭后记录一些内容。然而，当我们连接到像“http://test.link.be/info”这样的在线内容时，我确实得到了该特定工作的信息，并且由于某种原因一切都正常。