tencent cloud

文档反馈

最后更新时间:2024-01-31 12:13:58
    

    开发环境要求

    React^18.0
    TypeScript
    node(12.13.0 ≤ node 版本 ≤ 17.0.0, 推荐使用 Node.js 官方 LTS 版本 16.17.0)
    npm(版本请与 node 版本匹配)

    chat-uikit-react 集成

    步骤1:创建项目

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

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

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

    步骤3:引入 chat-uikit-react 组件

    
    替换App.tsx中的内容,或者您可以新建一个组件引入
    注意:
    以下代码中未填入 SDKAppIDuserIDuserSig,需在步骤四中获取相关信息后进行替换。
    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';
    
    // create tim instance && login
    const init = async ():Promise<ChatSDK> => {
    return new Promise((resolve, reject) => {
    const tim = TIM.create({ SDKAppID: 0 });
    tim?.registerPlugin({ 'tim-upload-plugin': TIMUploadPlugin });
    const onReady = () => { resolve(tim); };
    tim.on(TIM.EVENT.SDK_READY, onReady);
    tim.login({
    userID: 'xxx',
    userSig: 'xxx',
    });
    });
    }
    
    export default 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>
    );
    }
    

    步骤4:获取 SDKAppID、userID 和 userSig

    
    SDKAppID:SDKAppID 是腾讯云 IM 服务区分客户帐号的唯一标识。我们建议每一个独立的 App 都申请一个新的 SDKAppID。不同 SDKAppID 之间的消息是天然隔离的,不能互通。 您可以在 即时通信 IM 控制台 查看所有的 SDKAppID,单击 创建新应用,可以创建新的 SDKAppID。
    
    userID:用户 ID。自行填写或者通过 即时通信 IM 控制台 进行创建和获取,单击目标应用卡片,进入应用的账号管理页面,即可创建账号并获取 userID。例如:
    
    userSig:用户登录即时通信 IM 的密码,其本质是对 UserID 等信息加密后得到的密文。进入 即时通信 IM 控制台,选择辅助工具下的 UserSig生成&校验 ,userSig相关介绍参见 生成 UserSig
    

    步骤5:启动项目

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

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

    1. 项目启动成功后,点击“+”图标,创建会话。
    2. 在输入框中搜索另一个用户的 userID(参考:步骤4 -> 创建账号并获取 userID)。
    3. 点击用户头像发起会话。
    4. 在输入框输入消息,按下"enter"键发送。
    

    常见问题

    什么是 UserSig?

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

    如何生成 UserSig?

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

    相关文档

    联系我们

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

    技术支持

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

    7x24 电话支持