tencent cloud

文档反馈

最后更新时间:2024-07-10 16:26:41

    适用场景

    Web & H5 平台,独立集成私信聊天(1V1)或者群聊(Group),例如房产中介咨询、电商在线客服、保险远程定损等。
    

    开发环境要求

    React ≥ v18.0 (17.x 版本不支持)
    TypeScript
    node(12.13.0 ≤ node 版本 ≤ 17.0.0, 推荐使用 Node.js 官方 LTS 版本 16.17.0)
    npm(版本请与 node 版本匹配)

    chat-uikit-react 集成

    步骤1:创建项目

    1. 创建一个新的 React 项目,您可自行选择是否需要使用 ts 模板。
    npx create-react-app sample-chat --template typescript
    2. 创建项目完成后,切换到项目所在目录。
    cd sample-chat

    步骤2:下载 chat-uikit-react 组件

    通过 npm 方式下载 chat-uikit-react 并在项目中使用,另外在 GitHub 中也提供相关的 开源代码,您也可在此基础上进行开发您自己的组件库。
    npm install @tencentcloud/chat-uikit-react

    步骤3:引入 chat-uikit-react 组件,填写 userID / groupID,打开会话进行聊天

    注意:
    以下代码中未填入 SDKAppIDuserIDuserSig,需在 步骤4 中获取相关信息后进行替换。
    说明:
    conversationID:会话 ID。会话ID组成方式:
    C2C${userID}(单聊)
    GROUP${groupID}(群聊)
    关于群聊:
    通过调用 API createGroup 可获取 groupID
    如果是直播群, 需要通过调用 API joinGroup 加入群,才可以进行聊天。
    进入聊天
    通过调用 API switchConversation,传入 conversationID 进入聊天页面。
    npm 集成方式
    源码集成方式
    替换 App.tsx 中的内容,或者您可以新建一个组件引入。
    import React, { useEffect } from 'react';
    import { TUIKit, TUIChat } from '@tencentcloud/chat-uikit-react';
    import { TUILogin } from '@tencentcloud/tui-core';
    import { TUIConversationService } from "@tencentcloud/chat-uikit-engine";
    import '@tencentcloud/chat-uikit-react/dist/cjs/index.css';
    
    const config = {
    SDKAppID: 0, // Your SDKAppID, Get it from Step 4
    userID: 'test-user1', // Login UserID
    userSig: '', // Your userSig
    }
    export default function SampleChat() {
    const init = () => {
    TUILogin.login({
    ...config,
    useUploadPlugin: true
    }).then(() => {
    openChat();
    }).catch(() => {});
    }
    
    const openChat = () => {
    // 1v1 chat: conversationID = `C2C${userID}`
    // group chat: conversationID = `GROUP${groupID}`
    const userID = 'test-user2'; // userID: Recipient of the Message userID, Get it from Step 5
    const conversationID = `C2C${userID}`;
    TUIConversationService.switchConversation(conversationID);
    };
    
    useEffect(() => {
    init();
    }, []);
    // language support en or zh
    return (
    <TUIKit language={'en'}>
    <TUIChat/>
    </TUIKit>
    )
    }
    1. 将 TUIKit 拷贝到自己项目的 src 文件目录下:
    macOS 端
    Windows 端
    mkdir -p ./src/TUIKit && rsync -av ./node_modules/@tencentcloud/chat-uikit-react/ ./src/TUIKit
    xcopy .\\node_modules\\@tencentcloud\\chat-uikit-react .\\src\\TUIKit /i /e
    2. 替换 App.tsx 中的内容,或者您可以新建一个组件引入。
    import React, { useEffect, useState } from 'react';
    import { TUILogin } from '@tencentcloud/tui-core';
    import { TUIKit, TUIChat } from './TUIKit/index';
    import { TUIConversationService } from "@tencentcloud/chat-uikit-engine";
    
    const config = {
    SDKAppID: 0, // Your SDKAppID
    userID: 'test-user1', // Login UserID
    userSig: '', // Your userSig
    }
    export default function SampleChat() {
    const init = () => {
    TUILogin.login({
    ...config,
    useUploadPlugin: true
    }).then(() => {
    openChat();
    }).catch(() => {});
    }
    
    const openChat = () => {
    // 1v1 chat: conversationID = `C2C${userID}`
    // group chat: conversationID = `GROUP${groupID}`
    const userID = 'test-user2'; // userID: Recipient of the Message userID, Get it from Step 5
    const conversationID = `C2C${userID}`;
    TUIConversationService.switchConversation(conversationID);
    };
    useEffect(() => {
    init();
    }, []);
    // language support en or zh
    return (
    <TUIKit language={'en'}>
    <TUIChat/>
    </TUIKit>
    )
    }
    

    步骤4:创建一个应用

    1. 登录 Chat Console
    2. 单击“Create Application”,输入您的应用程序名称,然后单击“Create”。
    
    
    
    3. 创建完成后,您可以在控制台概览页面看到新应用的状态、服务版本、SDKAppID、创建时间、标签、过期时间。
    
    
    

    步骤5:获取 userID 和 userSig

    userID
    单击进入您上面创建的 Application,会在左侧边栏看到 Chat 产品入口,单击进入。
    进入 Chat 产品子页面后,点击 Users,进入用户管理页面。
    单击 Create account,弹出创建账号信息填写框。如果只是普通成员,我们建议您选择General 类型。
    为了您更好的体验消息收发等功能,建议您创建两个 userID。
    
    
    
    userSig ,可使用控制台提供的开发工具实时生成,开发工具请点击 Chat Console > Development Tools > UserSig Tools > Signature (UserSig) Generator
    
    
    

    步骤6:启动项目

    替换 App.tsx 中的 SDKAppID、userID、userSig,然后运行命令如下:
    npm run start
    注意:
    1. 请确保 步骤3 代码中 SDKAppIDuserIDuserSig 均已成功替换,如未替换将会导致项目表现异常。
    2. userIDuserSig 为一一对应关系,具体参见 生成 UserSig
    3. 如遇到项目启动失败,请检查 开发环境要求 是否满足。

    步骤7:发送您的第一条消息

    在输入框输入消息,按下 enter 键发送。
    

    常见问题

    什么是 UserSig?

    UserSig 是用户登录 Chat 的密码,其本质是对 UserID 等信息加密后得到的密文。

    如何生成 UserSig?

    UserSig 签发方式是将 UserSig 的计算代码集成到您的服务端,并提供面向项目的接口,在需要 UserSig 时由您的项目向业务服务器发起请求获取动态 UserSig。更多详情请参见 服务端生成 UserSig
    注意:
    本文示例代码采用的获取 UserSig 的方案是在客户端代码中配置 SECRETKEY,该方法中 SECRETKEY 很容易被反编译逆向破解,一旦您的密钥泄露,攻击者就可以盗用您的腾讯云流量,因此该方法仅适合本地跑通功能调试。 正确的 UserSig 签发方式请参见上文。

    是否支持 react 17.x 版本?

    目前不支持 17.x 版本,仅支持 React ≥ v18.0。

    参考文档

    UIKit 相关:

    实现更多功能,请参考 ChatEngine API 文档:

    联系我们

    联系我们,为您的业务提供专属服务。

    技术支持

    如果你想寻求进一步的帮助,通过工单与我们进行联络。我们提供7x24的工单服务。

    7x24 电话支持