快速开始

大约 2 分钟

快速开始

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

前提条件

开启单群聊 UIKit 服务前,需确保已经具备以下条件:

支持的浏览器

浏览器支持的版本
IE 浏览器11 或以上
Edge43 或以上
Firefox10 或以上
Chrome54 或以上
Safari11 或以上

实现发送第一条单聊消息

第一步 创建 chat-uikit 项目

# 安装 CLI 工具。
npm install create-react-app
# 构建一个 my-app 的项目。
npx create-react-app my-app
cd my-app
项目目录:
├── package.json
├── public                  # Webpack 的静态目录。
│   ├── favicon.ico
│   ├── index.html          # 默认的单页面应用。
│   └── manifest.json
├── src
│   ├── App.css             # App 根组件的 CSS。
│   ├── App.js              # App 组件代码。
│   ├── App.test.js
│   ├── index.css           # 启动文件样式。
│   ├── index.js            # 启动文件。
│   ├── logo.svg
│   └── serviceWorker.js
└── yarn.lock

第二步 集成 easemob-chat-uikit

安装 easemob-chat-uikit

  • 若通过 npm 安装,运行以下命令:
npm install easemob-chat-uikit --save
  • 若通过 yarn 安装,运行以下命令:
yarn add easemob-chat-uikit

使用 easemob-chat-uikit 组件构建应用

为了方便快速体验,你可以在环信即时通讯云控制台open in new window应用概览 > 用户认证页面创建用户并查看用户 token。用户认证页面中的用户仅用于快速体验或调试目的。

在开发环境中,你需要在环信控制台创建 IM 用户,从你的 App Server 获取用户 token,详见使用环信用户 token 鉴权

将 easemob-chat-uikit 库导入你的代码中:

// App.js
import React, { Component, useEffect } from "react";
import {
  Provider,
  Chat,
  ConversationList,
  useClient,
  rootStore,
} from "easemob-chat-uikit";
import "easemob-chat-uikit/style.css";

const ChatApp = () => {
  const client = useClient();
  useEffect(() => {
    client &&
      client
        .open({
          user: "",
          token: "",
        })
        .then((res) => {
          // 创建会话
          rootStore.conversationStore.addConversation({
            chatType: "singleChat", // 单聊和群聊分别为 'singleChat' 和 'groupChat'。
            conversationId: "userId", // 单聊为对端用户 ID,群聊为群组 ID。
            name: "用户1", // 单聊为对端用户昵称,群聊为群组名称。
            lastMessage: {},
          });
        });
  }, [client]);

  return (
    <div>
      <div>
        <ConversationList />
      </div>
      <div>
        <Chat />
      </div>
    </div>
  );
};

class App extends Component {
  render() {
    return (
      <Provider
        initConfig={{
          appKey: "your app key",
        }}
      >
        <ChatApp />
      </Provider>
    );
  }
}

export default App;

第三步 运行项目并发送你的第一条消息

  1. 运行项目:
npm run start

在浏览器可看到你的应用。

  1. 输入你的第一条消息并发送。

提示

使用自定义 App Key 时,由于没有联系人,需先添加好友。

img