更新时间:2023-02-28 GMT+08:00
代码使用示例-用户发送消息
以页面的发送按钮为例,对应的方法为/src/layout/ Footer.vue文件的doSend方法。

//聊天框发送消息
doSend() {
let content = this.$refs && this.$refs.inputBox.innerHTML;
if (content !== "") {
let sendContent=this.$Utils.getContext(content)
if (this.countSubstr(sendContent,'data:image') > 1) {
this.$message({
message: '当前不支持发送超过一张图片',
type: 'warning'
});
}
if(sendContent.length - this.getPastePicLength(content)>=500){
this.$message({
message: '消息长度超出最大限制500',
type: 'warning'
});
}else{
this.dataString = sendContent
this.$refs.inputBox.innerHTML = "";
this.sendMessage()
}
}
}
该方法会调用sendMessage方法,sendMessage方法会调用webChat.js中的send方法,同用户接入的方法。
//发送消息到座席的方法
sendMessage() {
let messageData = {
channel: 'WEB',
controlType: "CHAT",
mediaType: "TEXT",
content: this.dataString,
sourceType: "CUSTOMER",
to: this.$Chat.getChannelId(),
"from": this.$Chat.userId,
senderNickname: this.$Chat.userName
};
this.$Chat.send(messageData);
messageData["pushType"] = 0;
let msg = {
avatar: "zph",
text: this.$Utils.textChangeToImage(this.dataString) ,
type: messageData["pushType"],
time: this.$Utils.getDateString(),
float: "right",
};
EventBus.$emit("pushInRecords", JSON.stringify(msg));
this.dataString = '';
},
EventBus.$emit("pushInRecords", JSON.stringify(msg)); 为向事件栈 EventBus发送消息推入到聊天框的事件,对应的监听方法在MainContent.vue的mouted方法中。
//用户发消息
EventBus.$on("pushInRecords", (messageData) =>
this.pushMessageInRecord(messageData)
);
//处理消息发送到聊天框
pushMessageInRecord(message) {
let data = JSON.parse(message);
if (data['text'].indexOf("data:image/png;base64") > -1) {
let b = /<img src="data:image\/png;base64/g;
data['text'] = data['text'].replaceAll(b,"<img style =\"max-width:350px;\" onclick='window.showBgImg(this)' src=\"data:image/png;base64")
}
this.records.push(data);
let div = this.$refs.box;
setTimeout(() => {
div.scrollTop = div.scrollHeight;
}, 200);
},
用户发送多媒体文件的方法参考Footer.vue的uploadFile方法。
//文件 图片上传
uploadFile(type) {
if (type === 'img') {
this.$refs.imageInput.click();
}
if (type === 'file') {
this.$refs.fileInput.click();
}
}
该方法会调用getFile。
//文件 图片上传后处理
getFile(event) {
const files = event.target.files;
let size = files[0].size;
let filename = files[0].name;
const fileReader = new FileReader()
let index = filename.lastIndexOf(".");
let index2 = filename.length;
let fileType = filename.substr(index + 1, index2);
let sendFileType = this.fileType[fileType];
if (!sendFileType){
this.$message({
message: '当前文件类型不支持',
type: 'warning'
});
return;
}
//内置方法new FileReader() 读取文件
fileReader.addEventListener('load', () => {
let fileData = fileReader.result;
let fileBase64DataString = fileData.split(",")[1];
let requestParam = {
fileType: sendFileType,
fileStream: fileBase64DataString,
channel: 'WEB'
}
let that = this;
//回调函数
let callbacks = function (data) {
event.target.value = "";
if (data && data['objectKey']) {
let messageData = {
channel: 'WEB',
controlType: "CHAT",
mediaType: that.mediaType[sendFileType],
content: data['objectKey'] + ',' + sendFileType,
sourceType: "CUSTOMER",
to: that.$Chat.getChannelId(),
"from": that.$Chat.userId,
senderNickname: that.$Chat.userName
};
if ('FILE' === that.mediaType[sendFileType]) {
messageData['content'] = filename.substr(0, index ) + ','
+ size + ','
+ data['objectKey'] + ','
+ sendFileType
}
that.$Chat.send(messageData);
let header = fileData.split(",")[0];
let bytes = window.atob(fileBase64DataString);
let arrayBuffer = new ArrayBuffer(bytes.length);
let uint8Array = new Uint8Array(arrayBuffer);
for (let i = 0; i < bytes.length; i++) {
uint8Array[i] = bytes.charCodeAt(i);
}
let blobFile = new Blob([uint8Array], {
type: header.match(/(.*?)/)[1]
});
let objectUrl = window.URL.createObjectURL(blobFile);
let fileSize = size;
if (fileSize < 1024 * 1024) {
fileSize = (fileSize / 1024).toFixed(2) + "KB";
} else {
fileSize = (fileSize / 1024 / 1024).toFixed(2) + "MB";
}
let messageInRecords = {
avatar: "zph",
text: objectUrl,
type: that.showType[sendFileType],
time: that.$Utils.getDateString(),
float: "right-media",
fileName:filename,
fileType:sendFileType,
fileSize:fileSize
}
if (that.showType[sendFileType] === 1) {
let imgList = [];
imgList.push(objectUrl);
messageInRecords["imgList"] = imgList;
}
EventBus.$emit("pushInRecords", JSON.stringify(messageInRecords));
}
}
this.$Chat.uploadFileStream(callbacks, requestParam);
})
fileReader.readAsDataURL(files[0])
}
在获取文件后,会调用uploadFileStream接口去发送多媒体文件到客服座席侧。