Question

我将React Native与Expo一起使用，并且能够使用以下代码创建用户+房间并向他们发送消息：

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

从文档中可以看到，<div class="menu"> <ul class="menu-list"> <li class="menu-list-item dropdown"> <a href="https://blah.com/aboutus/">About US</a> <ul class="dropdown-content"> <li class="menu-list-item"> <a href="https://blah.com/faq/">FAQ</a> </li> <li class="menu-list-item"> <a href="https://blah.com/page-2">Produkter</a> </li> </ul> </li> <li class="menu-list-item"> <a href="#">Link</a> </li> <li class="menu-list-item"> <a href="https://blah.com/contact-us">Kontakt Oss</a> </li> </ul> </div>钩子需要连接在subscribeRoom上，而不是在加入会议室时。

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

因此，可能在您的onMessage方法的第一个成功承诺之后添加了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应用程序中失败

2 个答案: