环信IM集成教程——Web端UIKit快速集成与消息发送
写在前面:
千呼万唤始出来,环信Web端终于出UIKit了!🎉🎉🎉
文档地址:https://doc.easemob.com/uikit/chatuikit/web/chatuikit_overview.html
环信单群聊 UIKit 是基于环信即时通讯云 IM SDK 开发的一款即时通讯 React UI 组件库。该组件库提供了聊天相关的组件,包括会话列表、聊天界面、联系人列表和群组设置等组件,组件内部集成了 IM SDK,可以帮助开发者不考虑内部实现和数据管理就能根据实际业务需求快速搭建包含 UI 界面的即时通讯应用。现在就让我们一起探索如何集成吧!本文介绍如何快速实现在单聊会话中发送消息
准备工作:
-
React 环境:需要 React 16.8.0 或以上版本;React DOM 16.8.0 或以上版本。
-
即时通讯 IM 项目:已在环信即时通讯云控制台创建了有效的环信即时通讯 IM 开发者账号,并获取了 App Key。
-
环信用户:在环信控制台创建 IM 用户,并获取用户 ID 和密码或 token。
-
好友关系:双方需要先 添加好友 才可以聊天
集成UIKit:
准备工作完成就开始集成!在此先奉上环信Web端UIKit源码
第一步:创建一个UIKit项目
# 安装 CLI 工具。
npm install create-react-app
# 构建一个 my-app 的项目。
npx create-react-app my-app
cd my-app
第二步:安装 easemob-chat-uikit
cd my-app
- 使用 npm 安装 easemob-chat-uikit 包
npm install easemob-chat-uikit --save
- 使用 yarn 安装 easemob-chat-uikit 包
yarn add easemob-chat-uikit
第三步:引入uikit组件
在你的 React 项目中,引入 UIKit 提供的组件和样式:
// 导入组件
import {UIKitProvider,Chat,ConversationList,// ...
} from "easemob-chat-uikit";// 导入样式
import "easemob-chat-uikit/style.css";
第四步:初始化配置
easemob-chat-uikit 提供 UIKitProvider 组件管理数据。UIKitProvider 不渲染任何 UI, 只用于为其他组件提供全局的 context,自动监听 SDK 事件, 在组件树中向下传递数据来驱动组件更新。单群聊 UIKit 中其他组件必须用 UIKitProvider 包裹。
import "./App.css";
import { UIKitProvider} from "easemob-chat-uikit";
import "easemob-chat-uikit/style.css";
function App() {return (<div><UIKitProviderinitConfig={{appKey: "your app key", // 你的 app keyuserId: "userId", // 用户 IDpassword: "password", // 如果使用密码登录,传入密码。translationTargetLanguage: "zh-Hans", // 翻译功能的目标语言useUserInfo: true, // 是否使用用户属性功能展示头像昵称(UIKit 内部会获取用户属性,需要用户自己设置)}}local={{fallbackLng: "zh",lng: "zh",resources: {zh: {translation: {hello: "欢迎使用",conversationTitle: "会话列表",deleteCvs: "删除会话",//...},},},}}></UIKitProvider></div>);
}export default App;
第五步:引入组件
根据自己的项目引入所需组件,组件文档,本文只介绍如何快速实现在单聊会话中发送消息,为了方便快速体验,一定要确保准备工作的第四条双方已经互为好友
import "./App.css";
import { UIKitProvider} from "easemob-chat-uikit";
import "easemob-chat-uikit/style.css";
function App() {return (<div><UIKitProviderinitConfig={{appKey: "your app key", // 你的 app keyuserId: "userId", // 用户 IDpassword: "password", // 如果使用密码登录,传入密码。translationTargetLanguage: "zh-Hans", // 翻译功能的目标语言useUserInfo: true, // 是否使用用户属性功能展示头像昵称(UIKit 内部会获取用户属性,需要用户自己设置)}}local={{fallbackLng: "zh",lng: "zh",resources: {zh: {translation: {hello: "欢迎使用",conversationTitle: "会话列表",deleteCvs: "删除会话",//...},},},}}><div style={{ display: "flex" }}><div style={{ width: "40%", height: "100%" }}><ContactListonItemClick={(data) => {rootStore.conversationStore.addConversation({chatType: "singleChat",conversationId: data.id,lastMessage: {},unreadCount: "",});}}/></div>//联系人组件,点击某个好友通过‘rootStore.conversationStore.addConversation’创建会话<div style={{ width: "30%", height: "100%" }}><ConversationList />//会话列表组件</div><div style={{ width: "30%", height: "100%" }}><Chat />//聊天消息组件</div></div></UIKitProvider></div>);
}export default App;
第六步:运行并测试
1、运行项目
npm run start
2、点击好友并发送一条消息
总结:
通过以上步骤,你已经成功集成了环信单聊 UIKit 并实现了基本的即时通讯功能,接下来继续根据 UIKit 提供的组件和 API 文档进行进一步开发吧~
相关文档:
-
注册环信即时通讯IM:https://console.easemob.com/user/register
-
环信UIKit集成文档:https://doc.easemob.com/uikit/chatuikit/web/chatuikit_overview.html
-
IMGeek社区支持:https://www.imgeek.net/
相关文章:
环信IM集成教程——Web端UIKit快速集成与消息发送
写在前面: 千呼万唤始出来,环信Web端终于出UIKit了!🎉🎉🎉 文档地址:https://doc.easemob.com/uikit/chatuikit/web/chatuikit_overview.html 环信单群聊 UIKit 是基于环信即时通讯云 IM SDK 开…...
Anaconda如何切换国内镜像源
一、anaconda如何切换阿里镜像源 在Anaconda中切换到阿里云镜像源可以通过以下步骤进行: 1、打开终端(Windows)或者命令行界面(macOS/Linux)。 2、执行以下命令来配置阿里云镜像源: conda config --add…...
Android 14.0 添加自定义服务,并生成jar给第三方app调用
1.概述 在14.0系统ROM产品定制化开发中,由于需要新增加自定义的功能,所以要增加自定义服务,而app上层通过调用自定义服务,来调用相应的功能,所以系统需要先生成jar,然后生成jar 给上层app调用,接下来就来分析实现的步骤,然后来实现相关的功能 从而来实现所需要的功能 …...
解决沁恒ch592单片机在tmos中使用USB总线时,接入USB Hub无法枚举频繁Reset的问题
开发产品时采用了沁恒ch592,做USB开发时遇到了一个奇葩的无法枚举问题。 典型症状 使用USB线直连电脑时没有问题,可以正常使用。 如果接入某些特定方案的USB Hub(例如GL3510、GL3520),可能会出现以下2种情况…...
nvm保姆级安装使用教程
✅作者简介:大家好,我是Leo,热爱Java后端开发者,一个想要与大家共同进步的男人😉😉 🍎个人主页:Leo的博客 💞当前专栏: 开发环境篇 ✨特色专栏: M…...
大语言模型LLM《提示词工程指南》学习笔记02
文章目录 大语言模型LLM《提示词工程指南》学习笔记02设计提示时需要记住的一些技巧零样本提示少样本提示链式思考(CoT)提示自我一致性生成知识提示 大语言模型LLM《提示词工程指南》学习笔记02 设计提示时需要记住的一些技巧 指令 您可以使用命令来指…...
【realme x2手机解锁BootLoader(简称BL)】
realme手机解锁常识 https://www.realme.com/cn/support/kw/doc/2031665 realme手机解锁支持型号 https://www.realmebbs.com/post-details/1275426081138028544 realme x2手机解锁实践 参考:https://www.realmebbs.com/post-details/1255473809142591488 1 下载apk…...
攻防世界 wife_wife
在这个 JavaScript 示例中,有两个对象:baseUser 和 user。 baseUser 对象定义如下: baseUser { a: 1 } 这个对象有一个属性 a,其值为 1,没有显式指定原型对象,因此它将默认继承 Object.prototype。 …...
Visual Studio安装下载进度为零已解决
因为在安装pytorch3d0.3.0时遇到问题,提示没有cl.exe,VS的C编译组件,可以添加组件也可以重装VS。查了下2019版比2022问题少,选择了安装2019版,下面是下载安装时遇到的问题记录,关于下载进度为零网上有三类解…...
矩阵空间秩1矩阵小世界图
文章目录 1. 矩阵空间2. 微分方程3. 秩为1的矩阵4. 图 1. 矩阵空间 我们以3X3的矩阵空间 M 为例来说明相关情况。目前矩阵空间M中只关心两类计算,矩阵加法和矩阵数乘。 对称矩阵-子空间-有6个3X3的对称矩阵,所以为6维矩阵空间上三角矩阵-子空间-有6个3…...
《QT实用小工具·十三》FlatUI辅助类之各种炫酷的控件集合
1、概述 源码放在文章末尾 FlatUI辅助类之各种炫酷的控件集合 按钮样式设置。文本框样式设置。进度条样式。滑块条样式。单选框样式。滚动条样式。可自由设置对象的高度宽度大小等。自带默认参数值。 下面是demo演示: 项目部分代码如下所示: #ifnd…...
dm8 备份与恢复
dm8 备份与恢复 基础环境 操作系统:Red Hat Enterprise Linux Server release 7.9 (Maipo) 数据库版本:DM Database Server 64 V8 架构:单实例1 设置bak_path路径 --创建备份文件存放目录 su - dmdba mkdir -p /dm8/backup--修改dm.ini 文件…...
Vue项目中引入html页面(vue.js中引入echarts数据大屏html [静态非数据传递!] )
在项目原有vue(例如首页)基础上引入html页面 1、存放位置 vue3原有public文件夹下 我这边是新建一个static文件夹 专门存放要用到的html文件 复制拖拽过来 index为html的首页 2、更改路径引入到vue中 这里用到的是 iframe 方法 不同于vue的 component…...
ASTM C1186-22 纤维水泥平板
以无石棉类无机矿物纤维、有机合成纤维或纤维素纤维,单独或混合作为增强材料,以普通硅酸盐水泥或水泥中添加硅质、钙质材料代替部分水泥为胶凝材料,经制浆、成型、蒸汽或高压蒸汽养护制成的板材,俗称水泥压力板。 ASTM C1186-22纤…...
NoSQL概述
NoSQL概述 目录 一、为什么用NoSQL 二、什么是NoSQL 三、经典应用分析 四、N o S Q L 数 据 模 型 简 介 五、NoSQL四大分类 六、CAP BASE 一、为什么用NoSQL 1、单机MySQL的美好年代 在90年代,一个网站的访问量一般不大,用单个数据库完全可以轻松应…...
爬虫实战一、Scrapy开发环境(Win10+Anaconda3)搭建
#前言 在这儿推荐使用Anaconda进行安装,并不推荐大家用pythonpip安装,因为pythonpip的坑实在是太多了。 #一、环境中准备: Win10(企业版)Anaconda3-5.0.1-Windows-x86_64,下载地址,如果打不开…...
llama.cpp运行qwen0.5B
编译llama.cp 参考 下载模型 05b模型下载 转化模型 创建虚拟环境 conda create --prefixD:\miniconda3\envs\llamacpp python3.10 conda activate D:\miniconda3\envs\llamacpp安装所需要的包 cd G:\Cpp\llama.cpp-master pip install -r requirements.txt python conver…...
【接口】HTTP(3) |GET和POST两种基本请求方法有什么区别
在我面试时,在我招人面试别人时,10次能遇到7次这个问题,我听过我也说回答过: Get: 一般对于从服务器取数据的请求可以设置为get方式 Get方式在传递参数的时候,一般都会把参数直接拼接在url上 Get请求方法…...
金陵科技学院软件工程学院软件工程专业
感兴趣的小伙伴可以私信我哦~~ 是笔者写的各种高质量作业和实验哦~~ 感兴趣的小伙伴可以私信我哦~~ 是笔者写的各种高质量作业和实验哦~~ 感兴趣的小伙伴可以私信我哦~~ 是笔者写的各种高质量作业和实验哦~~ 感兴趣的小伙伴可以私信我哦~~ 是笔者写的各种高质量作业和实验哦…...
Android 关于apk反编译d2j-dex2jar classes.dex失败的几种方法
目录 确认路径正确直接定位到指定目录确定目录正确,按如下路径修改下面是未找到相关文件正确操作 确认路径正确 ,即d2j-dex2jar和classes.dex是否都在一个文件夹里(大部分的情况都是路径不正确) 直接定位到指定目录 路径正确的…...
Django--admin 后台管理站点
Django最大的优点之一,就是体贴的提供了一个基于项目model创建的一个后台管理站点admin。这个界面只给站点管理员使用,并不对大众开放。虽然admin的界面可能不是那么美观,功能不是那么强大,内容不一定符合你的要求,但是…...
JavaScript(六)---【回调、异步、promise、Async】
零.前言 JavaScript(一)---【js的两种导入方式、全局作用域、函数作用域、块作用域】-CSDN博客 JavaScript(二)---【js数组、js对象、this指针】-CSDN博客 JavaScript(三)---【this指针,函数定义、Call、Apply、函数绑定、闭包】-CSDN博客 JavaScript(四)---【执…...
vue2+elementUi的两个el-date-picker日期组件进行联动
vue2elementUi的两个el-date-picker日期组件进行联动 <template><el-form><el-form-item label"起始日期"><el-date-picker v-model"form.startTime" change"startTimeChange" :picker-options"startTimePickerOption…...
GIN实例讲解
第一个gin程序 package mainimport ("github.com/gin-gonic/gin" )func main() {// 创建一个 Gin 引擎实例r : gin.Default()// 定义一个 GET 请求的路由,当访问 /hello 路径时执行匿名函数r.GET("/hello", func(c *gin.Context) {// 获取查询…...
开源充电桩设备监控系统技术解决方案
开源 | 慧哥充电桩平台V2.5.2(支持 汽车 电动自行车 云快充1.5、云快充1.6 微服务 ) SpringBoot设备监控系统解决方案 一、引言 1.项目背景 随着物联网技术的快速发展,设备的智能化和网络化程度日益提高。在现代工业和信息化的背景下&#x…...
环形链表--极致的简便
一、要求 给你一个链表的头节点 head ,判断链表中是否有环。 如果链表中有某个节点,可以通过连续跟踪 next 指针再次到达,则链表中存在环。 为了表示给定链表中的环,评测系统内部使用整数 pos 来表示链表尾连接到链表中的位置&a…...
WPF中TextWrapping
在 WPF(Windows Presentation Foundation)中,TextWrapping 是一个与文本布局相关的属性,用于控制文本在遇到容器边界时是否自动换行。这个属性常用于文本展示控件,如 TextBlock、TextBox、Label 等,以确保文…...
Win10 下 git error unable to create file Invalid argument 踩坑实录
原始解决方案参看:https://stackoverflow.com/questions/26097568/git-pull-error-unable-to-create-file-invalid-argument 本问题解决于 2024-02-18,使用 git 版本 2.28.0.windows.1 解决方案 看 Git 抛出的出错的具体信息,比如如下都来自…...
简化备案域名查询的最新API接口
随着互联网的发展,越来越多的网站和域名被注册和备案。备案域名查询是一个非常重要的功能,可以帮助用户在特定时间段内查询已备案的域名信息。现在,我将介绍一个简化备案域名查询的最新API接口,该接口可以帮助用户快速查询备案域名…...
基于SpringBoot和Vue的校园周边美食探索以及分享系统
今天要和大家聊的是基于SpringBoot和Vue的校园周边美食探索以及分享系统 !!! 有需要的小伙伴可以通过文章末尾名片咨询我哦!!! 💕💕作者:李同学 💕…...
学院网站建设申请报告/淘宝指数查询官网
1)实验平台:正点原子Linux开发板2)摘自《正点原子I.MX6U嵌入式Linux驱动开发指南》关注官方微信号公众号,获取更多资料:正点原子第十五章按键输入试验前面几章试验都是讲解如何使用I.MX6U的GPIO输出控制功能,I.MX6U的IO不仅能作为…...
做网站可以用中文域名备案嘛/推广资源整合平台
目录 eLCDIF接口 相关寄存器 配置步骤 LCD像素时钟的设置 eLCDIF接口 LCDIF是I.MX6U自带的液晶屏幕接口,用于连接RGB LCD接口的屏幕,eLCDIF接口特性如下: 1.支持RGB LCD的DE模式。 2.支持VSYNC模式以实现高速数据传输。 3.支持ITU-R BT.656格式的4:2:2的YCbCr 数字视频…...
卡通网站建设/搜索引擎优化技巧
iOS 11 设置界面稍微有点变化,添加邮件账户需要进入:设置/账户与密码/添加账户/其他/添加邮件账户输入邮件地址密码,全名可有可无,密码不是邮箱密码,而是开启 pop3/SMTP 服务后,下图的授权码。另外…...
泗洪住房和城乡建设网站/西安网站推广
本题中 x是整数,余数也是整数 x是负数,余数也是负数 本题所有的情况 1.全是正数 2.全是负数 3.既有负数也有整数 下面讨论各种情况 1.全是正数 全是正数,直接选择最大的k个数就可以了 2.全是负数 3.既有正数也有负数…...
网站开发制作案例/今天疫情最新消息
本文基于MongoDB 3.2系列, 最新版本的MongoDB的balancer流程,应该会和3.2有不一致的地方 前言 MongoDB Balancer 是一个运行在 mongos 中的后台线程,该线程的主要作用就是监控 shard 上的 chunk 数量。如果发现某个 shard 上的 chunk 达到一…...
wordpress进入文字版/东莞网站制作十年乐云seo
1.简介 PCH文件是Xcode编程中全局引用共享的文件。可以在这里引入头文件或者宏定义来方便程序中多个文件访问。 2.PCH文件创建 打开工程 New File… -> iOS Other -> PCH File 输入PCH文件名字即可 3. PCH 文件配置 a. 找到 Project > Build Settings 搜索 “Prefix H…...