快速开始

大约 3 分钟

快速开始

利用环信单群聊 UIKit，你可以轻松实现单群和群聊。本文介绍如何快速实现在单聊和群聊会话中发送消息。

前提条件

开始前，请确保你的开发环境满足以下条件：

  • DevEco Studio NEXT Release（5.0.3.900）及以上；
  • HarmonyOS SDK API 12 及以上；
  • HarmonyOS NEXT.0.0.71 或以上版本的模拟器或者真机；
  • 有效的环信即时通讯 IM 开发者账号和 App Key，请参见 环信控制台文档。

项目准备

本节介绍将单群聊 UIKit 引入项目中的必要环境配置。

  1. 打开 DevEco Studio，点击 Create Project。

  2. 在 Choose Your Ability Template 界面，选择 Application > Empty Ability，然后点击 Next。

  3. 在 Configure Your Project 界面，依次填入以下内容：

    • Project name：你的 HarmonyOS 项目名称，如 HelloWorld。
    • Bundle name：你的项目包的名称，如 com.hyphenate.helloworld。
    • Save location：项目的存储路径。
    • Compatible SDK：项目的支持的最低 API 等级，选择 5.0.0(12) 及以上。
    • Module name：module的名称，默认为 entry。

  4. 点击 Finish。根据屏幕提示，安装所需插件。

上述步骤使用 DevEco Studio 5.0.1 Release（5.0.5.315） 示例。

  1. 在项目中引入 SDK。

远程依赖

在项目根目录下执行如下命令：

ohpm install @easemob/chatuikit

提示

上面的命令在根目录执行，会将 SDK 依赖添加到项目级别；如果要将 SDK 依赖到 Module 级别，需要在对应的 Module 目录下执行上面的命令。

若要查看 UIKit 的最新版本号，请参见 更新日志。

源码依赖

从 GitHub 获取 UIKit 源码open in new window，按照下面的方式集成：

  • 点击 Import，选择 Import Module，导入 chatuikit 模块。
  • 在项目 Module 中引入 chatuikit 模块。

修改模块目录的 oh-package.json5 文件，在 dependencies 节点增加依赖声明。

"dependencies": {
    "@easemob/chatuikit": "file:./../chatuikit"
}

然后点击同步按钮，同步完成后，就可以在模块中使用 chatuikit 。

  1. 添加项目权限。

在模块的 module.json5 ，例如：HelloWorld 中 entry 模块的 module.json5 中，配置示例如下：

{
  module: {
    requestPermissions: [
      {
        name: "ohos.permission.GET_NETWORK_INFO",
      },
      {
        name: "ohos.permission.INTERNET",
      },
      {
        "name": "ohos.permission.MICROPHONE",
        "reason": "$string:record_permission_reason",
        'usedScene': {
          "abilities": [
            "EntryAbility"
          ],
          "when": "always"
        }
      }
    ],
  },
}

需要在对应模块的 string.json 文件中增加如下：

{
    "name": "record_permission_reason",
    "value": "录制语音需要"
}

实现发送第一条单聊消息

本节介绍如何通过单群聊 UIKit 实现发送第一条单聊消息。

创建快速开始页面及实现代码逻辑

  1. 打开 entry/src/main/ets/pages/Index.ets 文件，并替换为如下内容：
import { ChatPageParams, ChatUIKitClient, ChatClient, ChatError, ChatOptions, ConversationType } from '@easemob/chatuikit';
import { promptAction } from '@kit.ArkUI';

@Entry
@Component
struct Index {
  pathStack: NavPathStack = new NavPathStack();
  private appKey: string = [项目的AppKey]; // 将[项目的AppKey]替换为项目的 App Key 字符串
  private userId: string = '';
  private password: string = '';
  private peerId: string = '';

  private initSDK() {
    let options = new ChatOptions({
      appKey: this.appKey
    });
    options.setAutoLogin(false);
    let client = ChatClient.getInstance();
    client.init(getContext(), options);
    ChatUIKitClient.init(client);
  }

  private login() {
    if (!this.userId || !this.password) {
      promptAction.showToast({message: "UserId or password cannot be empty!"});
      return;
    }
    ChatUIKitClient.loginWithPassword(this.userId, this.password)
      .then(() => {
        promptAction.showToast({message: "Login successful!"});
      })
      .catch((e: ChatError) => {
        promptAction.showToast({message: "Login failed: "+e.description});
      })
  }

  private logout() {
    ChatUIKitClient.logout(false)
      .then(() => {
        promptAction.showToast({message: "Logout successful!"});
      })
  }

  private startChat() {
    if (!this.peerId) {
      promptAction.showToast({message: "Peer id cannot be empty!"});
      return;
    }
    this.pathStack.pushPath({name: 'ChatPage', param: {
      conversationId: this.peerId,
      conversationType: ConversationType.Chat
    } as ChatPageParams})
  }

  aboutToAppear(): void {
    this.initSDK();
  }

  build() {
    Navigation(this.pathStack) {
      Column() {
        TextInput({placeholder: 'UserId'})
          .commonStyle()
          .onChange(value => this.userId = value)

        TextInput({ placeholder: 'Password' })
          .commonStyle()
          .type(InputType.Password)
          .onChange(value => this.password = value)

        Button('Login')
          .commonStyle()
          .onClick(()=> {
            this.login();
          })

        Button('Logout')
          .commonStyle()
          .onClick(()=> {
            this.logout();
          })

        TextInput({placeholder: 'PeerId'})
          .commonStyle()
          .onChange(value => this.peerId = value)

        Button('Start Chat')
          .commonStyle()
          .onClick(()=> {
            this.startChat();
          })
      }
      .width('100%')
      .height('100%')
    }
  }

  @Styles
  commonStyle() {
    .width('80%')
    .margin({
      top: 20
    })
  }
}
  1. 现在可以测试你的应用。

发送第一条消息

在聊天页面下方输入消息，然后点击发送按钮发送消息。

发送第一条消息
发送第一条消息

测试应用

  1. 在 DevEco Studio 中，点击 Run ‘entry’ 按钮，将应用运行到你的设备或者模拟器上。

  2. 输入用户 ID 和密码，点击 Login 按钮进行登录，登录成功或者失败有提示，或者通过 Log 查看。

  3. 在另一台设备或者模拟器上登录另一个账号。

  4. 两台设别或者模拟器分别输入对方的账号，并点击 Start Chat 按钮，进入聊天页面。现在你可以在两个账号间进行聊天。

环信 IM 文档 Version: 1.0.0 ©️环信