Tencent Cloud

Recent Pages

React

最后更新时间：2024-06-18 15:30:31

适用场景
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，打开会话进行聊天
注意：
以下代码中未填入 SDKAppID、userID 和 userSig，需在 步骤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 conversationID = '';
    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 conversationID = '';
    TUIConversationService.switchConversation(conversationID); 
  };
  
  useEffect(() => {
    init();
  }, []);
  
 // language support en or zh
  return (
    <TUIKit language={'en'}>
      <TUIChat/>
    </TUIKit>
  )
}
﻿
步骤4：创建一个应用
1. 登录 即时通信 IM 控制台 。
2. 单击“Create Application”，输入您的应用程序名称，然后单击“Create”。
﻿
﻿
﻿
3. 创建完成后，您可以在控制台概览页面看到新应用的状态、服务版本、SDKAppID、创建时间、标签、过期时间。
﻿
﻿
﻿
步骤5：获取 userID 和 userSig
单击目标应用卡片，进入账户管理页面，创建账户并获取userID。
﻿
﻿
﻿
进入 IM Console > UserSig Tools，指定 userID 生成 userSig 并获取 userSig 。userSig 相关介绍参见 生成 UserSig。
﻿
﻿
﻿
步骤6：启动项目
替换 App.tsx 中的 SDKAppID、userID、userSig，然后运行命令如下：
 npm run start
注意：
1. 请确保 步骤3 代码中  SDKAppID、userID 和 userSig 均已成功替换，如未替换将会导致项目表现异常。
2. userID 和 userSig  为一一对应关系，具体参见 生成 UserSig。
3. 如遇到项目启动失败，请检查 开发环境要求 是否满足。
步骤7：发送您的第一条消息
在输入框输入消息，按下 enter 键发送。
﻿
常见问题
什么是 UserSig？
UserSig 是用户登录即时通信 IM 的密码，其本质是对 UserID 等信息加密后得到的密文。
如何生成 UserSig？
UserSig 签发方式是将 UserSig 的计算代码集成到您的服务端，并提供面向项目的接口，在需要 UserSig 时由您的项目向业务服务器发起请求获取动态 UserSig。更多详情请参见 服务端生成 UserSig。
注意：
本文示例代码采用的获取 UserSig 的方案是在客户端代码中配置 SECRETKEY，该方法中 SECRETKEY 很容易被反编译逆向破解，一旦您的密钥泄露，攻击者就可以盗用您的腾讯云流量，因此该方法仅适合本地跑通功能调试。 正确的 UserSig 签发方式请参见上文。
是否支持 react 17.x 版本？
目前不支持 17.x 版本，仅支持 React ≥ v18.0。
参考文档
UIKit 相关：
﻿chat-uikit-react npm﻿
﻿Demo源码及跑通示例﻿
实现更多功能，请参考 ChatEngine API 文档：
﻿chat-uikit-engine API 手册﻿
﻿chat-uikit-engine npm﻿