最近做实时通讯，项目需要集成环信IM，网上资料比较少，也是比较头大，捣鼓了两天，实现最基本的图文交流功能，分享一下。
Vue-cli整合环信WebIM
1、npm install easemob-websdk --save
2、npm install strophe.js (这里需要加上.js)
ps：网上有说这两个插件安装需要特定版本，我这里不需要，直接安装就行。
3、找到node_modules/easemob-websdk/src/connection.js 在16行加入
var Strophe = require('strophe.js').Strophe;
var meStrophe = require('strophe.js');
$iq = meStrophe.$iq;
$build = meStrophe.$build;
$msg = meStrophe.$msg;
$pres = meStrophe.$pres;
在740行 加入
var config = {
xmppURL: 'im-api.easemob.com',
apiURL: (location.protocol === 'https:' ? 'https:' : 'http:') + '//a1.easemob.com',
appkey: '*****************', //去环信自己申请一个appkey就行
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'
}
}
在4110行 加入
WebIM.config = config;
4、找到node_modules/strophe.js/dist/strophe.js 在2892行左右加入以下代码
setJid: function (jid) {
this.jid = jid;
this.authzid = Strophe.getBareJidFromJid(this.jid);
this.authcid = Strophe.getNodeFromJid(this.jid);
},
getJid: function () {
return this.jid;
},
以上配置就完成了。
5、接下来就可以在main中使用了
import websdk from 'easemob-websdk'
let WebIM = window.WebIM = websdk
Vue.prototype.$WebIM = WebIM
var conn = new WebIM.connection({
isMultiLoginSessions: WebIM.config.isMultiLoginSessions,
https: typeof WebIM.config.https === 'boolean' ? WebIM.config.https : location.protocol === 'https:',
url: WebIM.config.xmppURL,
heartBeatWait: WebIM.config.heartBeatWait,
autoReconnectNumMax: WebIM.config.autoReconnectNumMax,
autoReconnectInterval: WebIM.config.autoReconnectInterval,
apiUrl: WebIM.config.apiURL,
isAutoLogin: true
});
const options = {
apiUrl: WebIM.config.apiURL,
user: '1751501****', //换成自己申请的账号就行，密码也需要换
pwd: '1751501****',
appKey: WebIM.config.appkey,
success:function (re) {
console.log('登陆成功')
},
error:function (err) {
console.log(err)
}
}
Vue.prototype.$imconn = conn
Vue.prototype.$imoption = options
6、下面就可以在组件中使用了
6.1
data() {
return {
$imconn: {},
$imoption: {},
}
},
6.2
created() {
chatContent: [ ], //显示聊天数据
this.$imconn = this.$imconn;
this.$imoption = this.$imoption;
this.loginWebIM()
},
6.3
loginWebIM () {
// 这儿是测试用的账号和密码
this.$imoption.user = '1751501****';
this.$imoption.pwd = '1751501****';
this.$imconn.open(this.$imoption);
let _this = this;
this.$imconn.listen({
onOpened: function (message) {
console.log('用户已上线')
},
onTextMessage: function ( message ) {
_this.chatContent.push({
replyImg: require('../../assets/me/minion.png'),
replyContent: message.data
});
},//收到文本消息
})
},
7、这样用户就已经上线了，接下来可以发送文本数据
//发送文本消息
handleReply() {
var id = this.$imconn.getUniqueId(); // 生成本地消息id
var msg = new WebIM.message('txt', id);
let _this = this; // 创建文本消息
msg.set({
msg: this.contentText, // 消息内容
to: '1526916****', // 接收消息对象（用户id）
roomType: false,
success: function (id, serverMsgId) {
_this.chatContent.push({ //把发送者的头像和文本数据push到数组中在页面上展示
askImg: require('../../assets/me/minion.png'),
askContent: msg.value,
});
},
fail: function(e){
console.log("消息发送失败");
}
});
msg.body.chatType = 'singleChat';
this.$imconn.send(msg.body);
this.contentText = ''
},
8、在loginWebIM（）中加上接口文本消息的监听，上面已经加上了
onTextMessage: function ( message ) {
_this.chatContent.push({
replyImg: require('../../assets/me/minion.png'),
replyContent: message.data
});
},//收到文本消息
9、到此就可以进行基本的文本交流，自己做的项目，有不完善或者更好的方案的可以跟我交流，后续语音，视频等功能会继续完善…