【开源】使用环信 Chat UIKit for uniapp 做一个IM即时聊天项目

环信单群聊 UIKit 是基于环信即时通讯云 IM SDK 开发的一款即时通讯 UI 组件库,提供各种组件实现会话列表、聊天界面、联系人列表及后续界面等功能,帮助开发者根据实际业务需求快速搭建包含 UI 界面的即时通讯应用。

本文教大家使用环信 uniapp UIKit 快速实现一个IM即时聊天应用

基本项目结构

└── ChatUIKit
    ├── assets                                 // UIKit 资源文件
    ├── components                             // UIKit 通用组件
    ├── const                                  // UIKit 常量
    ├── locales                                // UIKit 国际化
    ├── modules                                // UIKit 页面组件
    │   ├── Chat                                  // 聊天功能模块
    │   ├── ChatNew                               // 发起新会话模块
    │   ├── ContactAdd                            // 添加联系人模块
    │   ├── ContactList                           // 联系人列表模块      
    │   ├── ContactRequestList                    // 联系人好友请求列表模块
    │   ├── ContactSearchList                     // 联系人搜索列表模块
    │   ├── Conversation                          // 会话列表模块
    │   ├── ConversationSearchList                // 会话搜索列表模块
    │   ├── GroupCreate                           // 创建群组模块
    │   ├── GroupList                             // 群组列表模块
    │   ├── VideoPreview                          // 视频消息预览模块
    ├── store                                  // UIKit store
    │   ├── appUser.ts                            // UIKit用户属性store
    │   ├── chat.ts                               // IM连接状态和事件处理
    │   ├── config.ts                             // UIKit Config
    │   ├── conn.ts                               // 管理 SDK 实例
    │   ├── contact.ts                            // 联系人相关 store
    │   ├── conversation.ts                       // 会话相关 store
    │   ├── group.ts                              // 群组相关 store
    │   ├── message.ts                            // 消息相关 store
    ├── styles                                 // UIKit 通用样式
    ├── types                                  // UIKit 类型定义
    ├── utils                                  // UIKit 通用工具函数
    ├── configTypes.ts                         // UIKit 配置类型定义
    ├── index.ts                               // UIKit 入口文件
    ├── log.ts                                 // UIKit 日志类
    ├── sdk.ts                                 // UIKit IM SDK 类型

功能介绍

单群聊 UIKit 中业务相关的 UI 组件在 ChatUIKit/modules 目录下

单群聊 UIKit 主要功能:

聊天页面

ChatUIKit/modules/Chat 提供所有聊天视图的容器。

快速实现一个IM即时聊天

支持平台(vue3)

  • Android
  • iOS
  • 微信小程序
  • H5
前提条件

开始前,请确保你的开发环境满足以下条件:

  • HBuilderX 最新版
  • Vue3
  • sass:sass-loader 10.1.1 及之前版本
  • node:12.13.0 - 17.0.0,推荐 LTS 版本 16.17.0
  • npm:版本请与 Node.js 版本匹配
项目集成
1、创建 uni-app Vue3 项目,详情参考 uni-app 项目创建
2、下载 UIKit 源码

源码地址:https://github.com/easemob/easemob-uikit-uniapp

UIKit 中依赖的静态资源(ChatUIKit/assets)放置在环信服务器中,存在访问频率限制,建议你将静态资源放置在你的业务服务器上,然后修改 ChatUIKit/const/index.ts 文件中的 ASSETS_URL 为你的资源服务器地址。

javascript 复制代码
  # 克隆 UIKit
  git clone https://github.com/easemob/easemob-uikit-uniapp.git
  # 在你的 uni-app 项目根目录下执行以下命令,拷贝组件文件
  mkdir -p ./ChatUIKit
  # macOS
  mv ${组件项目路径}/ChatUIKit/* ./ChatUIKit
  # windows
  move ${组件项目路径}/ChatUIKit/* .\ChatUIKit
3、添加依赖

环信即时通讯 IM Web SDK 4.10.0 及以上。

在项目根目录下执行以下命令,添加依赖:

javascript 复制代码
npm init -y
npm i easemob-websdk@4.11.0 pinyin-pro@3.26.0 mobx@6.13.4 --save
4、引入 ChatUIKit 初始化并设置通用样式。

在你的项目的App.vue文件中引入 ChatUIKit 组件,并进行初始化。

要查看服务器域名配置,请点击这里

javascript 复制代码
<script lang="ts">
import { ChatUIKit } from "./ChatUIKit";
import websdk from "easemob-websdk/uniApp/Easemob-chat";
import { EasemobChatStatic } from "easemob-websdk/Easemob-chat";

// 创建 IM 实例
const chat = new (websdk as unknown as EasemobChatStatic).connection({
  appKey: '', // 应用的 App Key
  isHttpDNS: false,
  url: '', // 环信 websocket URL
  apiUrl: '', // 环信 Restful API URL
  delivery: true // 是否开启消息已送达回执
});


// 初始化 ChatUIKit
ChatUIKit.init({
  chat, // 传入 IM 实例
  config: {
    theme: {
			// 头像形状:圆形(circle)和方形(square)
      avatarShape: "square"
    },
    isDebug: true // 是否开启调试模式
  }
});

uni.$UIKit = ChatUIKit;


// 登录环信即时通讯 IM
const login = () => {
    uni.$UIKit.chatStore.login({
        user: "", // 用户 ID
        accessToken: "" // 用户 Token
    }).then(() => {
			// 登录成功后,跳转会话列表页面
			uni.navigateTo({
				url: '/ChatUIKit/modules/Conversation/index'
			})
		});
}
// 退出登录
const logout = () => {
    uni.$UIKit.chatStore.logout();
}
export default {
  onLaunch: function () {
		// 应用启动时,调用登录方法
		login();
    console.log("App Launch");
  },
  onShow: function () {
    console.log("App Show");
    // 在 onShow 中调用 ChatUIKit.onShow() 方法,主动监测 IM 连接状态
    ChatUIKit.onShow();
  },
  onHide: function () {
    console.log("App Hide");
  }
};
</script>
<style>
/* 通用样式 */
html,body,page {
  height: 100%;
  width: 100%;
}
</style>
5、配置路由。

