记录贴部分内容转载自：《VUE项目集成环信webIM随笔》
最新版本环信这个方法已经不适用了，详情跳转 Vue中集成环信
Vue-cli整合环信WebIM
1、npm install easemob-websdk --save
2、npm install strophe.js (这里需要加上.js)
ps：网上有说这两个插件安装需要特定版本，我这里不需要，直接安装就行。
3、找到node_modules/easemob-websdk/src/connection.js 在15行加入
var Strophe = require('strophe.js').Strophe;
var meStrophe = require('strophe.js');
$iq = meStrophe.$iq;
$build = meStrophe.$build;
$msg = meStrophe.$msg;
$pres = meStrophe.$pres;
在736行 加入
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'
}
}
在4812行 加入
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;
}
使用时可能会报错 把strophe.js 所有内容复制粘贴到strophe.min.js
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
使用方法
wzq
{{item.replyContent}}
{{item.askContent}}
wzq65