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.registerUser(options);
},

消息模块

代码目录：src/components/chat
SDK 方法目录：src/store/chat

index 为发送消息 (群组消息需要设置type msg.setGroup("groupchat"))
message 为显示消息上屏
图片消息
代码目录： src/components/upLoadImage
附件消息
代码目录： src/components/upLoadFile
表情消息
代码目录： src/components/chatEmoji
录音发送
支持直接录音发送
代码目录：src/components/recorder

# 发送文本消息
onSendText: function(context, payload){const { chatType, chatId, message } = payload;const id = WebIM.conn.getUniqueId();const time = +new Date();const chatroom = chatType === "chatroom";const type = chatType === "contact" ? "singleChat" : "groupChat";const jid = {contact: "name",group: "groupid",chatroom: "id"};const msgObj = new WebIM.message("txt", id);msgObj.set({msg: message,to: chatId[jid[chatType]],chatType: type,roomType: chatroom,success: function(){//消息发送成功，开发者自己处理},fail: function(e){//消息发送失败，开发者自己处理}});if(chatType === "group" || chatType === "chatroom"){msgObj.setGroup("groupchat");}WebIM.conn.send(msgObj.body);
}

好友功能

代码目录：src/components/addModel
SDK调用方法目录：src/store/friendModule

addFriend 添加好友
friendBlack 好友黑名单
getFriendRequest 收到好友请求

# 添加好友
addFriend: function(context, payload){const username = localStorage.getItem("userInfo") && JSON.parse(localStorage.getItem("userInfo")).userId;const { id } = payload;WebIM.conn.subscribe({to: id,message: username + "请求添加你为好友"});
},

# 接受好友请求
acceptSubscribe: function(context, payload){WebIM.conn.subscribed({to: payload,message: "[resp:true]"});
},

# 拒绝好友请求
declineSubscribe: function(context, payload){const username = localStorage.getItem("userInfo") && JSON.parse(localStorage.getItem("userInfo")).userId;const { id } = payload;WebIM.conn.unsubscribed({to: id,message: username + "拒绝您的好友请求"});
},

# 获取好友黑名单
onGetFriendBlack: function(context, payload){WebIM.conn.getBlacklist();
},

# 添加好友黑名单
onAddBlack: function(context, payload){let addName = payload.userId.name;WebIM.conn.addToBlackList({name: addName,});Vue.$store.dispatch("onGetContactUserList", { type: "addBlack", addName });
},

# 移除好友黑名单
onRemoveBlack: function(context, payload){let blackName = payload.removeName;WebIM.conn.removeFromBlackList({name: blackName,success: function(){},error: function(){}});
},

# 删除好友
onDeleteFriend: function(context, payload){let deleteName = payload.userId.name;WebIM.conn.removeRoster({to: deleteName,success: function(){  // 删除成功conn.unsubscribed({to: deleteName});},error: function(){    // 删除失败}});
}

音视频

单人和多人音视频，代码目录:src/components/emediaModal

index 初始化单人音视频，注册单人音视频
multiAVModal 多人音视频 (请直接参考文件）

# 单人音频呼叫
onCallVoice: function(context, payload){const { chatType, to } = payload;const type = chatType === "contact" ? "singleChat" : "groupChat";const userInfo = JSON.parse(localStorage.getItem("userInfo"));if(chatType === "contact"){WebIM.call.caller = userInfo.userId;WebIM.call.makeVoiceCall(to, null, payload.rec, payload.recMerge);}
},

# 单人视频呼叫
onCallVideo: function(context, payload){const { chatType, to } = payload;const type = chatType === "contact" ? "singleChat" : "groupChat";const userInfo = JSON.parse(localStorage.getItem("userInfo"));if(chatType === "contact"){WebIM.call.caller = userInfo.userId;WebIM.call.makeVideoCall(to, null, payload.rec, payload.recMerge);}
},

# 接收音频/视频 邀请
accept(){WebIM.call.acceptCall();
},

# 挂断
WebIM.call.endCall();

音视频录制

录制功能，SDK V3.0.6 版本开始，由SDK 控制是否进行录制（若SDK 不是此版本，录制功能请联系商务同事协调配置）
代码目录： src/components/videoSetting
SDK 方法调用目录：src/store/chat

请参考发起音视频的方法，第三个参数为是否录制、第四个参数为是否合并，参数可以为空

群组功能

群组代码目录：src/components/group
SDK 调用方法目录： src/store/group

createGroup 创建群组

onCreateGroup: function (context, payload) {const { groupname, desc, members, pub, approval } = payloadlet options = {data: {groupname: groupname,                    // 群组名desc: desc,                          // 群组描述members: members,            // 用户名组成的数组public: pub,                         // pub等于true时，创建为公开群approval: approval,                  // approval为true，加群需审批，为false时加群无需审批},success: function (resp) {//创建群组成功},error: function () { //创建群组失败}};WebIM.conn.createGroupNew(options);
},

addGroupUser 加入群组

onJoinGroup: function (context, payload) {let options = {groupId: payload.select_groupid,                              // 群组IDsuccess: function (resp) {//加入成功，开发者自己处理},error: function (e) {//加入失败，开发者自己处理};WebIM.conn.joinGroup(options);
},

groupBlack 群组黑名单

onGetGroupBlack: function (context, payload) {let select_id = payload.groupid || payload.select_idlet option = {groupId: select_id,success: function (list) {//获取成功},error: function () {}};WebIM.conn.getGroupBlacklistNew(option);
},

groupInfo 群组详情

onGetGroupinfo: function (context, payload) {let gid = payload.select_id || payload.select_groupid;let options = {groupId: gid,  //群组idsuccess: function (resp) {//获取成功},error: function () { //获取失败}};WebIM.conn.getGroupInfo(options)
},

groupInvite 邀请好友进群

onInviteGroup: function (context, payload) {const { select_id, select_name } = payloadlet option = {users: [select_name],groupId: select_id};WebIM.conn.inviteToGroup(option);
},

groupRequest 收到群组申请

# 收到进群申请 同意
onAgreeJoinGroup: function (context, payload) {const { joinName, joinGroupId } = payloadlet options = {applicant: joinName,                          // 申请加群的用户名groupId: joinGroupId,                              // 群组IDsuccess: function (resp) {},error: function (e) { }};WebIM.conn.agreeJoinGroup(options);
},

# 收到进群申请 拒绝
onRejectJoinGroup: function (context, payload) {const { joinName, joinGroupId } = payloadlet options = {applicant: joinName,                // 申请加群的用户名groupId: joinGroupId,                    // 群组IDsuccess: function (resp) {},error: function (e) { }};WebIM.conn.rejectJoinGroup(options);
},

groupSetting 群组设置
请参考 src/store/group

消息存储

代码目录：store > chat > msgList
SDK 调用方法目录：src/store/chat
如您已经开通 SDK 增值服务消息漫游

关于持久化：这个demo采用的 SDK 的增值服务消息漫游，拉取历史消息展示

# 拉取历史消息
getHistoryMessage: function(context, payload){const options = {queue: payload.name,isGroup: payload.isGroup,count: 10, // 每次获取消息条数success: function(msgs){ },fail: function(){ }};WebIM.conn.fetchHistoryMessages(options);
},

若您未开通上述功能

可以采用 indexdb 做本地存储
使用 增值功能 消息实时回调，将消息实时同步到开发者的服务器
使用免费功能 Rest 拉取历史消息，消息拉取有延迟，消息实时性要求不高的开发者使用此功能

消息撤回

代码目录：src/store/chat

recallMessage: function(context, payload){const { chatType, mid } = payload.message;const to = payload.to;const me = this;const chatTypeObj = {contact: "chat",group: "groupchat",chatroom: "chatroom"};const option = {mid,to,type: chatTypeObj[chatType],success: function(){console.log("消息已撤回")payload.message.status = "recall";payload.message.msg = "消息已撤回";Vue.$store.commit("updateMessageStatus", payload.message);},fail: function(){// me.$message('消息撤回失败');},};WebIM.conn.recallMessage(option);
}

SDK 集成方式说明

NPM 集成

IM SDK, 音视频 SDK 支持NPM 安装，其中单人音视频SDK 依赖 IM SDK

# 安装 IM SDK
npm install easemob-websdk# 安装单人音视频
npm install easemob-webrtc# 安装多人音视频 SDK
npm install easemob-emedia

项目引入SDK

注：npm 安装的只有 SDK，还需要本地引入WebIMConfgi.js 文件

import websdk from "easemob-websdk";
import emedia from "easemob-emedia";
import webrtc from "easemob-webrtc";

可直接参考 Demo目录 src/utils/WebIM.js

引入本地文件集成

需要下载 React Demo，Vue Demo 没有将以下文件本地化
本地文件集成，需要在初始化和消息发送时加上 default

 # 创建链接conn = WebIM.conn = new WebIM.default.connection({})# 消息WebIM.message = WebIM.default.message

1.下载Demo 后，将 SDK 目录下的 webimSDK.js、EMedia_x1v1.js、EMedia_sdk-dev.js 拷贝到项目目录下
2.再找到 WebIMConfig.js 文件拷贝到和上述文件的同级目录下
3.引入文件

<script type='text/javascript' src='./WebIMConfig.js'></script>
<script type='text/javascript' src='./webimSDK.js'></script>
<script type='text/javascript' src='./EMedia_x1v1.js'></script>
<script type='text/javascript' src='./EMedia_sdk-dev.js'></script>

或使用import引入本地目录文件

import config from "./WebIMConfig.js"
import websdk from "./webimSDK.js";
import emedia from "EMedia_x1v1.js";
import webrtc from "EMedia_sdk-dev.js";

文件引入后，注册监听，就可以进行登陆，收发消息，音视频等操作

常见错误

发送消息提示：禁止通讯，inter-app communication is not allowed
需要在初始化SDK 候加上 appKey: WebIM.config.appkey;
访问SDK，xmpp链接显示多个域名或ip
需要在地址前加上//或使用 isHttpsDNS：true （在WebIMConfig.js中设置）
npm 安装集成出现提示
在 webpack.base.conf.js如图添加配置unknownContextCritical: false，exprContextCritical: false