反应pubnub聊天消息重复或根本没有消息

如何解决反应pubnub聊天消息重复或根本没有消息

我的 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" });
        },});

      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 文件

解决方法

您代码中的问题是您没有正确删除侦听器。您正在重新创建相同的函数两次（但不是相同的函数），因此 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]);