WebIM Vue Demo 使用文档

简介

使用 Vue 框架开发的WebIM Demo,仅供参考集成:

项目运行

  • 说明:音视频功能必须使用 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,apiUrlxmppUrl 默认的无需更改,如果已联系环信商务购买vip集群服务,需要更改成环信提供的地址,或者直接将 isHttpsDNS改为 true,就不需要在本地配置apiUrlxmppUrl

目录介绍

目录 说明
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.jsEMedia_x1v1.jsEMedia_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: falseexprContextCritical: false
©️2020 CSDN 皮肤主题: 大白 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值