tencent cloud

文档反馈

快速入门(Web)

最后更新时间:2024-01-31 11:13:42
    Chat UIKit 是基于腾讯云 IM SDK 的一款 UI 组件库,它提供了一些通用的 UI 组件,包含会话、聊天、关系链、群组、音视频通话等功能。 基于 UI 组件您可以像搭积木一样快速搭建起自己的业务逻辑。 Chat UIKit 中的组件在实现 UI 功能的同时,会调用 IM SDK 相应的接口实现 IM 相关逻辑和数据的处理,因而开发者在使用 Chat UIKit 时只需关注自身业务或个性化扩展即可。
    

    Example App

    我们已经构建了用于展示聊天功能的实例演示程序,您可以在我们的网站上预览这些 demo,另外在 GitHub 中也提供相关的开源代码
    img.png
    

    跑通demo

    步骤一:下载源码

    # Run the code in CLI
    $ git clone https://github.com/TencentCloud/chat-uikit-react
    # Go to the project
    $ cd chat-uikit-react
    # Install dependencies of the demo
    $ npm install && cd examples/sample-chat && npm install

    步骤二:配置 demo

    1. 打开examples/sample-chat项目,通过路径./examples/sample-chat/src/debug/GenerateTestUserSig.js找到GenerateTestUserSig.js文件。
    2. GenerateTestUserSig.js文件中设置 SDKAPPIDSECRETKEY ,其值可以在IM控制台中获取。 点击目标应用卡片,进入其配置页面。
    
    3. Basic Information 区域,点击 Display key,将密钥信息复制并保存到 GenerateTestUserSig 文件中。
    注意:
    本文提到的生成 UserSig 的方案是在客户端代码中配置 SECRETKEY,该方法中 SECRETKEY 很容易被反编译逆向破解,一旦您的密钥泄露,攻击者就可以盗用您的腾讯云流量,因此该方法仅适合本地跑通 Demo 和功能调试。
    正确的 UserSig 签发方式是将 UserSig 的计算代码集成到您的服务端,并提供面向 App 的接口,在需要 UserSig 时由您的 App 向业务服务器发起请求获取动态 UserSig。更多详情请参见 服务端生成 UserSig

    步骤三:启动项目

    # Launch the project
    $ cd examples/sample-chat
    $ npm run start

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

    1. 项目启动成功后,点击“+”图标,进行创建会话。
    2. 在输入框中搜索另一个用户的 userID。
    3. 点击用户头像发起会话。
    4. 在输入框输入消息,按下"enter"键发送。
    

    集成 chat-uikit-react

    步骤一:Installation

    $ npm install @tencentcloud/chat-uikit-react

    步骤二:Usage

    import React, { useEffect, useState } from 'react';
    import { TUIKit } from '@tencentcloud/chat-uikit-react';
    import '@tencentcloud/chat-uikit-react/dist/cjs/index.css';
    import TIM, { ChatSDK } from 'tim-js-sdk/tim-js-friendship';
    import TIMUploadPlugin from 'tim-upload-plugin';
    
    // 生成tim实例对象并完成登陆
    const init = async () => {
    return new Promise((resolve, reject) => {
    const tim = TIM.create({ SDKAppID: 000 });
    tim?.registerPlugin({ 'tim-upload-plugin': TIMUploadPlugin });
    const onReady = () => { resolve(tim); };
    tim.on(TIM.EVENT.SDK_READY, onReady);
    tim.login({
    userID: 'xxx',
    userSig: 'xxx',
    });
    });
    }
    
    export function SampleChat() {
    const [tim, setTim] = useState<ChatSDK>();
    useEffect(() => {
    (async ()=>{
    const tim = await init()
    setTim(tim)
    })()
    }, [])
    
    return (
    <div style={{height: '100vh',width: '100vw'}}>
    <TUIKit tim={tim}></TUIKit>
    </div>
    );
    }
    联系我们

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

    技术支持

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

    7x24 电话支持