vue-cli项目集成环信WebIM

原创 fremember 教程 vue 160阅读 2018-04-08 09:36:14 举报

环信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;

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'
}
}

5、找到WebIM声明的地方,并加入步骤4声明的配置项
WebIM.config = config;

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;
},

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


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;
}
}
});
}

9、需要交互的部分,比如点击按钮添加好友,拒绝添加好友,发送消息等,直接给元素添加事件,并且在事件执行的时候,调用WebIM中具体的相关方法,并按要求传入参数即可。

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复