腾讯云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:创建项目

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

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

2. 创建项目完成后,切换到项目所在目录。

cd sample-chat

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

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

pnpm install @tencentcloud/chat-uikit-react
 官方文档npm引入的包不全,我是报错了一个一个装的,这里是total:

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

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

注意:

以下代码中未填入 SDKAppIDuserIDuserSig,需在 步骤4 中获取相关信息后进行替换。


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 SDKAppIDuserID: 'xxx', // User ID// UserSig 是用户登录即时通信 IM 的密码,其本质是对 UserID 等信息加密后得到的密文。userSig: 'xxx',// 如果您需要发送图片、语音、视频、文件等富媒体消息,请设置为 trueuseUploadPlugin: 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)}

步骤4:获取 SDKAppID、userID 和 userSig

SDKAppID:SDKAppID 是腾讯云 IM 服务区分客户账号的唯一标识。我们建议每一个独立的 App 都申请一个新的 SDKAppID。不同 SDKAppID 之间的消息是天然隔离的,不能互通。

您可以在 即时通信 IM 控制台 查看所有的 SDKAppID,单击 创建新应用,可以创建新的 SDKAppID。

userID:用户 ID。自行填写或者进入应用的账号管理页面,创建账号并获取 userID。

userSig:用户登录即时通信 IM 的密码,其本质是对 UserID 等信息加密后得到的密文。进入 即时通信 IM 控制台,选择辅助工具下的 UserSig生成&校验,userSig相关介绍参见 生成 UserSig。

官方文档的Usersig生成位置没有更新,在这里

步骤5:启动项目

pnpm run start

注意:

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

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

1. 项目启动成功后,单击 + 图标,创建会话。

2. 在输入框中搜索另一个用户的 userID(参考:步骤4 -> 创建账号并获取 userID)。

3. 单击用户头像发起会话。

4. 在输入框输入消息,按下 enter 键发送。(我自己忘了按enter,一直傻等着,以为有问题,shit~)

常见问题

是否支持 react 17.x 版本?

目前不支持 17.x 版本,仅支持 React ≥ v18.0。

相关文档

参考文档

UIKit 相关:

chat-uikit-react npm

Demo源码及跑通示例

实现更多功能,请参考 ChatEngine API 文档:

chat-uikit-engine API 手册

chat-uikit-engine npm

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/6451.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

链表(基于C语言单向链表)

链表的实现的思想 链表表示一种是基于链接结构的线性表&#xff0c;链表实现的思想如下&#xff1a; 1、将表中的元素分别储存在一批独立的储存块里面。 2、表结构中的结点都能找到与之相关的下一个结点。 3、在前一个结点里用链表的方式显示的记录与下个结点之间的关联。 链…

STM32标准库编译流程

导入库函数 在ST官方固件库中找到STM32F10x_StdPeriph_Lib_V3.5.0.zip文件&#xff0c;解压&#xff0c;打开Libraries,接着打开STM32F10x_StdPeriph_Driver文件夹&#xff0c;继续点击src&#xff0c;看到库函数源文件&#xff1a; 将其复制到keil建立的工程的文件中&#xf…

SNR: Signal to Noise Ratio

https://www.xx.com/watch?vmyrZ_R6xIZA Fang, Y., Armin, A., Meredith, P. et al. Accurate characterization of next-generation thin-film photodetectors. Nature Photon 13, 1–4 (2019). https://doi.org/10.1038/s41566-018-0288-z Wang, F., Zhang, T., Xie, R. e…

抖音直播植物大战僵尸杂交版v1.2安装包—可用于抖音直播

植物大战僵尸杂交版是由玩家自制的一款改版游戏。在这个版本中&#xff0c;各种类型的植物都被融合成了全新的形态。比如&#xff0c;向日葵和阳光菇可以产出更多的阳光&#xff0c;坚果墙和火炬树桩合体成为能抗能辅的超级植物等等。这些融合植物种类繁多&#xff0c;各具特色…

从不平凡Image文件夹,自定义读取img和label,构造dataset

问题描述 torchvision.datasets.ImageFolder 假定&#xff1a;子文件名子文件夹的图像的标签 但在KDEF文件夹中&#xff0c;子文件夹下有所有的类&#xff0c;不宜用ImageFolder读取path来得到dataset My 实现&#xff1a; # how to build dataset? from torch.utils import …

AI-数学-高中-47导数与几何意义

原作者视频&#xff1a;【导数】【考点精华】7导数与几何意义考点解析&#xff08;基础&#xff09;_哔哩哔哩_bilibili 该点处切点的斜率 该点处导函数的值 示例1&#xff1a; 导数问题解决最常用方法&#xff1a;参数分离&#xff0c;在左边函数有解的值域范围内。 示例2&…

Netty 网络编程深入学习【一】:ByteBuffer 源码解析

ByteBuffer源码阅读 ByteBuffer是一个用于处理字节数据的缓冲区类。它是Java NIO 包的一部分&#xff0c;提供了一种高效的方式来处理原始字节数据。 ByteBuffer 可以用来读取、写入、修改和操作字节数据&#xff0c;它是一种直接操作字节的方式&#xff0c;比起传统的 InputSt…