在你项目的 pages.json 文件中更新 pages 路由:

javascript 复制代码
{
  "pages": [
    {
			"path": "ChatUIKit/modules/Conversation/index",
			"style": {
				"navigationStyle": "custom",
				"app-plus": {
					"bounce": "none"
				}
			}
		},
		{
			"path": "ChatUIKit/modules/Chat/index",
			"style": {
				"navigationStyle": "custom",
				// #ifdef MP-WEIXIN
				"disableScroll": true,
				// #endif 
				"app-plus": {
					"bounce": "none",
					"softinputNavBar": "none"
				}
			}
		},
		{
			"path": "ChatUIKit/modules/ChatNew/index",
			"style": {
				"navigationStyle": "custom",
				"app-plus": {
					"bounce": "none"
				}
			}
		},
		{
			"path": "ChatUIKit/modules/GroupList/index",
			"style": {
				"navigationStyle": "custom",
				"app-plus": {
					"bounce": "none"
				}
			}
		},
		{
			"path": "ChatUIKit/modules/ConversationSearchList/index",
			"style": {
				"navigationStyle": "custom",
				"app-plus": {
					"bounce": "none"
				}
			}
		},
		{
			"path": "ChatUIKit/modules/VideoPreview/index",
			"style": {
				"navigationBarTitleText": "Video Preview",
				"app-plus": {
					"bounce": "none"
				}
			}
		},
		{
			"path": "ChatUIKit/modules/ContactList/index",
			"style": {
				"navigationStyle": "custom",
				"app-plus": {
					"bounce": "none"
				}
			}
		},
		{
			"path": "ChatUIKit/modules/ContactAdd/index",
			"style": {
				"navigationStyle": "custom",
				"app-plus": {
					"bounce": "none"
				}
			}
		},
		{
			"path": "ChatUIKit/modules/ContactRequestList/index",
			"style": {
				"navigationStyle": "custom",
				"app-plus": {
					"bounce": "none"
				}
			}
		},
		{
			"path": "ChatUIKit/modules/ContactSearchList/index",
			"style": {
				"navigationStyle": "custom",
				"app-plus": {
					"bounce": "none"
				}
			}
		},
		{
			"path": "ChatUIKit/modules/GroupCreate/index",
			"style": {
				"navigationStyle": "custom",
				"app-plus": {
					"bounce": "none"
				}
			}
		}
  ]
}
6、运行 Demo。

在 uni-app IDE 中,运行 Demo:

大功告成!~

参考文档:

相关推荐
漫谈网络1 小时前
Ryu:轻量开源,开启 SDN 新程
网络·开源·信息与通信
customer082 小时前
【开源免费】基于SpringBoot+Vue.JS医疗报销系统(JAVA毕业设计)
java·vue.js·spring boot·后端·开源
九亿少女无法触及的梦ى3 小时前
uni-app集成sqlite
sqlite·uni-app
张有志_4 小时前
STL容器终极解剖:C++ vector源码级实现指南 | 从内存分配到异常安全的全流程避坑
c语言·c++·算法·开源·visual studio
繁依Fanyi4 小时前
巧妙实现右键菜单功能,提升用户操作体验
开发语言·前端·javascript·vue.js·uni-app·harmonyos
美股研究社5 小时前
百度智能云AI收入增3倍,2025开源引流打赢生态战
人工智能·百度·开源
星霜旅人6 小时前
开源机器学习框架
人工智能·机器学习·开源
乔冠宇15 小时前
微信小程序修改个人信息头像(uniapp开发)
微信小程序·小程序·uni-app
山河已无恙15 小时前
基于 DeepSeek LLM 本地知识库搭建开源方案(AnythingLLM、Cherry、Ragflow、Dify)认知
开源·知识库·deepseek
AI服务老曹16 小时前
运用先进的智能算法和优化模型,进行科学合理调度的智慧园区开源了
运维·人工智能·安全·开源·音视频