简介
使用 Vue 框架开发的WebIM Demo,仅供参考集成:
- Vue Demo (体验Demo)
- Github.com(Github 源码地址)
项目运行
- 说明:音视频功能必须使用
https + webkit浏览器
NODEJS
版本建议 6+ 低于 13 (升级到13,结果用不了) 目前用的是 V8.11.4
1.将源码克隆到本地
git clone https://github.com/easemob/webim-vue-demo.git
2.进入项目根目录,安装运行需要的依赖模块
npm install
3.上述操作完成后
# 启动测试
npm start (如需要测试音视频功能,通过 HTTPS=true npm start 启动)
# 打包发布,发布后文件在 build/ 目录下
npm run build
4.修改appkey 运行
在WebIMConfig.js
中,将 appkey
改为自己在IM管理后台申请的key,apiUrl
,xmppUrl
默认的无需更改,如果已联系环信商务购买vip集群服务
,需要更改成环信提供的地址,或者直接将 isHttpsDNS
改为 true
,就不需要在本地配置apiUrl
,xmppUrl
目录介绍
目录 | 说明 | |
---|---|---|
build | 打包后的文件 | |
config | 项目的配置 | |
node_modules | 项目依赖 | |
static | 资源文件 | |
travis | CI脚本 | |
src | 项目源文件 | |
components | 项目组件 | |
config | 表情和项目中ui配置 | |
pages | 项目页面 | |
router | 路由 | |
store | vuex store | |
utils | sdk 引入和配置 |
Demo 文件说明
- 所有SDK 的调用都在
src/stroe
,使用VueX
管理
SDK 集成
分为 NPM
,本地引入文件
两种方式,这里主要将下 Demo
集成方式:
demo 是使用 NPM
方式集成,代码目录:src/utils/WebIM.js
- 引入 SDK 和配置文件,实例化。
- 注册 SDK 监听事件
登陆/注册
集成IM SDK,只有登陆成功后才能进行收发消息等操作
代码目录:src/pages/login
SDK 方法目录:src/store/login
# 登陆
onLogin: function (context, payload) {
context.commit("setUserName", payload.username);
var options = {
apiUrl: WebIM.config.apiURL,
user: payload.username,
pwd: payload.password,
appKey: WebIM.config.appkey
};
WebIM.conn.open(options);
localStorage.setItem("userInfo", JSON.stringify({ userId: payload.username, password: payload.password }));
},
# 注册
onRegister: function (context, payload) {
const _this = this;
var options = {
apiUrl: WebIM.config.apiURL,
username: payload.username,
password: payload.password,
nickname: payload.nickname,
appKey: WebIM.config.appkey,
success: () => {
//注册成功,开发者自己定义提示
},
error: (err) => {
//注册失败,开发者自己定