WebIM Vue Demo 使用文档

简介

使用 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) => {
            //注册失败，开发者自己定义提示
	};
	WebIM.conn.reg