简介

使用 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.引入文件

<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

原文链接：blog.csdn.net/qq_43128835…

WebIM Vue Demo 使用文档

简介