环信IM集成教程——Web端UIKit快速集成与消息发送

写在前面:

千呼万唤始出来,环信Web端终于出UIKit了!🎉🎉🎉

文档地址:https://doc.easemob.com/uikit/chatuikit/web/chatuikit_overview.html

环信单群聊 UIKit 是基于环信即时通讯云 IM SDK 开发的一款即时通讯 React UI 组件库。该组件库提供了聊天相关的组件,包括会话列表、聊天界面、联系人列表和群组设置等组件,组件内部集成了 IM SDK,可以帮助开发者不考虑内部实现和数据管理就能根据实际业务需求快速搭建包含 UI 界面的即时通讯应用。现在就让我们一起探索如何集成吧!本文介绍如何快速实现在单聊会话中发送消息


准备工作:

  1. React 环境:需要 React 16.8.0 或以上版本;React DOM 16.8.0 或以上版本。

  2. 即时通讯 IM 项目:已在环信即时通讯云控制台创建了有效的环信即时通讯 IM 开发者账号,并获取了App Key

  3. 环信用户:在环信控制台创建 IM 用户,并获取用户 ID 和密码或 token。

  4. 好友关系:双方需要先 添加好友才可以聊天


集成UIKit:

准备工作完成就开始集成!在此先奉上环信Web端UIKit源码

第一步:创建一个UIKit项目

javascript 复制代码
# 安装 CLI 工具。
npm install create-react-app
# 构建一个 my-app 的项目。
npx create-react-app my-app
cd my-app

第二步:安装 easemob-chat-uikit

javascript 复制代码
cd my-app
  • 使用 npm 安装 easemob-chat-uikit 包
javascript 复制代码
npm install easemob-chat-uikit --save
  • 使用 yarn 安装 easemob-chat-uikit 包
javascript 复制代码
yarn add easemob-chat-uikit

第三步:引入uikit组件

在你的 React 项目中,引入 UIKit 提供的组件和样式:

javascript 复制代码
// 导入组件
import {
  UIKitProvider,
  Chat,
  ConversationList,
  // ...
} from "easemob-chat-uikit";

// 导入样式
import "easemob-chat-uikit/style.css";

第四步:初始化配置

easemob-chat-uikit 提供 UIKitProvider 组件管理数据。UIKitProvider 不渲染任何 UI, 只用于为其他组件提供全局的 context,自动监听 SDK 事件, 在组件树中向下传递数据来驱动组件更新。单群聊 UIKit 中其他组件必须用 UIKitProvider 包裹。

javascript 复制代码
import "./App.css";
import { UIKitProvider} from "easemob-chat-uikit";
import "easemob-chat-uikit/style.css";
function App() {
  return (
    <div>
      <UIKitProvider
        initConfig={{
          appKey: "your app key", // 你的 app key
          userId: "userId", // 用户 ID
          password: "password", // 如果使用密码登录,传入密码。
          translationTargetLanguage: "zh-Hans", // 翻译功能的目标语言
          useUserInfo: true, // 是否使用用户属性功能展示头像昵称(UIKit 内部会获取用户属性,需要用户自己设置)
        }}
        local={{
          fallbackLng: "zh",
          lng: "zh",
          resources: {
            zh: {
              translation: {
                hello: "欢迎使用",
                conversationTitle: "会话列表",
                deleteCvs: "删除会话",
               //...
              },
            },
          },
        }}
      >
      </UIKitProvider>
    </div>
  );
}

export default App;

第五步:引入组件

根据自己的项目引入所需组件,组件文档,本文只介绍如何快速实现在单聊会话中发送消息,为了方便快速体验,一定要确保准备工作的第四条双方已经互为好友

javascript 复制代码
import "./App.css";
import { UIKitProvider} from "easemob-chat-uikit";
import "easemob-chat-uikit/style.css";
function App() {
  return (
    <div>
      <UIKitProvider
        initConfig={{
          appKey: "your app key", // 你的 app key
          userId: "userId", // 用户 ID
          password: "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%" }}>
            <ContactList
              onItemClick={(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、运行项目

javascript 复制代码
npm run start

2、点击好友并发送一条消息


总结:

通过以上步骤,你已经成功集成了环信单聊 UIKit 并实现了基本的即时通讯功能,接下来继续根据 UIKit 提供的组件和 API 文档进行进一步开发吧~

相关文档:

相关推荐
Smile_Gently2 小时前
前端:最简单封装nmp插件(组件)过程。
前端·javascript·vue.js·elementui·vue
luckycoke8 小时前
小程序立体轮播
前端·css·小程序
一 乐8 小时前
高校体育场管理系统系统|体育场管理系统小程序设计与实现(源码+数据库+文档)
前端·javascript·数据库·spring boot·高校体育馆系统
懒羊羊我小弟8 小时前
常用Webpack Loader汇总介绍
前端·webpack·node.js
祈澈菇凉9 小时前
ES6模块的异步加载是如何实现的?
前端·javascript·es6
我爱学习_zwj9 小时前
4.从零开始学会Vue--{{组件通信}}
前端·javascript·vue.js·笔记·前端框架
顾比魁9 小时前
XSS盲打:当攻击者“盲狙”管理员
前端·网络安全·xss
黑客老李9 小时前
新手小白如何挖掘cnvd通用漏洞之存储xss漏洞(利用xss钓鱼)
java·运维·服务器·前端·xss
晚风予星9 小时前
简记|LogicFlow自定义BPMN元素节点
前端
Json____10 小时前
使用html css js 开发一个 教育机构前端静态网站模板
前端·css·html·js·前端学习·企业站·教育机构网站