Pusher chatKit onMessage挂钩在世博会应用程序中失败

Question

我正在使用React Native与世博会，我能够创建用户+房间，并使用以下代码向他们发送消息：

const hooks = {
  onMessage: message => {
    console.log("message", message);
    this.setState({
      messages: [...this.state.messages, message]
    });
  },
  onUserStartedTyping: user => {
    this.setState({
      usersWhoAreTyping: [...this.state.usersWhoAreTyping, user.name]
    });
  },
  onUserStoppedTyping: user => {
    this.setState({
      usersWhoAreTyping: this.state.usersWhoAreTyping.filter(
        username => username !== user.name
      )
    });
  },
  onPresenceChange: () => this.forceUpdate()
};

class SetupChatKit extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      chatManager: null,
      currentUser: {},
      currentRoom: {},
      messages: [],
      usersWhoAreTyping: []
    };
  }

  componentDidMount() {
    const { userId, name } = this.props;
    this.instantiateChatManager(userId);
    this.createChatKitUser({ userId, name });
  }

  joinOrCreateChatKitRoom = (mode, chatKitRoomId, title) => {
    const { chatManager } = this.state;
    return chatManager
      .connect()
      .then(currentUser => {
        this.setState({ currentUser });
        if (mode === "join") {
          return currentUser.joinRoom({ roomId: chatKitRoomId, hooks });
        }
        return currentUser.createRoom({
          name: title,
          private: false,
          hooks
        });
      })
      .then(currentRoom => {
        this.setState({ currentRoom });
        return currentRoom.id;
      })
      .catch(error => console.error("error", error));
  };

  instantiateChatManager = userId => {
    const chatManager = new Chatkit.ChatManager({
      instanceLocator: "v1:us1:9c8d8a28-7103-40cf-bbe4-727eb1a2b598",
      userId,
      tokenProvider: new Chatkit.TokenProvider({
        url: `http://${baseUrl}:3000/api/authenticate`
      })
    });
    this.setState({ chatManager });
  };

我的问题是console.log("message", message);永远不会被调用，即使我通过在线控制面板手动向房间添加消息。

我尝试过从chatManager进行日志记录，结果如下所示：

​

​

Answer 1

正如您从文档中看到的，onMessage挂钩需要附加在subscribeRoom上，而不是在进入房间时。

https://docs.pusher.com/chatkit/reference/javascript#connection-hooks

因此，可以在joinOrCreateChatKitRoom()方法中的第一个成功承诺之后添加subscribeToRoom()。

Answer 2

我使用async/await重构了代码，并使用了.subscribetoRoom()，如下所示：

  joinOrCreateChatKitRoom = async (mode, chatKitRoomId, title) => {
    const { chatManager } = this.state;
    try {
      const currentUser = await chatManager.connect();
      this.setState({ currentUser });
      let currentRoom;
      if (mode === "join") {
        currentRoom = await currentUser.joinRoom({
          roomId: chatKitRoomId
        });
      } else {
        currentRoom = await currentUser.createRoom({
          name: title,
          private: false
        });
      }
      this.setState({ currentRoom });
      await currentUser.subscribeToRoom({
        roomId: currentRoom.id,
        hooks: {
          onMessage: message => {
            this.setState({
              messages: [...this.state.messages, message]
            });
          },
          onUserStartedTyping: user => {
            this.setState({
              usersWhoAreTyping: [...this.state.usersWhoAreTyping, user.name]
            });
          },
          onUserStoppedTyping: user => {
            this.setState({
              usersWhoAreTyping: this.state.usersWhoAreTyping.filter(
                username => username !== user.name
              )
            });
          },
          onPresenceChange: () => this.forceUpdate()
        }
      });
      return currentRoom.id;
    } catch (error) {
      console.error("error creating chatManager", error);
    }
  };