快速开始

大约 3 分钟

快速开始

利用单群聊 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

第二步 集成 shengwang-chat-uikit

安装 shengwang-chat-uikit

  • 若通过 npm 安装，运行以下命令：
npm install shengwang-chat-uikit
  • 若通过 yarn 安装，运行以下命令：
yarn add shengwang-chat-uikit

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

在声网控制台open in new window按照如下步骤创建用户：

  1. 展开控制台左上角下拉框，选择需要开通即时通讯 IM 服务的项目。

  2. 点击左侧导航栏的全部产品。

  3. 在下拉列表中找到即时通讯 IM 并点击。

  4. 在即时通讯 IM 页面，进入运营管理标签页。

  5. 在用户 页签下，点击创建 IM 用户。

  6. 在弹出的对话框中，配置用户相关参数，点击确定。

创建用户后，在用户列表点击对应的用户的操作一栏中的更多，选择查看 Token。

在弹出的对话框中，可以查看用户 Token，也可以点击重新生成，生成用户 token。

在开发环境中，你需要从你的 App Server 获取用户 token，详见使用 Token 鉴权。

将 shengwang-chat-uikit 库导入你的代码中：

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

// 注意：在使用 UIKit 前，请先设置 userId， accessToken 和 appId。
const userId = "userId";
const accessToken = "accessToken";
const appId = "your appId";

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

  return (
    <div style={{ display: "flex", height: "100vh" }}>
      <div style={{ width: "350px", borderRight: "1px solid #ddd" }}>
        <ConversationList />
      </div>
      <div style={{ flex: "1" }}>
        <Chat />
      </div>
    </div>
  );
};
class App extends Component {
  render() {
    return (
      <UIKitProvider
        initConfig={{
          appId: appId,
        }}
      >
        <ChatApp />
      </UIKitProvider>
    );
  }
}

export default App;

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

  1. 运行项目：
npm run start

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

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

提示

使用新创建的 App ID 时，由于没有联系人，需先添加好友。

发送第一条消息
发送第一条消息
上次编辑于: