多次调用 Pubnub 消息和存在处理程序答案

【问题标题】：Pubnub message and presence handler are invoked multiple times多次调用 Pubnub 消息和存在处理程序
【发布时间】：2021-08-27 05:37:33
【问题描述】：

我在我的应用程序中使用 Next.js 进行 SSR，同时使用 Pubnub 进行实时聊天。所以我在 pages/index.js 中创建了我的 pubnub 聊天实例

const handleMessage = event => {
 const { message, channel } = event;

 addMessage(channel, message)
};

const handlePresence = event => {
 const { state, channel, action } = event;

 if (action === 'state-change') {
  addPresence({ 
    presence: { lastReadMessageTimestamp: state.lastReadMessageTimestamp }, 
    id: channel,
  })
 }
};

useEffect(() => {
  pubnub.addListener({ 
    message: handleMessage,
    presence: handlePresence, 
  });
  pubnub.subscribe({
    channelGroups: [channelGroup],
    withPresence: true,
  });
}, []);

return (
 <PubNubProvider client={pubnub}>
  <Fragment>
    <section>
      <MetaTags title={MAIN_SEO.title} description={MAIN_SEO.description} />
      <Header />
      <main>
        {children}
      </main>
    </section>
  </Fragment>
 </PubNubProvider>

所以我有 2 个页面，我应该在其中使用 pubnub、pages/chat.js 和 pages/messages.js。因此，例如，虽然我从消息页面开始一切都很好，但当我从消息页面转到聊天页面时，我的消息和状态处理程序会在下一页上多次调用（例如，我在一个线程中看到 3 条相同的消息），当实际上，我只收到 1 条消息或只有 1 条存在。重新加载后的页面结果应该是（所以我只看到了 1 条消息）。

【问题讨论】：

不知何故，您可能会多次初始化 pubnub 对象和/或侦听器（变量范围问题）。如果您可以提供带有安装/运行 repo 步骤的 github repo，我们可以在这里尝试并提供见解。
是的，你也知道这一点。很遗憾，bit 不能提供完整的 repo，可以提供更多的代码，比如当我将return () => pubnub.unsubscribeAll() 添加到 useEffect 时，消息处理程序就可以了，但是存在处理程序仍然调用了多次。还请记住，我使用的是 next.js，这意味着我应该在每个页面挂载/卸载时订阅/取消订阅，在这里，当我从任何页面转到另一个页面时，它应该这样做。
我不确定 next.js - 它会迫使您订阅/取消订阅每个页面吗？当您导航到下一页时，它会加载一个新的 HTML 文件吗？
如果您可以启用 PN SDK 日志记录（在 pubnub 初始化中设置 useVerbosity:true），那么您可以重现重复的 Presence 调用，以便我们进行诊断。

标签： reactjs sockets event-handling next.js pubnub

【解决方案1】：

修复了这个问题，刚刚添加了removeEventListener：

const handleMessage = event => {
  const { message, channel } = event;

  addMessage(channel, message)

};

const handlePresence = event => {
  const { state, channel, action } = event;

  if (action === 'state-change') {
    addPresence({ 
      presence: { lastReadMessageTimestamp: state.lastReadMessageTimestamp }, 
      id: channel,
    })
   }
 };

const pubnubListener = {
  message: handleMessage,
  presence: handlePresence,
}

const leaveApplication = () => {
  pubnub.removeListener(pubnubListener);

  pubnub.unsubscribeAll()
}

useEffect(() => {
  pubnub.addListener(pubnubListener);

  pubnub.subscribe({
    channelGroups: [channelGroup],
    withPresence: true,
  });

  return leaveApplication

}, []);

【讨论】：