环信SDK相关文档:
http://docs.easemob.com/im/start
在vue-cli项目中配置和使用环信WebIM
1、执行下面两行之一安装node版本的环信SDK
npm install easemob-websdk --save
cnpm install easemob-websdk --save
2、安装strophe.js,作用是返回一个必要的方法,如$iq、$build、$msg、$pres等,在easemob-websdk模块下src目录里面的connect.js中使用
npm install strophe.js (这里注意加上.js)
3、找到node_modules/easemob-websdk/src/connection.js,在里面引入strophe.js
// 这一行的目的是使用Strophe方法
var Strophe = require('../../strophe.js').Strophe;
// 这一行主要是提供$iq、$build、$msg、$pres等方法
var meStrophe = require('../../strophe.js');
// 声明$iq、$build、$msg、$pres等方法
$iq = meStrophe.$iq;
$build = meStrophe.$build;
$msg = meStrophe.$msg;
$pres = meStrophe.$pres;
![vue-cli项目集成环信WebIM_第1张图片](http://img.e-com-net.com/image/info8/2814b315e441497f871031d877a581d1.jpg)
4、在node_modules/easemob-websdk/src/connection.js中加入config 定义,配置项:
var config = {
xmppURL: 'im-api.easemob.com',
apiURL: (location.protocol === 'https:' ? 'https:' : 'http:') + '//a1.easemob.com',
appkey: '这里是公司申请的唯一标识key',
https: false,
isMultiLoginSessions: true,
isAutoLogin: true,
isWindowSDK: false,
isSandBox: false,
isDebug: false,
autoReconnectNumMax: 2,
autoReconnectInterval: 2,
isWebRTC: (/Firefox/.test(navigator.userAgent) || /WebKit/.test(navigator.userAgent)) && /^https\:$/.test(window.location.protocol),
heartBeatWait: 4500,
isHttpDNS: false,
msgStatus: true,
delivery: true,
read: true,
saveLocal: false,
encrypt: {
type: 'none'
}
}
![vue-cli项目集成环信WebIM_第2张图片](http://img.e-com-net.com/image/info8/0486ef12a5b94035a642d773a8e6da6e.jpg)
5、找到WebIM声明的地方,并加入步骤4声明的配置项
WebIM.config = config;
![vue-cli项目集成环信WebIM_第3张图片](http://img.e-com-net.com/image/info8/2e6cd446847044198424760a2582a9ed.jpg)
6、找到node_modules/strophe.js/strophe.js,并且加入下面两个方法(大约在2883行左右,我在这个位置添加:在pause方法之后,在resume方法之前)
setJid: function(jid) {
this.jid = jid;
this.authzid = Strophe.getBareJidFromJid(this.jid);
this.authcid = Strophe.getNodeFromJid(this.jid);
},
getJid: function() {
return this.jid;
},
![vue-cli项目集成环信WebIM_第4张图片](http://img.e-com-net.com/image/info8/bcbf2f1a12f84865bc102b94ade45734.jpg)
7、在main.js文件中使用
import websdk from 'easemob-websdk'
let webIM = window.WebIM = websdk
Vue.prototype.$WebIM = webIM
const imConn = new webIM.connection({
isMultiLoginSessions: webIM.config.isMultiLoginSessions,
https: typeof webIM.config.https === 'boolean' ? webIM.config.https : location.protocol === 'https:',
url: webIM.config.xmppURL,
isAutoLogin: true,
heartBeatWait: webIM.config.heartBeatWait,
autoReconnectNumMax: webIM.config.autoReconnectNumMax,
autoReconnectInterval: webIM.config.autoReconnectInterval,
apiUrl: webIM.config.apiURL
})
Vue.prototype.$imConn = imConn
![vue-cli项目集成环信WebIM_第5张图片](http://img.e-com-net.com/image/info8/f8eb147deafc4181a90c1a3e4cf55948.jpg)
8、在具体的组件中使用
mounted(){
var that = this;
this.$imConn.listen({
onTextMessage: function ( message ) {
console.log(message);
that.chatCont.push({id: 2, cont: message.data});
},
onPresence: function ( message ) {
// 这里需要弹出面板标识有人要添加您为好友
console.log(message)
if(message.type == 'subscribe') {
that.privateUser = message.from;
that.privateUserPanel = true;
}
}
});
}
![vue-cli项目集成环信WebIM_第6张图片](http://img.e-com-net.com/image/info8/f2893e7c84a44e54a6419ff26c4f6f74.jpg)
9、需要交互的部分,比如点击按钮添加好友,拒绝添加好友,发送消息等,直接给元素添加事件,并且在事件执行的时候,调用WebIM中具体的相关方法,并按要求传入参数即可。