更新时间: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接口去发送多媒体文件到客服座席侧。