集成单群聊 UIKit

大约 2 分钟

集成单群聊 UIKit

使用单群聊 UIKit 之前,你需要将其集成到你的应用中。

前提条件

开始前,确保你的开发环境满足如下条件:

操作步骤

第一步 安装单群聊 UIKit

使用 npm 或者 yarn 安装 easemob-chat-uikit

npm i easemob-chat-uikit --save;

第二步 引入所需组件

将单群聊 UIKit 组件导入到你的 React 项目中。

// 导入组件
import {
  UIKitProvider,
  Chat,
  ConversationList,
  // ...
} from "easemob-chat-uikit";

// 导入样式
import "easemob-chat-uikit/style.css";

第三步 初始化

项目中用到的组件都需要在 UIKitProvider 内部使用。使用单群聊 UIKit 时,首先要配置 UIKitProvider 参数,示例如下:

若要实现自动登录,初始化时需传入 userIdpasswordtoken

你需要在环信控制台创建 IM 用户,获取用户 ID 和密码。如果使用 token,你需要从你的 App Server 获取用户 token,详见使用环信用户 token 鉴权

import React from 'react';
import { UIKitProvider } from 'easemob-chat-uikit';
import 'easemob-chat-uikit/style.css';
ReactDOM.createRoot(document.getElementById('root') as Element).render(
  <div>
    <UIKitProvider
      initConfig={{
        appKey: 'your app key', // 你的 app key
        userId: 'user ID', // 用户 ID
        password: 'password', // 如果使用密码登录,传入密码。
      }}
    />
  </div>
)

如要了解更多配置,详见 UIKitProvider 文档

第四步 登录

当 Provider 渲染和销毁时,单群聊 UIKit 内部会自动完成登录登出。

关于自动和手动登录,详见登录文档

第五步 搭建界面

单群聊 UIKit 提供会话列表、聊天、群组设置和通讯录等组件。你可以使用这些组件搭建界面,这些组件支持自定义,具体可以参考相应组件的文档。

单群聊 UIKit 提供的 container 级别组件使用 flex 布局,默认宽高均为 100%,所以需要自己实现布局,然后将组件放在布局的容器组件中。

下面以会话列表和聊天组件组成的界面为例:

import React from "react";
import { Chat, MessageList, TextMessage } from "easemob-chat-uikit";
import "easemob-chat-uikit/style.css";

const App = () => {
  return (
    <div style={{ display: "flex" }}>
      <div style={{ width: "30%", height: "100%" }}>
        <ConversationList />
      </div>
      <div style={{ width: "70%", height: "100%" }}>
        <Chat />
      </div>
    </div>
  );
};

相关参考