Question

我有一个使用Pusher Chatkit的Vue.js应用程序。

我有一个问题，我已经有一段时间没有找到答案了。每当我重新访问视图/组件时，都会多次触发Chatkit onNewMessage()挂钩。这取决于我重新访问该页面的时间。

页面刷新或首次加载可以解决该问题，直到下次再次访问。

每次访问视图时，一定是我要创建多个侦听器，但我不知道这些侦听器是什么。

Pusher指出，房间订阅两次完成后会“覆盖”旧订阅。

这是我的chat.vue组件

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

这是我的chatkit.js内容：

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))
}

同样，问题在于，onNewMessage()在页面刷新/首次加载后第一次触发，但是每次访问新页面时（来回导航）又增加一个。

我每次访问都会创建一些侦听器，但它不能是ChatManager而不是User.subscribeToRoom！？

感谢任何指针。

Vue中的Pusher Chatkit-onNewMessage钩子触发了两次？

0 个答案: