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

Posted 2023-04-18

【中文标题】多次调用 Pubnub 消息和存在处理程序

【英文标题】：Pubnub message and presence handler are invoked multiple times

【发布时间】：2021-08-27 05:37:33

【问题描述】：

我在我的应用程序中使用 Next.js 进行 s-s-r，同时使用 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 调用，以便我们进行诊断。

【参考方案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

, []);