记录贴部分内容转载自：《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
使用方法
<div class="hello">
<!-- <h1>{{ msg | SubString(3)}}</h1> -->
<!-- <h2>{{'15735700207' | encryptionphone}}</h2> -->
<div v-for="(item,index) in chatContent " :key="index">
<div>
<span>
wzq
<img :src="item.replyImg" class="width15">
</span>
<span>{{item.replyContent}}</span>
<span>
<img :src="item.replyimage">
</span>
</div>
<div>
<span>{{item.askContent}}</span>
<span>
<img :src="item.askimage">
</span>
<span>
wzq65
<img :src="item.askImg" class="width15">
</span>
</div>
</div>
<div>
<input type="text" v-model="contentText">
</div>
<div>
<input type="file" @change="sendPic()" id="image">
</div>
<div @click="handleReply()">发送</div>
</div>
</template>
<script>
import banklist from "./../assets/json/banklist";
import qs from "qs";
export default {
name: "HelloWorld",
data() {
return {
msg: "132.33333",
bank: null,
$imconn: {},
contentText: "",
$imoption: {},
chatContent: [] //显示聊天数据
};
},
created() {
this.$imconn = this.$imconn;
this.$imoption = this.$imoption;
this.loginWebIM();
// let data = {
// cardNo: "6217858100011113250",
// cardBinCheck: true
// };
// this.$api.CacheCard(data).then(res => {
// this.bank = res.bank;
// });
// let password = {
// type: "1"
// };
// let rsadata = this.$getrsa(qs.stringify(password));
// console.log(rsadata);
// let rsadata1 = this.$decrsa(rsadata);
// console.log(qs.parse(rsadata1));
},
methods: {
loginWebIM() {
// 这儿是测试用的账号和密码
this.$imoption.user = "wzq65";
this.$imoption.pwd = "wzq654321";
this.$imconn.open(this.$imoption);
let _this = this;
this.$imconn.listen({
onOpened: function(message) {
console.log("用户已上线");
},
onTextMessage: function(message) {
console.log(message);
_this.chatContent.push({
replyImg: require("./../assets/logo.png"),
replyContent: message.data,
replyimage: ""
});
console.log(_this.chatContent);
}, //收到文本消息
onPictureMessage: function(message) {
console.log(message);
_this.chatContent.push({
replyImg: require("./../assets/logo.png"),
replyContent: "",
replyimage: message.url
});
console.log(_this.chatContent);
// 收到消息后把接受者的信息也展示
/**处理图片消息，消息格式为：
{ type :'chat',//群聊为“groupchat”
from : "test1",
to : "test2",
url : "http://s1.easemob.com/weiquan2/a2/chatfiles/0c0f5f3a-e66b-11e3-8863-f1c202c2b3ae",
secret : "NSgGYPCxEeOou00jZasg9e-GqKUZGdph96EFxJ4WxW-qkxV4",
filename : "logo.png",
thumb : "http://s1.easemob.com/weiquan2/a2/chatfiles/0c0f5f3a-e66b-11e3-8863-f1c202c2b3ae",
thumb_secret : "0595b06a-ed8b-11e3-9b85-93fade9c198c",
file_length : 42394,
width : 280,
height : 160,
filetype : "image/png",
accessToken :"YWMtjPPoovCqEeOQs7myPqqaOwAAAUaqNH0a8rRj4PwJLQju6-S47ZO6wYs3Lwo"
}
*/
}
});
},
//发送文本消息
handleReply() {
var id = this.$imconn.getUniqueId();
let to = "wzq";
// 生成本地消息id
var msg = new WebIM.message("txt", id);
let _this = this; // 创建文本消息
msg.set({
msg: this.contentText, // 消息内容
to: to, // 接收消息对象（用户id）
roomType: false,
success: function(id, serverMsgId) {
_this.chatContent.push({
//把发送者的头像和文本数据push到数组中在页面上展示
askImg: require("./../assets/logo.png"),
askContent: msg.value,
askimage: ""
});
},
fail: function(e) {
console.log("消息发送失败");
}
});
console.log(msg);
msg.body.chatType = "singleChat";
this.$imconn.send(msg.body);
this.contentText = "";
},
// 发送图片消息
sendPic() {
var id = this.$imconn.getUniqueId(); // 生成本地消息id
let to = "wzq";
let _this = this; // 创建文本消息
var msg = new WebIM.message("img", id); // 创建图片消息
var input = document.getElementById("image"); // 选择图片的input
var file = WebIM.utils.getFileUrl(input); // 将图片转化为二进制文件
var allowType = {
jpg: true,
gif: true,
png: true,
bmp: true
};
if (file.filetype.toLowerCase() in allowType) {
var option = {
apiUrl: WebIM.config.apiURL,
file: file,
to: to, // 接收消息对象
roomType: false,
chatType: "singleChat",
onFileUploadError: function() {
// 消息上传失败
console.log("onFileUploadError");
},
onFileUploadComplete: function() {
// 消息上传成功
console.log("onFileUploadComplete");
},
success: function() {
// 消息发送成功
console.log("Success");
document.getElementById("image").value = "";
_this.chatContent.push({
//把发送者的头像和文本数据push到数组中在页面上展示
askImg: require("./../assets/logo.png"),
askContent: "",
askimage: msg.value.url
});
},
flashUpload: WebIM.flashUpload
};
msg.set(option);
console.log(msg);
this.$imconn.send(msg.body);
}
},
close() {
this.$imconn.clear();
this.$imconn.onClosed();
}
},
filters: {
bankname(data) {
let bankList = banklist;
for (const key in bankList) {
if (key == data) {
return bankList[key];
}
}
}
}
};
</script>
