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 } = payload
  let 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,                              // 群组ID
  success: function (resp) {
    //加入成功，开发者自己处理
  },
  error: function (e) {
    //加入失败，开发者自己处理
  };
  WebIM.conn.joinGroup(options);
},

• groupBlack 群组黑名单

onGetGroupBlack: function (context, payload) {
  let select_id = payload.groupid || payload.select_id
  let 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,  //群组id
    success: function (resp) {
      //获取成功
    },
    error: function () { 
      //获取失败
    }
  };
    WebIM.conn.getGroupInfo(options)
},

• groupInvite 邀请好友进群

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

• groupRequest 收到群组申请

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

# 收到进群申请 拒绝
onRejectJoinGroup: function (context, payload) {
  const { joinName, joinGroupId } = payload
  let options = {
    applicant: joinName,                // 申请加群的用户名
    groupId: joinGroupId,                    // 群组ID
    success: 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.引入文件

或 使用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