Pusher Chatkit in Vue - onNewMessage hook triggered twice?

Question

I have a Vue.js application using the Pusher Chatkit.

I have a problem I haven't been able to find an answer for some time now. Whenever I re-visit a view/component the Chatkit onNewMessage() hook is triggered multiple times. It depends on the times I re-visit the page.

Page refresh or first-time load resolves the issue until next re-visit.

It must be that I am creating multiple listeners each time I visit the view, but I don't get what these listeners are.

Pusher states that room subscriptions "override" the old ones when done twice.

Here is my chat.vue component

import chatConnection from '../chatkit.js'
created(){
     let chatManagerConnectPromise = chatConnection(this, uid)

     Promise.all([..., chatManagerConnectPromise, ...])
       .then(results => {
          // ...
          this.initiateNewChatState(results[1])
          // ...

       })
       .catch(error =>{
       });
},
methods: {
    initiateNewChatState(currentUser){
       this.subscribeToAllUserRooms(currentUser)
    },
    subscribeToAllUserRooms(currentUser){
       for(let room of currentUser.rooms){
         this.subscribeToRoom(currentUser, room.id)
       }
    },
    subscribeToRoom(currentUser, roomId){
      currentUser.subscribeToRoom({
        roomId: roomId,
        hooks: {
          onNewMessage: message => {
            console.log("CHAT | onNewMessage | new: ", message.text)
          }
        },
        messageLimit: 10
      })
      .catch(error => {
        this.notifyError("Uh oh", "Something is not right")
      });
    }
}

And here is my chatkit.js content:

import { ChatManager, TokenProvider } from '@pusher/chatkit'

export const chatConnection = ({ state, actions }, uid) =>{
  return new ChatManager({
    instanceLocator: "##:###:###:####:####",
    userId: uid,
    tokenProvider: new TokenProvider({url: 'https://...' })
  })
  .connect({
      onAddedToRoom: room => {
        // some action taken
      },
      onRemovedFromRoom: room => {
        // some action taken
      },
      onRoomDeleted: room => {
        // some action taken
      }
    })
    .then(user => {
      return user
    })
    .catch(error => console.log('CHATKIT | Error on connection', error))
}

Again, the problem is that the onNewMessage() is triggered once the first time after the page refresh/first load, but then increases by one with each new page visit (back and forth navigation).

I am creating some listeners with each visit but it cannot be the ChatManager not the User.subscribeToRoom!?

Thanks for any pointers.

Pusher Chatkit in Vue - onNewMessage hook triggered twice?

0 Answers0