环信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 文档进行进一步开发吧~

相关文档:

相关推荐
浏览器爱好者几秒前
Chrome与火狐哪个浏览器的性能表现更好
前端·chrome
Topstip2 分钟前
在 Google Chrome 上查找并安装 SearchGPT 扩展
前端·人工智能·chrome·gpt·ai·chatgpt
gqkmiss3 分钟前
Chrome 130 版本开发者工具(DevTools)更新内容
前端·chrome·chrome devtools·开发者工具·chrome 130
小远yyds18 分钟前
跨平台使用高德地图服务
前端·javascript·vue.js·小程序·uni-app
weixin_516875651 小时前
使用 axios 拦截器实现请求和响应的统一处理(附常见面试题)
前端·javascript·vue.js
_oP_i1 小时前
Unity 中使用 WebGL 构建并运行时使用的图片必须使用web服务器上的
前端·unity·webgl
H_HX1261 小时前
https服务器访问http资源报Mixed Content混合内容错误
前端·vue.js·安全策略·https访问http
羊小猪~~1 小时前
前端入门一之CSS知识详解
前端·javascript·css·vscode·前端框架·html·javas
ReBeX1 小时前
【GeoJSON在线编辑平台】(1)创建地图+要素绘制+折点编辑+拖拽移动
前端·javascript·gis·openlayers·webgis
阿宝分享技术1 小时前
从xss到任意文件读取
前端·xss