var app=new Vue({ el: '#app', delimiters:["<{","}>"], data: { fullscreenLoading:true, leftTabActive:"first", rightTabActive:"visitorInfo", users:[], usersMap:[], //server:getWsBaseUrl()+"/ws_kefu?token="+localStorage.getItem("token"), server:getWsBaseUrl()+"/chat_server", socket:null, messageContent:"", currentGuest:"", msgList:[], chatTitle:"暂时未处理咨询", kfConfig:{ id : "kf_1", name : "客服丽丽", avator : "", to_id : "", }, visitor:{ visitor_id:"", refer:"", client_ip:"", city:"", status:"", source_ip:"", created_at:"", }, visitors:[], visitorCount:0, visitorCurrentPage:1, visitorPageSize:10, face:[], }, methods: { //跳转 openUrl(url) { window.location.href = url; }, sendKefuOnline(){ let mes = {} mes.type = "kfOnline"; mes.data = this.kfConfig; this.socket.send(JSON.stringify(mes)); }, //心跳 ping(){ let _this=this; let mes = {} mes.type = "ping"; mes.data = ""; setInterval(function () { if(_this.socket!=null){ _this.socket.send(JSON.stringify(mes)); } },5000) }, //初始化websocket initConn() { let socket = new ReconnectingWebSocket(this.server);//创建Socket实例 this.socket = socket this.socket.onmessage = this.OnMessage; this.socket.onopen = this.OnOpen; }, OnOpen() { this.sendKefuOnline(); }, OnMessage(e) { const redata = JSON.parse(e.data); switch (redata.type){ case "allUsers": this.handleOnlineUsers(redata.data); //this.sendKefuOnline(); break; case "userOnline": this.addOnlineUser(redata.data); //发送通知 let _this=this; notify(redata.data.username, { body: "来了", icon: redata.data.avator }, function(notification) { //可直接打开通知notification相关联的tab窗口 window.focus(); $('#tab-first').trigger('click'); notification.close(); _this.talkTo(redata.data.uid,redata.data.username); }); break; case "userOffline": this.removeOfflineUser(redata.data); //this.sendKefuOnline(); break; case "notice": // if(!this.usersMap[redata.data.uid]){ // this.$notify({ // title: "通知", // message: "新客户访问", // type: 'success', // duration: 0, // }); // } this.sendKefuOnline(); break; } // if (redata.type == "notice") { // this.$notify({ // title: "通知", // message: "新客户访问", // type: 'success', // duration: 0, // }); //发送给客户我在线 // let mes = {} // mes.type = "kfConnect"; // kfConfig.guest_id=redata.data[0].uid; // mes.data = kfConfig; // this.socket.send(JSON.stringify(mes)); //} if (redata.type == "message") { let msg = redata.data let content = {} let _this=this; content.avator = msg.avator; content.name = msg.name; content.content = replaceContent(msg.content); content.is_kefu = false; content.time = msg.time; if (msg.id == this.currentGuest) { this.msgList.push(content); } //发送通知 notify(msg.name, { body: msg.content, icon: msg.avator }, function(notification) { //可直接打开通知notification相关联的tab窗口 window.focus(); notification.close(); _this.talkTo(msg.id,msg.name); }); for(let i=0;i { $('.chatBox').scrollTop($(".chatBox")[0].scrollHeight); }); }, //jquery initJquery(){ this.$nextTick(() => { var _this=this; $(function () { //展示表情 var faces=placeFace(); $.each(faceTitles, function (index, item) { _this.face.push({"name":item,"path":faces[item]}); }); $(".faceBtn").click(function(){ var status=$('.faceBox').css("display"); if(status=="block"){ $('.faceBox').hide(); }else{ $('.faceBox').show(); } }); }); }); }, //表情点击事件 faceIconClick(index){ $('.faceBox').hide(); this.messageContent+="face"+this.face[index].name; }, //上传图片 uploadImg (url){ let _this=this; $('#uploadImg').after(''); $("#uploadImgFile").click(); $("#uploadImgFile").change(function (e) { var formData = new FormData(); var file = $("#uploadImgFile")[0].files[0]; formData.append("imgfile",file); //传给后台的file的key值是可以自己定义的 filter(file) && $.ajax({ url: url || '', type: "post", data: formData, contentType: false, processData: false, dataType: 'JSON', mimeType: "multipart/form-data", success: function (res) { if(res.code!=200){ _this.$message({ message: res.msg, type: 'error' }); }else{ _this.messageContent+='img[/' + res.result.path + ']'; _this.chatToUser(); } }, error: function (data) { console.log(data); } }); }); }, addIpblack(ip){ let _this=this; $.ajax({ type:"post", url:"/ipblack", data:{ip:ip}, headers:{ "token":localStorage.getItem("token") }, success: function(data) { if(data.code!=200){ _this.$message({ message: data.msg, type: 'error' }); }else{ _this.$message({ message: data.msg, type: 'success' }); } } }); }, //粘贴上传图片 onPasteUpload(event){ let items = event.clipboardData && event.clipboardData.items; let file = null if (items && items.length) { // 检索剪切板items for (var i = 0; i < items.length; i++) { if (items[i].type.indexOf('image') !== -1) { file = items[i].getAsFile() } } } if (!file) { return; } let _this=this; var formData = new FormData(); formData.append('imgfile', file); $.ajax({ url: '/uploadimg', type: "post", data: formData, contentType: false, processData: false, dataType: 'JSON', mimeType: "multipart/form-data", success: function (res) { if(res.code!=200){ _this.$message({ message: res.msg, type: 'error' }); }else{ _this.messageContent+='img[/' + res.result.path + ']'; _this.chatToUser(); } }, error: function (data) { console.log(data); } }); }, openUrl(url){ window.open(url); }, }, mounted() { document.addEventListener('paste', this.onPasteUpload) }, created: function () { //jquery this.initJquery(); this.getKefuInfo(); //心跳 this.ping(); } })