腾讯云IM即时通信引入（React Web端组件式）

开发环境要求

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：创建项目

创建一个新的 React 项目，您可自行选择是否需要使用 ts 模板。

bash 复制代码

npx create-react-app sample-chat --template typescript

bash 复制代码

cd sample-chat

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

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

bash 复制代码

pnpm install @tencentcloud/chat-uikit-react

官方文档npm引入的包不全，我是报错了一个一个装的，这里是total:

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

替换 App.tsx 中的内容，或者您可以新建一个组件引入。

注意：

以下代码中未填入 SDKAppID、userID 和 userSig，需在步骤4 中获取相关信息后进行替换。

bash 复制代码

import React, { useEffect, useState } from 'react';

import { TUIKit } from '@tencentcloud/chat-uikit-react';

import { TUILogin } from '@tencentcloud/tui-core';

import '@tencentcloud/chat-uikit-react/dist/cjs/index.css';

export default function SampleChat() {

const [chat, setChat] = useState<any>();

const init = () => {

const loginInfo: any = {

SDKAppID: 0, // Your SDKAppID

userID: 'xxx', // User ID

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

userSig: 'xxx',

// 如果您需要发送图片、语音、视频、文件等富媒体消息，请设置为 true

useUploadPlugin: true,

};

TUILogin.login(loginInfo).then(() => {

const { chat } = TUILogin.getContext();

setChat(chat);

}).catch(() => {});

}

useEffect(() => {

(async ()=>{

const chat = await init()

setChat(chat)

})()

}, [])

return (

<TUIKit chat={chat} language={'en'}></TUIKit> // language 支持 en / zh

)

}