腾讯云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,一经查实,立即删除!

相关文章

Iterable和Iterator,你学会了吗?

在 Java 编程中&#xff0c;Iterable 和 Iterator 是用于实现集合类&#xff08;如列表、集合、映射等&#xff09;迭代访问的重要接口。 它们提供了一种统一的方式来遍历集合中的元素&#xff0c;并在不同的集合类型之间提供了一致的迭代访问方式。 本文将深入探讨 Iterable…

链表(基于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…

JS实现瀑布流布局

瀑布流布局是一种常见的网页布局方式&#xff0c;可以实现页面内容的动态排列&#xff0c;使页面看起来更加美观。下面是一个简单的JS实现瀑布流布局的示例&#xff1a; <!DOCTYPE html> <html lang"en"> <head> <meta charset"UTF-8&quo…

抖音直播植物大战僵尸杂交版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…

Channel Session架构简介

"Channel Session架构" 是指在分布式系统、即时通讯、网络编程等领域中&#xff0c;结合了"Channel"&#xff08;通道&#xff09;和"Session"概念的一种设计模式。这种架构强调的是高效、安全地管理客户端与服务器之间的通信会话&#xff0c;尤…

基于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;您的三连就是我持续更…

Linux上OcenBase单机版部署及基本信息查询

OceanBase单机版部署可以通过在线和离线两种方式部署。在线部署可以通过yum源或者apt源部署&#xff0c;直接拉取官方源码即可。实际使用中&#xff0c;大部分环境连不了外网&#xff0c;本文介绍离线方式安装。 下载“OceanBase All in One”离线安装包下载官方地址&#xff1…

深入理解Linux 内核 内存管理(上)

目录 页框管理 页描述符 UMA和NUMA 内存管理区 保留的页框池 分区页框分配器 请求和释放页框 释放页框 高端内存页框的内核映射 伙伴系统算法 连续页框块释放&#xff1a; 1.数据结构 2.分配块 3.释放块 RAM中&#xff0c;剩下的自由部分被称为动态内存&#xff0…

在 Python 异步协程中使用同步队列

在 Python 异步协程中使用同步队列 使用 Python asyncio 进行异步编程时&#xff0c;如果需要在协程间交互数据可以使用异步队列 asyncio.Queue。但 asyncio.Queue 不是线程安全的&#xff0c;如果需要在不同线程间的异步程序之间或者不同线程的异步程序和同步程序间交换数据&a…

c++实战篇(三) ——对socket通讯服务端与客户端的封装

前言 在前面几篇文章中我们介绍过一些有关于网络编程的相关知识,我们介绍了在tcp传输数据的时候发送缓冲区与接收缓冲区&#xff0c;我们介绍了在tcp发送与接收的过程中可能出现的分包与粘包的问题&#xff1a; c理论篇(一) ——浅谈tcp缓存与tcp的分包与粘包 我们介绍了在网络…