基于Spring Boot的在线BLOG网设计与实现

基于Spring Boot的在线BLOG网设计与实现 开发语言&#xff1a;Java框架&#xff1a;springbootJDK版本&#xff1a;JDK1.8数据库工具&#xff1a;Navicat11开发软件&#xff1a;eclipse/myeclipse/idea 系统部分展示 前台首页管理界面&#xff0c;用户经过登录前台首页查看通…

【UnityRPG游戏制作】Unity_RPG项目_玩家逻辑相关

&#x1f468;‍&#x1f4bb;个人主页&#xff1a;元宇宙-秩沅 &#x1f468;‍&#x1f4bb; hallo 欢迎 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍&#x1f4bb; 本文由 秩沅 原创 &#x1f468;‍&#x1f4bb; 收录于专栏&#xff1a;就业…

HSDB使用教程

HSDB&#xff1a;Hostspot Debugger&#xff0c;JVM内置的工具&#xff0c;用于深入分析JVM运行时的内部状态 启动HSDB java -cp D:/tools/jdk-1.8/lib/sa-jdi.jar sun.jvm.hotspot.HSDB 获取进程id jps 连接到指定进程 查找类 通过查询查找对象 输入查询语句 select d from …

100/篇论文修改?提高营收从拒绝客户开始

进入4月份以来新进询盘客户可谓惨淡&#xff0c;为了完成业绩突破我接了一个并不擅长的订单&#xff0c;最终失败赔钱收场&#xff0c;痛定思痛我决定拒掉不可靠的项目&#xff1a; 不熟悉的领域 超出团队承载范围的 低价绝对低价的项目 今天收到客户询盘我非常的开心&#…

【Java EE】多线程(二)Thread 类与常用方法

&#x1f4da;博客主页&#xff1a;爱敲代码的小杨. ✨专栏&#xff1a;《Java SE语法》 | 《数据结构与算法》 | 《C生万物》 |《MySQL探索之旅》 |《Web世界探险家》 ❤️感谢大家点赞&#x1f44d;&#x1f3fb;收藏⭐评论✍&#x1f3fb;&#xff0c;您的三连就是我持续更…

直播素材安卓情侣飞行棋v2.22 仿dofm 支持自定义模式—可用直播素材

一个情侣间增进友谊的小游戏非常好玩&#xff0c;适合男孩女孩之间增进感情&#xff01;快和你暗恋的女孩一块玩吧&#xff0c;极速升温 永久免费&#xff01;解锁激活码内容全部畅玩&#xff01;全网最强超级给力&#xff01;真人说书音频 网盘自动获取 链接&#xff1a;http…

重要综述!全文翻译!宫鹏教授、陈镜明教授、梁顺林教授等《Nature Climate Change》!

2013年&#xff0c;由宫鹏教授、陈镜明教授和梁顺林教授等联合发表了一篇《Nature Climate Change》综述文章&#xff0c;其主题是卫星遥感在全球变化中的作用研究。&#xff08;已被引510次&#xff0c;来源谷歌学术&#xff09;。 卫星遥感方式对于气象问题、大气、陆地和海洋…

【机器学习】集成方法---Boosting之AdaBoost

一、Boosting的介绍 1.1 集成学习的概念 1.1.1集成学习的定义 集成学习是一种通过组合多个学习器来完成学习任务的机器学习方法。它通过将多个单一模型&#xff08;也称为“基学习器”或“弱学习器”&#xff09;的输出结果进行集成&#xff0c;以获得比单一模型更好的泛化性…

【中断】【ARM64】学习总结

optee中的异常向量表解读–中断处理解读 https://mp.weixin.qq.com/s/gBsy4YDYTHGRsy2zcVr6Vg

windows ubuntu sed,awk,grep篇:13.其他 awk 命令

目录 85. 使用 printf 格式化输出 86. awk 内置数值函数 87. 随机数生成器 88. 常用字符串函数 89. GAWK/NAWK 的字符串函数 90. GAWK 字符串函数 91.处理参数(ARGC,ARGV,ARGIND) 92. OFMT 93. GAWK 内置的环境变量 94. pgawk – awk 运行分析器 95. 位操作 96.用户…

Linux搭建sqlilabs靶场

提前准备&#xff1a; 文章中所使用到的Linux系统&#xff1a;Ubantu20.4sqlilabs靶场下载地址&#xff1a;GitHub - Audi-1/sqli-labs: SQLI labs to test error based, Blind boolean based, Time based. 一. 安装phpstudy phpstudy安装命令&#xff1a;wget -O install.sh h…

托普利兹矩阵(T矩阵)及其应用(Matlab demo测试)

托普利兹矩阵&#xff08;T矩阵&#xff09;及其应用&#xff08;Matlab demo测试&#xff09; 1. 概念2. Matlab简单测试2.1 生成测试2.2 基本性质及原理2.3 性质验证 3. 其他应用总结3.1 其他性质3.2 文献阅读看到的 参考资料 1. 概念 托普利兹矩阵&#xff0c;简称为T型矩阵…