简介
使用 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
为发送消息 (群组消息需要设置typemsg.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