腾讯云即时通信IMWeb（React）_AI解决方案_同尘科技



开发环境要求

React ≥ v18.0TypeScriptnode（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 组件

替换 App.tsx 中的内容，或者您可以新建一个组件引入。注意 以下代码中未填入 SDKAppID、userID 和 userSig，需在 步骤4 中获取相关信息后进行替换。

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 && loginconst init = async ():Promise => {    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();    useEffect(() => {        (async ()=>{            const tim = await init()            setTim(tim)        })()    }, [])
    return (        
                    
    );}

步骤4：获取 SDKAppID、userID 和 userSig

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


步骤5：启动项目

 npm run start

注意1. 请确保 步骤三 代码中 SDKAppID、userID 和 userSig 均已成功替换，如未替换将会导致项目表现异常。
2. userID 和 userSig 为一一对应关系，具体参见 生成 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 签发方式请参见上文。

相关文档

SDK API 手册SDK 更新日志

对即时通讯IM解决方案有疑惑？想了解解决方案收费？ 联系解决方案专家

腾讯云限时活动1折起，即将结束： 马上收藏

同尘科技为腾讯云授权服务中心，购买腾讯云享受折上折，更有现金返利:同意关联，立享优惠

阿里云解决方案也看看？： 点击对比阿里云的解决方案