Mqtt 订阅时重复订阅和取消订阅并再次订阅

Question

我在使用带有 react 的 npm mqtt 时遇到问题。订阅主题“警报”以接收来自服务器的数据发布，然后客户端取消订阅该主题。每次订阅和取消订阅后，消息都是重复的。服务器发送1条消息；客户端收到更多 1 条消息。基于订阅和取消订阅增加消息。

const List = () => {
  
  const listener = (topic, message) => {
    const data = JSON.parse(message.toString());
    if (topic.includes('alert')) {
      console.log(data)
    }
  };

  const subscribe = instruments => {
    client.subscribe('alert');
    client.on('message', listener);
  };

  const unsubscribe = () => {
    client.unsubscribe('alert');
    client.off('message', listener);
  };

  return (
    <div className={s.container}>
      <Button onClick={subscribe}>sub</Button>
      <Button onClick={unsubscribe}>unsub</Button>
    </div>
  );
};

export default List;

Answer 1

您正在订阅/取消订阅不同的主题，因此每次单击订阅按钮时，它只会将相同的主题重新添加到列表中。

当您订阅/取消订阅时，也无需继续添加/删除message 事件监听器。