Nightly Panic Munchies

    @asteriskzuo/react-native-easemob
    TypeScript icon, indicating that this package has built-in type declarations

    0.1.6 • Public • Published

    环信即时通讯 IM React-Native 快速入门

    更新时间:2022-04-14

    本文介绍如何快速集成环信即时通讯 IM React-Native SDK 实现单聊。

    环境要求

    • MacOS 10.15.7 或以上版本
    • Xcode 12.4 或以上版本,包括命令行工具
    • Android Studio 4.0 或以上版本,包括 JDK1.8 以上版本
    • NodeJs 16 或以上版本,包含 npm 包管理工具
    • Cocoapods 包管理工具
    • Yarn 编译运行工具
    • Watchman 调试工具
    • react-native-cli 命令行工具
    • ios-deploy 非Xcode编译react-native工具(可选)
    • react 版本不低于16.13.1
    • react-native 版本不低于0.63.4

    配置环境

    配置开发或者运行环境如果遇到问题,请参考这里

    注册开发者账号

    注册开发者账号,以及获取appkey获取,传送门

    创建react-native app项目

    npx react-native init rn_demo
    cd rn_demo
    yarn

    集成IM react-native SDK

    yarn add react-native-easemob

    如果是第一次运行yarn则还是额外执行一下命令:

    cd node_modules/@asteriskzuo/react-native-easemob/native_src/cpp 
    sh generate.sh --type rn

    代码实现

    1. 初始化
    ChatClient.getInstance().init(
      new ChatOptions({ appKey: 'easemob-demo#easeim', autoLogin: false })
    );
    1. 用户登录
    ChatClient.getInstance().login('asteriskhx1', 'qwer');
    1. 接收消息(可选)
    let msgListener = new (class ss implements ChatManagerListener {
      that: ConnectScreen;
      constructor(parent: any) {
        this.that = parent as ConnectScreen;
      }
      onMessagesReceived(messages: ChatMessage[]): void {
        console.log('ConnectScreen.onMessagesReceived', messages);
        this.that.msgId = (++ConnectScreen.count).toString();
        this.that.setState({ message: 'onMessagesReceived' });
      }
      onCmdMessagesReceived(messages: ChatMessage[]): void {
        console.log('ConnectScreen.onCmdMessagesReceived', messages);
        this.that.setState({ message: 'onCmdMessagesReceived' });
      }
      onMessagesRead(messages: ChatMessage[]): void {
        console.log('ConnectScreen.onMessagesRead', messages);
        this.that.setState({ message: 'onMessagesRead' });
      }
      onGroupMessageRead(groupMessageAcks: ChatGroupMessageAck[]): void {
        console.log('ConnectScreen.onGroupMessageRead', groupMessageAcks);
        this.that.setState({ message: 'onGroupMessageRead' });
      }
      onMessagesDelivered(messages: ChatMessage[]): void {
        console.log('ConnectScreen.onMessagesDelivered', messages);
        this.that.setState({ message: 'onMessagesDelivered' });
      }
      onMessagesRecalled(messages: ChatMessage[]): void {
        console.log('ConnectScreen.onMessagesRecalled', messages);
        this.that.setState({ message: 'onMessagesRecalled' });
      }
      onConversationsUpdate(): void {
        console.log('ConnectScreen.onConversationsUpdate');
        this.that.setState({ message: 'onConversationsUpdate' });
      }
      onConversationRead(from: string, to?: string): void {
        console.log('ConnectScreen.onConversationRead', from, to);
        this.that.setState({ message: 'onConversationRead' });
      }
    })(this);
    
    ChatClient.getInstance().chatManager.addListener(msgListener);
    1. 发送文本消息
    let msg = ChatMessage.createTextMessage(
      'asteriskhx2',
      Date.now().toString(),
      ChatMessageChatType.PeerChat
    );
    const callback = new (class s implements ChatMessageStatusCallback {
      that: ConnectScreen;
      constructor(cs: ConnectScreen) {
        this.that = cs;
      }
      onProgress(locaMsgId: string, progress: number): void {
        console.log('ConnectScreen.sendMessage.onProgress ', locaMsgId, progress);
      }
      onError(locaMsgId: string, error: ChatError): void {
        console.log('ConnectScreen.sendMessage.onError ', locaMsgId, error);
        if (this.that.messages.has(locaMsgId)) {
          let m = this.that.messages.get(locaMsgId);
          if (m) {
            m.status = ChatMessageStatus.FAIL;
          }
          this.that.updateMessageStatus(ChatMessageStatus.FAIL);
        }
      }
      onSuccess(message: ChatMessage): void {
        console.log('ConnectScreen.sendMessage.onSuccess', message.localMsgId);
        if (this.that.messages.has(message.localMsgId)) {
          this.that.messages.set(message.localMsgId, message);
    
          const m = this.that.messages.get(message.localMsgId);
          if (m) {
            m.status = ChatMessageStatus.SUCCESS;
          }
    
          this.that.updateMessageStatus(message.status);
        }
      }
    })(this);
    this.messages.set(msg.localMsgId, msg);
    ChatClient.getInstance()
      .chatManager.sendMessage(msg, callback)
      .then(() => console.log('send success'))
      .catch(() => console.log('send failed'));
    1. 退出登录
    ChatClient.getInstance().logout();
    1. 运行
    # 运行服务
    yarn start
    
    # 运行android
    # 如果是第一次运行android 则需要注意,需要手机和电脑在同一个网络,并且设置端口数据转发`adb reverse tcp:8081 tcp:8081`
    yarn android
    
    # 运行ios,默认是模拟器但react-native部分组件可能不支持
    yarn ios
    
    # 运行ios真机 需要使用xcode打开设置好签名, 并且运行`cd ios && pod install`
    npx react-native run-ios --device ${iphone-name}

    快速 demo 体验

    可以下载源码运行 example 下的 demo,进行体验。 传送门

    Q&A

    如果遇到问题可以参考这里

    Install

    npm i @asteriskzuo/react-native-easemob

    DownloadsWeekly Downloads

    5

    Version

    0.1.6

    License

    MIT

    Unpacked Size

    2.37 MB

    Total Files

    382

    Last publish

    Collaborators

    • asteriskzuo