Pusher chatKit onMessage 挂钩在 Expo 应用程序中失败

Question

我在 Expo 中使用 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);
    }
  };

Pusher chatKit onMessage 挂钩在 Expo 应用程序中失败

Pusher chatKit onMessage hook fails in Expo app

pusher

react-native

expo