| 1 |
- "use strict";const e=require("../../common/vendor.js"),t=require("../../sheep/index.js");exports.useChatWebSocket=function(a){let o=null;const s=e.reactive({chatDotNum:0,chatList:[],customerUserInfo:{},customerServerInfo:{title:"连接中...",state:"connecting",avatar:null,nickname:""},socketState:{isConnect:!0,isConnecting:!1,tip:""},chatHistoryPagination:{page:0,list_rows:10,last_id:0,lastPage:0,loadStatus:"loadmore"},templateChatList:[],chatConfig:{},isSendSucces:-1}),n=e=>{s.chatList=[],s.chatHistoryList=[],s.chatHistoryPagination={page:0,per_page:10,last_id:0,totalPage:0},r(e)},r=t=>{o.emit("connection",{auth:"user",token:e.index.getStorageSync("socketUserToken")||"",session_id:e.index.getStorageSync("socketSessionId")||""},(a=>{0===a.error?(c(t),e.index.setStorageSync("socketSessionId",a.data.session_id),s.customerUserInfo=a.data.chat_user,s.socketState.isConnect=!0):(m({title:"服务器异常！",state:"waiting",avatar:""}),s.socketState.isConnect=!1)}))},c=e=>{o.emit("customer_login",{room_id:s.chatConfig.room_id},(t=>{s.templateChatList=t.data.questions.length?t.data.questions:[],s.chatList.push({from:"customer_service",mode:"template",date:(new Date).getTime(),content:{list:s.templateChatList}}),0===t.error&&i(e)}))},i=e=>{s.chatHistoryPagination.loadStatus="loading",s.chatHistoryPagination.page+=1,o.emit("messages",s.chatHistoryPagination,(t=>{0===t.error&&(s.chatHistoryPagination.total=t.data.messages.total,s.chatHistoryPagination.lastPage=t.data.messages.last_page,s.chatHistoryPagination.page=t.data.messages.current_page,t.data.messages.data.forEach((e=>{e.message_type&&s.chatList.unshift(g(e))})),s.chatHistoryPagination.loadStatus=s.chatHistoryPagination.page<s.chatHistoryPagination.lastPage?"loadmore":"nomore",0==s.chatHistoryPagination.last_id&&(s.chatHistoryPagination.last_id=t.data.messages.data.length?t.data.messages.data[0].id:0),1===s.chatHistoryPagination.page&&e&&e())}))},m=e=>{s.customerServerInfo={...s.customerServerInfo,...e}},l=(e,t)=>new Promise(((a,o)=>{let s=new FormData;s.append("file",t,e),s.append("group","chat"),ajax({url:"/upload",method:"post",headers:{"Content-Type":"multipart/form-data"},data:s,success:function(e){a(e)},error:function(e){o(e)}})})),d=e=>{let t={};switch(e.mode){case"text":t={message_type:"text",message:e.content.text};break;case"image":t={message_type:"image",message:e.content.path};break;case"goods":t={message_type:"goods",message:e.content.item};break;case"order":t={message_type:"order",message:e.content.item}}return t},g=e=>{let a={};switch(e.message_type){case"system":a={from:"system",mode:"system",date:1e3*e.create_time,content:{text:e.message}};break;case"text":a={from:e.sender_identify,mode:e.message_type,date:1e3*e.create_time,sender:e.sender,content:{text:e.message,messageId:e.id}};break;case"image":a={from:e.sender_identify,mode:e.message_type,date:1e3*e.create_time,sender:e.sender,content:{url:t.sheep.$url.cdn(e.message),messageId:e.id}};break;case"goods":case"order":a={from:e.sender_identify,mode:e.message_type,date:1e3*e.create_time,sender:e.sender,content:{item:e.message,messageId:e.id}}}return a},u=e=>new Promise(((t,a)=>{const o=new Image,s=new FileReader;s.onload=function(e){o.src=e.target.result},s.onerror=function(e){a(e)},s.readAsDataURL(e),o.onload=function(){t(o)},o.onerror=function(e){a(e)}})),f=(e,t="image/jpeg",a=1e3,o=1e3,s=1)=>new Promise(((n,r)=>{const c=document.createElement("canvas"),i=c.getContext("2d"),{width:m,height:l}=e,d=a,g=o;let u=m,f=l;(m>d||l>g)&&(m/l>1?(u=d,f=Math.round(d*(l/m))):(f=g,u=Math.round(g*(m/l)))),c.width=u,c.height=f,i.clearRect(0,0,u,f),i.drawImage(e,0,0,u,f),c.toBlob((function(e){n(e)}),t,s)}));return{compressImg:f,readImg:u,formatMessage:g,formatInput:d,callBackNotice:e=>{ElNotification({title:"socket",message:e.msg,showClose:!0,type:0===e.error?"success":"warning",duration:1200})},socketInit:(t,a)=>{s.chatConfig=t,o&&o.connected||s.socketState.isConnecting||(o=e.io(t.chat_domain,{reconnection:!0,reconnectionAttempts:5,reconnectionDelay:1e3,reconnectionDelayMax:5e3,randomizationFactor:.5,timeout:2e4,transports:["websocket","polling"],...t}),o.on("connect",(async e=>{n(a),console.log("socket:connect")})),o.on("message",(e=>{0===e.error&&(e.data,s.chatList.push(g(e.data.message)),a&&a())})),o.on("customer_service_access",(e=>{0===e.error&&(m({title:e.data.customer_service.name,state:"online",avatar:e.data.customer_service.avatar}),s.chatList.push(g(e.data.message)))})),o.on("waiting_queue",(e=>{0===e.error&&m({title:e.data.title,state:"waiting",avatar:""})})),o.on("no_customer_service",(e=>{0===e.error&&m({title:"暂无客服在线...",state:"waiting",avatar:""}),s.chatList.push(g(e.data.message))})),o.on("customer_service_online",(e=>{0===e.error&&m({title:e.data.customer_service.name,state:"online",avatar:e.data.customer_service.avatar})})),o.on("customer_service_offline",(e=>{0===e.error&&m({title:e.data.customer_service.name,state:"offline",avatar:e.data.customer_service.avatar})})),o.on("customer_service_busy",(e=>{0===e.error&&m({title:e.data.customer_service.name,state:"busy",avatar:e.data.customer_service.avatar})})),o.on("customer_service_break",(e=>{0===e.error&&(m({title:"客服服务结束",state:"offline",avatar:""}),s.socketState.isConnect=!1,s.socketState.tip="当前服务已结束"),s.chatList.push(g(e.data.message))})),o.on("custom_error",(e=>{m({title:e.msg,state:"offline",avatar:""}),console.log("custom_error:",e)})),o.on("error",(e=>{console.log("error:",e)})),o.on("connect_error",(e=>{console.log("connect_error")})),o.on("connect_timeout",(e=>{console.log(e,"connect_timeout")})),o.on("disconnect",(e=>{console.log(e,"disconnect")})),o.on("reconnect",(e=>{console.log(e,"reconnect")})),o.on("reconnect_attempt",(e=>{s.socketState.isConnect=!1,s.socketState.isConnecting=!0,m({title:`重连中，第${e}次尝试...`,state:"waiting",avatar:""}),console.log(e,"reconnect_attempt")})),o.on("reconnecting",(e=>{console.log(e,"reconnecting")})),o.on("reconnect_error",(e=>{console.log("reconnect_error")})),o.on("reconnect_failed",(e=>{s.socketState.isConnecting=!1,m({title:"重连失败，请刷新重试~",state:"waiting",avatar:""}),console.log(e,"reconnect_failed"),s.isSendSucces=1})))},socketSendMsg:(e,t)=>{s.isSendSucces=-1,s.chatList.push(e),t&&t(),o.emit("message",{message:d(e),...e.customData},(e=>{s.isSendSucces=e.error}))},socketClose:()=>{o.emit("customer_logout",{},(e=>{console.log("socket:退出",e)}))},socketHistoryList:i,getFocus:t=>{if(window.getSelection){let a=e.unref(t);a.focus();let o=window.getSelection();o.selectAllChildren(a),o.collapseToEnd()}else if(document.selection){let e=document.selection.createRange();e.moveToElementText(chatInput),e.collapse(!1),e.select()}},formatChatInput:(t,a)=>{let o="",s=Array.from(t.childNodes);if(s.forEach(((e,t)=>{if("#text"===e.nodeName){if(o+=e.nodeValue,s[t+1]&&"IMG"===s[t+1].nodeName&&s[t+1]&&"emoji"!==s[t+1].name){const e={from:"customer",mode:"text",date:(new Date).getTime(),content:{text:filterXSS(o)}};a&&a(e),o=""}}else if("BR"===e.nodeName)o+="<br/>";else if("IMG"===e.nodeName)if("emoji"!==e.name){let t=/src=[\'\']?([^\'\']*)[\'\']?/i,o=e.outerHTML.match(t);const s={from:"customer",mode:"image",date:(new Date).getTime(),content:{url:o[1],path:o[1].replace(/http:\/\/[^\/]*/,"")}};a&&a(s)}else o+=e.outerHTML;else"DIV"===e.nodeName&&(o+=`<div style='width:200px; white-space: nowrap;'>${e.outerHTML}</div>`)})),o){const e={from:"customer",mode:"text",date:(new Date).getTime(),content:{text:filterXSS(o)}};a&&a(e)}e.unref(t).innerHTML=""},onDrop:async e=>{e.preventDefault(),Array.from(e.dataTransfer.files).forEach((async e=>{if(e&&e.type.includes("image")){let t=e;const a=await u(t),o=await f(a,t.type),{data:s}=await l(t.name,o);let n=`<img class="full-url" src='${s.fullurl}' >`;document.execCommand("insertHTML",!1,n)}else ElMessage({message:"禁止拖拽非图片资源",type:"warning"})}))},onPaste:async e=>{let t=e.clipboardData||window.clipboardData;Array.from(t.files).forEach((async a=>{if(a&&a.type.includes("image")){e.preventDefault();let t=a;const o=await u(t),s=await f(o,t.type),{data:n}=await l(t.name,s);let r=`<img class="full-url" src='${n.fullurl}'>`;document.execCommand("insertHTML",!1,r)}else document.execCommand("insertHTML",!1,t.getData("text"))}))},upload:l,getUserToken:async t=>{const a=await chat.unifiedToken();return 0===a.error&&e.index.setStorageSync("socketUserToken",a.data.token),a},state:s,socketTest:()=>{o.emit("test",{},(e=>{console.log("test:test",e)}))},showTime:(t,a)=>{if(e.unref(s.chatList)[a+1]){let o=e.dayjs(e.unref(s.chatList)[a+1].date).fromNow();return o!==e.dayjs(e.unref(t).date).fromNow()&&(o=e.dayjs(e.unref(t).date).fromNow(),!0)}return!1},formatTime:t=>{let a=(new Date).getTime()-t;return a>4032e4?e.dayjs(t).format("MM/DD HH:mm"):a>145152e5?e.dayjs(t).format("YYYY/MM/DD HH:mm"):e.dayjs(t).fromNow()}}};
|
