为什么FCM的onMessage()需要包装在Promise中？

Question

有人可以解释一下 FCM 的

onMessage()

的行为方式与 Firestore 的

onSnapshot()

或 Auth 的

onAuthStateChanged()

不同的原因吗？

后两者启动一个保持运行的“监听器”，当数据到达时，每个监听器都会调用它们的回调，并且监听器将继续运行，直到关闭。但似乎为了让

onMessage()

正常运行，需要在收到每条消息后重新调用它，或者可能更频繁？

或者也许我只是没有正确理解要成功的原因，似乎我需要将对 onMessage 的调用包装在 Promise 或异步 IIFE 中：

(async () => {
    return onMessage(getMessaging(), (payload: MessagePayload) => {
        console.log(`App() - onMessage() - got payload:`, payload);
        setNotificationPayload([{ data: payload, open: true }]);
    });
})()

或者我在各种教程/博客中看到的类似模式是：

export const onMessageListener = () =>
  new Promise((resolve) => {
    messaging.onMessage((payload) => {
      resolve(payload);
    });
  });

我感到困惑的是，这些调用被直接放入组件中，以便它们在组件的每次渲染时重新运行，而 Firebase-land 中的其他侦听器似乎是通过使用来启动、停止和防止重新执行的

useEffect()

。

或者也许我现在只是非常困惑......

Answer 1

根据文档，onMessage() 的工作方式与其他事件订阅者完全相同。

当收到推送消息并且用户当前位于您的源页面上时，消息将传递到该页面，并使用推送消息的有效负载调度

onMessage()

事件。

这非常适合在效果挂钩中使用，其中清理可以执行返回的 unsubscribe 函数，例如

const [notificationPayload, setNotificationPayload] = useState<{
  data: MessagePayload;
  open: boolean;
}>();

useEffect(
  () =>
    onMessage(messaging, (data) => {
      setNotificationPayload({ data, open: true });
    }),
  [],
);

看来我需要将对 onMessage 的调用包装在 Promise 或异步 IIFE 中

这根本不是必需的，因为它不是异步函数。