React Pubnub 聊天。消息复制或根本没有消息答案

【问题标题】：React Pubnub Chat. Message dublication or no message at allReact Pubnub 聊天。消息复制或根本没有消息
【发布时间】：2021-09-25 05:47:24
【问题描述】：

我的 React 网站一直存在问题。我们正在使用 pubnub SDK 创建一个聊天组件，这样人们就可以互相聊天了。所有的频道管理都完成了，但问题是每次我切换频道时所有的消息都会被复制，而且它们只会在 Dom 中被复制。 PubNub 的历史 API 仅返回一条消息，但仅在刷新后返回，因为该组件仅在挂载或频道更改时获取历史消息。

这是负责消息的代码

export default function Chat({ chatRoom, person, task }) {
  const [messages, addMessage] = useState([]); //messages that are being mapped in the JSX
  const [message, setMessage] = useState("");//set by the input field in the JSX


//adding the pubnub listeners on mount
  useEffect(() => {
    console.log("ADDING LISTENER");

    pubnub.addListener({
      message: (message) => {
        if (message) {
          addMessage((messages) => [...messages, message]);
          console.log(message.message);
        }
        scrollingComponent.current.scrollIntoView({ behavior: "smooth" });
      },
      file: handleFile,
    });

    pubnub.subscribe({ channels: [chatRoom] });

//cleaning listeneres on dismount
    return function cleanup() {
      pubnub.removeListener({
        message: (message) => {
          if (message) {
            addMessage((messages) => [...messages, message]);
            console.log(message.message);
          }
          scrollingComponent.current.scrollIntoView({ behavior: "smooth" });
        },
        file: handleFile,
      });

      pubnub.unsubscribeAll();
      addMessage([]);
    };
  }, [chatRoom]);



//added this function and it's coresponding useEffect just to test if thats the cause of the dublication. Before that the function sendMessage had the body of the use effect
const sendMessage = (m) => {
  console.log(m);
  setMessage("");
};

  useEffect(() => {
    if (message) {
      pubnub
        .publish({
          channel: chatRoom,
          message: message,
          storeInHistory: true,
        })
        .then(() => {
          pubnub.signal({
            channel: chatRoom,
            message: "notification",
          });
          pubnub.signal({
            channel: chatRoom,
            message: "not_typing",
          });
        })
        .catch((error) =>
          addMessage((messages) => [...messages, error.toString()])
        );
    }
  }, [sendMessage]);

//code continues...

如有必要，我可以发布整个 .js 文件

【问题讨论】：

标签： javascript reactjs sdk chat pubnub

【解决方案1】：

您的代码中的问题是您没有正确删除侦听器。您重新创建了两次相同的函数（但它不是相同的函数），因此 PubNub SDK 不会将其从侦听器中删除。

相反，你应该在第一个 useEffect 中做这样的事情：

//adding the pubnub listeners on mount
useEffect(() => {
  const listener = { // <-- extract the listener
    message: (message) => {
      if (message) {
        addMessage((messages) => [...messages, message]);
        console.log(message.message);
      }
      scrollingComponent.current.scrollIntoView({ behavior: "smooth" });
    },
    file: handleFile,
  }
  

  pubnub.addListener(listener); // <-- pass the listener here

  pubnub.subscribe({ channels: [chatRoom] });
  
  return function cleanup() {
    pubnub.removeListener(listener); // <-- pass the same listener here

    pubnub.unsubscribeAll();
    addMessage([]);
  };
}, [chatRoom]);

【讨论】：