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

相关文档:

相关推荐
mubeibeinv10 分钟前
列表代码思路
前端
过期的H2O210 分钟前
【H2O2|全栈】JS进阶知识(十)ES6(6)
开发语言·前端·javascript·ecmascript·es6
White graces18 分钟前
Spring MVC练习(前后端分离开发实例)
java·开发语言·前端·后端·spring·java-ee·mvc
2401_8827264821 分钟前
web组态可视化编辑器
前端·物联网·前端框架·编辑器·web·iot
努力学习的木子27 分钟前
跨域问题?同源策略大全
前端
○陈30 分钟前
vue2面试题10|[2024-11-24]
前端·javascript·vue.js
米奇妙妙wuu31 分钟前
react实现模拟chatGPT问答页
前端·react.js·chatgpt·前端框架
在荒野的梦想35 分钟前
Vue-TreeSelect组件最下级隐藏No sub-options
前端·javascript·vue.js
田本初2 小时前
浏览器缓存与协商缓存
前端·javascript·缓存
类人_猿3 小时前
ASP.NET Web(.Net Framework) Http服务器搭建以及IIS站点发布
前端·iis·asp.net·.net·http站点服务器