如何解决多次调用发布消息和状态处理程序
我在我的应用中使用 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 条消息)。
解决方法
修复了这个问题,刚刚添加了 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
},[]);
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。