npx create-react-app sample-chat --template typescript
cd sample-chat
npm install @tencentcloud/chat-uikit-react
import React, { useEffect, useState } from 'react';import { ChatSDK } from '@tencentcloud/chat';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<ChatSDK>();const init = () => {const loginInfo = {SDKAppID: 0, // Your SDKAppID. Get it from Step 4userID: 'xxx', // Your userID. Get it from Step 5// UserSig is a cipher for a user to log in to IM. It is the ciphertext generated by encrypting information such as userID. Get it from Step 5userSig: 'xxx', // Your userSig. Get it from Step 5useUploadPlugin: true,};TUILogin.login(loginInfo).then(() => {const { chat } = TUILogin.getContext();setChat(chat);}).catch(() => {});}useEffect(() => {init();}, [])return (<TUIKit chat={chat} language={'en'}></TUIKit> // language support en or zh)}
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
import React, { useEffect, useState } from 'react';import { ChatSDK } from '@tencentcloud/chat';import { TUILogin } from '@tencentcloud/tui-core';import { TUIKit } from './TUIKit/index';export default function SampleChat() {const [chat, setChat] = useState<ChatSDK>();const init = () => {const loginInfo = {SDKAppID: 0, // Your SDKAppID. Get it from Step 4userID: 'xxx', // Your userID. Get it from Step 5// UserSig is a cipher for a user to log in to IM. It is the ciphertext generated by encrypting information such as userID. Get it from Step 5userSig: 'xxx', // Your userSig. Get it from Step 5useUploadPlugin: true,};TUILogin.login(loginInfo).then(() => {const { chat } = TUILogin.getContext();setChat(chat);}).catch(() => {});}useEffect(() => {init();}, [])return (<TUIKit chat={chat} language={'en'}></TUIKit> // language support en or zh)}
npm run start
SDKAppID
、userID
和 userSig
均已成功替换,如未替换将会导致项目表现异常。userID
和 userSig
为一一对应关系,具体参见 生成 UserSig。
本页内容是否解决了您的问题?