1

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

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

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

一定是我每次访问视图时都创建了多个侦听器，但我不明白这些侦听器是什么。

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！？

感谢您的任何指示。

4

0 回答 0