• 在线客服系统源码开发实战总结：需求分析及前端代码基本技术方案

    在这个系列文章里，我尝试将自己开发唯一客服系统(gofly.v1kf.com)所涉及的经验和技术点进行梳理总结。

    文章写作水平有限，有时候会表达不清楚，难免有所疏漏，欢迎批评指正

    该系列将分成以下几个部分

    一. 需求分析

    二. 初步技术方案选型，验证

    三. 数据库结构设计

    四. WEB访客前端设计与开发

    五. WEB客服端设计与开发

    六. 客户端设计与开发

    在这个系列的文章中，您将了解并学习到以下技术知识：

    MySQL、VUE、WebSocket、Golang+Gin、UniApp 等

    如果这些技术对您有用，还请您 推荐 一下本文章，谢谢！

    什么是在线客服系统：

    常见的用法是，点击立即咨询按钮，直接跳转到聊天窗口。或者是只需将系统生成的一段JavaScript代码嵌入网站页面，即可在网站上显示代表客服的浮动小图标，邀请框，点击按钮后在当前页面弹窗展示。

    而客服端可以在WEB客服后台，查看网站正在沟通的实时在线访客、浏览轨迹等，能直接和网站访客进行在线即时交流，目的是提升客户满意度，及时解决客户的问题，进一步提升网站的销售额。

    由此分析，在线客服系统大至分为三大块：1)访客端，2)客服端，3)客服移动端。但是仅仅分为这三大块是不够的，后面我们还将对每一块进行进一步的分析。

    访客弹窗入口界面

    访客端弹窗界面

    前端界面是使用的elementui，是基于vue.js的UI框架。作为后端开发程序员，非常不习惯用node.js编译开发前端，所以我还是选择了使用cdn引入的形式去使用这个框架

    弹窗效果是使用的layer.js进行的弹窗，点击图标，调用layer.js去iframe的形式加载了访客链接，这个访客链接就是下面直接打开时的效果

     访客端直接打开的界面

    此界面为响应式设计，综合运用了css3的媒体查询功能，在大屏幕和小屏幕都能适配展示，所以该访客界面是可以直接接入微信和APP中。

    这个界面可以说的还是比较多的，后面我再去详细总结

     客服端界面

     客服端也是使用的elementUI框架，整体结构是iframe框出来的，然后点击不同的菜单加载URL展示出来

    总体来说，项目是偏向后端风格的，偏传统的架构

    下面是访客端界面的代码，就可以看出这个工作量有多大~~

    1. <!DOCTYPE html>
    2. <head>
    3.     <meta charset="utf-8">
    4.     <!--删除苹果默认的工具栏和菜单栏，默认为no显示工具栏和菜单栏。-->
    5.     <meta name="apple-mobile-web-app-capable" content="yes"/>
    6.     <!--QQ强制全屏-->
    7.     <meta name="x5-fullscreen" content="true">
    8.     <!--UC强制全屏-->
    9.     <meta name="fullscreen" content="yes">
    10.     <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
    11.     <title>{{.Title}}</title>
    12.     <link rel="stylesheet" href="/static/cdn/element-ui/2.15.1/theme-chalk/index.min.css">
    13.     <script src="/static/cdn/vue/2.6.11/vue.min.js"></script>
    14.     <script src="/static/cdn/element-ui/2.15.1/index.js"></script>
    15.     <script src="/static/cdn/jquery/3.6.0/jquery.min.js"></script>
    16.  
    17.     <script src="/static/js/functions.js?v=0.6.9"></script>
    18.     <link rel="stylesheet" href="/static/css/common.css?v=yuyfgfgfg" />
    19.     <link rel="stylesheet" href="/static/css/icono.min.css" />
    20.     <link rel="icon" href="/static/images/favicon.ico">
    21.     <style>
    22.         .el-message-box{
    23.             width: auto;
    24.             max-width: 100%;
    25.             max-height: 100%;
    26.             overflow: auto;
    27.         }
    28.     </style>
    29. </head>
    30. <body class="visitorBody">
    31. <div id="app"  class="chatCenter">
    32.     <template>
    33.         <!--客服代码-->
    34.  
    35.         <div class="chatEntTitle" v-show="!isIframe">
    36.             <el-badge :type="onlineType" is-dot class="item">
    37.                 <el-avatar class="chatEntTitleLogo" :size="35" :src="noticeAvatar"></el-avatar>
    38.             </el-badge>
    39.             <div>
    40.                 <div><{chatTitle}></div>
    41.                 <div class="entIntro" v-show="entIntroduce!=''"><{entIntroduce}></div>
    42.             </div>
    43.         </div>
    44.         <div class="chatEntBox">
    45.             <!--公告栏-->
    46.             <div v-show="visitorNotice!=''"
    47.                     class="visitorNotice"
    48.                     >
    49.                 <img src='/static/images/laba.svg'/>
    50.                 <span><{visitorNotice}></span>
    51.                 <img v-on:click="visitorNotice=''" src="/static/images/cha.png" class="visitorNoticeClose"/>
    52.             </div>
    53.             <!--//公告栏-->
    54.  
    55.  
    56.             <div  ref="chatVisitorPage" id="chatVisitorPage" class="chatContext chatVisitorPage" v-on:click="showIconBtns=false;showFaceIcon=false">
    57.                 <div class="chatBox">
    58.                     <div class="chatNotice" v-on:click="loadMoreMessages" v-show="showLoadMore">
    59.                         <a class="chatNoticeContent"><{flyLang.moremessage}></a>
    60.                     </div>
    61.  
    62.  
    63.  
    64.                     <el-row :gutter="2" v-for="v in msgList" v-bind:class="{'chatBoxMe': v.is_kefu==true}">
    65.  
    66.                         <div class="messageBox questionBox" v-if="v.type=='question'">
    67.                             <div class="chatTime left" v-bind:class="{'chatTimeHide': v.show_time==false}"><span><{v.time}></span></div>
    68.                             <div class="left" v-if="v.is_kefu!=true" style="display: flex;">
    69.                                 <el-avatar style="margin-right:10px;flex-shrink: 0;"  :size="36" :src="v.avator"></el-avatar>
    70.                                 <div class="chatMsgContent">
    71.                                     <div class="chatUser"  v-if="showKefuName!='off'"><{v.name}></div>
    72.                                     <div class="chatContent chatContent2 replyContentBtn" v-html="v.content"></div>
    73.                                 </div>
    74.                             </div>
    75.                         </div>
    76.                         <!--猜你想问-->
    77.                         <div class="cardBox" v-else-if="v.type=='card'">
    78.                             <div class='visitorReplyTitle'><{flyLang.guess}><a><i class='el-icon-refresh-left'></i> <{flyLang.huanyihuan}></a></div>
    79.                             <div class="cardBoxContent" v-html="v.content"></div>
    80.                         </div>
    81.                         <!--//猜你想问-->
    82.  
    83.                         <!--消息模板-->
    84.                         <div class="messageBox" v-else>
    85.                             <div class="chatTime left" v-bind:class="{'chatTimeHide': v.show_time==false}"><span><{v.time}></span></div>
    86.                             <div class="left" v-if="v.is_kefu!=true" style="display: flex;">
    87.                                 <el-avatar style="margin-right:10px;flex-shrink: 0;"  :size="36" :src="v.avator"></el-avatar>
    88.                                 <div class="chatMsgContent">
    89.                                     <div class="chatUser"  v-if="showKefuName!='off'"><{v.name}></div>
    90.                                     <div class="chatContent chatContent2 replyContentBtn" v-html="v.content"></div>
    91.                                 </div>
    92.                             </div>
    93.                             <div class="kefuMe right" v-if="v.is_kefu==true" style="display: flex;justify-content: flex-end;">
    94.                                 <div>
    95.                                     <div class="chatContent chatContent2 replyContentBtn" v-html="v.content"></div>
    96.                                     <div class="chatReadStatus" v-show="VisitorReadStatus!='true'"><{v.read_status}></div>
    97.                                 </div>
    98.                                 <el-avatar v-if="VisitorShowAvator=='true'" style="margin-left:10px;flex-shrink: 0;"  :size="36" :src="v.avator"></el-avatar>
    99.                             </div>
    100.                             <div class="clear"></div>
    101.                         </div>
    102.                         <!--//消息模板-->
    103.  
    104.  
    105.                     </el-row>
    106.  
    107.                 </div>
    108.             </div>
    109.             <div class="chatBoxSend">
    110.                 <div class="chatBoxSendMask" v-if="reconnectDialog">
    111.                     <a @click="initConn" href="javascript:void(0);"><{flyLang.socketclose}></a>
    112.                 </div>
    113.  
    114.                 <div class="hotQuestion" v-if="hotQuestion.length!=0">
    115.                     <a
    116.                             class="slideInRightItem"
    117.                             v-for="item in hotQuestion"
    118.                             v-on:click="messageContent=item;chatToUser()">
    119.                         <{item}>
    120.                     </a>
    121.                 </div>
    122.                 <!--进度条-->
    123.                 <div class="progressLine">
    124.                     <el-progress :stroke-width="6"  :percentage="percentage" v-show="percentage!=0" :text-inside="true"></el-progress>
    125.                 </div>
    126.                 <!--//进度条-->
    127.                 <div class="iconBtns visitorIconBox">
    128.  
    129.                     <el-tooltip :content="flyLang.emotions" placement="top">
    130.                         <div class="icono-smile visitorIconBtns visitorFaceBtn" v-on:click="showFaceIcon==true?showFaceIcon=false:showFaceIcon=true"></div>
    131.                     </el-tooltip>
    132.                     <el-tooltip :content="flyLang.photo" placement="top">
    133.                         <div v-show="VisitorUploadImgBtn!='true'" :title="flyLang.photo" class="el-icon-picture" id="uploadImg" v-on:click="uploadImg('/uploadimg')" style="font-size: 22px;"></div>
    134.                     </el-tooltip>
    135.                     <el-tooltip :content="flyLang.file" placement="top">
    136.                         <div v-show="VisitorUploadFileBtn!='true'" :title="flyLang.file" class="el-icon-upload" id="uploadFile" v-on:click="uploadFile('/2/uploadFile')" style="font-size: 22px;"></div>
    137.                     </el-tooltip>
    138.                     <el-tooltip :content="flyLang.recoder" placement="top">
    139.                         <div v-show="VisitorVoiceBtn!='true'" :title="flyLang.recoder" class="el-icon-microphone"  v-on:click="audioDialog=true" style="font-size: 22px;"></div>
    140.                     </el-tooltip>
    141.                     <el-tooltip :content="flyLang.map" placement="top">
    142.                         <div v-show="VisitorMapBtn!='true'" style="font-size: 22px;" class="el-icon-location"  v-on:click="qqMap==true?qqMap=false:qqMap=true;"></div>
    143.                     </el-tooltip>
    144.                     <el-tooltip :content="flyLang.audio" placement="top">
    145.                         <div class="el-icon-phone-outline" @click="callPhone()" style="font-size: 20px;">
    146.                         </div>
    147.                     </el-tooltip>
    148.                     <el-tooltip :content="flyLang.video" placement="top">
    149.                         <div class="el-icon-video-camera" @click="callPeer()" style="font-size: 22px;">
    150.                         </div>
    151.                     </el-tooltip>
    152.                     <el-tooltip :content="flyLang.language" placement="top">
    153.                         <div  @click="flagsDialog='true'">
    154.                             <img src="/static/images/lang.png" style="width: 20px;"/>
    155.                         </div>
    156.                     </el-tooltip>
    157.                 </div>
    158.                 <div class="faceBox visitorFaceBox" v-if="showFaceIcon">
    159.                     <ul class="faceBoxList">
    160.                         <li v-on:click="faceIconClick(i)" class="faceIcon" v-for="(v,i) in face"  :title="v.name"><img :src=v.path></li>
    161.                     </ul>
    162.                     <div class="clear"></div>
    163.                 </div>
    164.                 <!--搜索建议-->
    165.                 <div class="searchList" v-show="searchList.length!=0">
    166.                     <div v-on:click="messageContent=item.title;chatToUser();searchList=[]" class="searchItem" v-for="item in searchList" v-html="item.htmlTitle"></div>
    167.                 </div>
    168.                 <!--//搜索建议-->
    169.                 <div class="visitorEditor">
    170. {{/*                    <div v-if="VisitorVoiceBtn!='true'"  v-on:click="audioDialog==true?audioDialog=false:audioDialog=true" class="visitorEditorVoice visitorFaceBtn"></div>*/}}
    171.                     <el-input :placeholder="flyLang.textarea" show-word-limit :maxlength="VisitorMaxLength" :rows="2" type="textarea" resize="none" class="visitorEditorArea"  @focus="scrollBottom;showIconBtns=false" @blur="scrollBottom;showIconBtns=false" v-model="messageContent"  @keyup.native="inputNextText" v-on:keyup.enter.native="chatToUser">
    172.                     </el-input>
    173. {{/*                    <div v-if="VisitorFaceBtn!='true'" :title="flyLang.emotions" v-on:click="showIconBtns==true?showIconBtns=false:showIconBtns=true" class="visitorEditorSmile visitorFaceBtn"></div>*/}}
    174. {{/*                    <div v-if="VisitorUploadImgBtn!='true'&&VisitorPlusBtn=='true'" class="icono-image visitorEditorImg" id="uploadImg" v-on:click="uploadImg('/uploadimg')"></div>*/}}
    175. {{/*                    <div v-if="VisitorPlusBtn!='true'" v-on:click="showIconBtns==true?showIconBtns=false:showIconBtns=true" v-show="messageContent==''" :title="flyLang.emotions" class="visitorEditorChoose"></div>*/}}
    176.                 </div>
    177.                 <el-button type="primary" size="mini"  class="visitorEditorBtn"   :disabled="sendDisabled||messageContent==''" v-on:click="chatToUser();showIconBtns=false"><{flyLang.sent}></el-button>
    178.  
    179.                 <div class="footContact clear">
    180.                     <a href="{{.CopyrightUrl}}" target="_blank">{{.CopyrightTxt}}</a>
    181.                 </div>
    182.             </div>
    183.         </div>
    184.         <div class="chatArticle">
    185.             <div style="padding: 8px;"><img style="width: 100%" :src="entInfo.intro_pic" v-if="entInfo.intro_pic" :title="entInfo.username"/></div>
    186.             <h3 class="hotQuestionTitle">
    187.                 <img src="/static/images/fire.svg" class="fire"/><{flyLang.hotQuestionTitle}>
    188.             </h3>
    189.             <ul>
    190.                 <li v-on:click="messageContent=item;chatToUser()" class="chatArticleItem" v-for="item in topQuestionList"><a><{item}></a></li>
    191.             </ul>
    192.         </div>
    193.         <div class="clear"></div>
    194.  
    195.         <!--//客服代码-->
    196.         <audio id="chatMessageAudio">
    197.             <source id="chatMessageAudioSource"  />
    198.         </audio>
    199.         <audio id="chatMessageSendAudio">
    200.             <source id="chatMessageSendAudioSource"  />
    201.         </audio>
    202.  
    203.  
    204.         <!--图片预览-->
    205.  
    206.         <el-image
    207.                 style="display: none;"
    208.                 ref="preview"
    209.                 class="hideImgDiv"
    210.                 :src="imgPreviewSrc[0]"
    211.                 :preview-src-list="imgPreviewSrc"
    212.                 z-index="9999"
    213.         ></el-image>
    214.  
    215.  
    216.         <!--评价-->
    217.         <el-dialog
    218.                 center
    219.                 :title="flyLang.visitorCommentTitle"
    220.                 :close-on-click-modal="false"
    221.                 width="90%"
    222.                 :visible.sync="comment"
    223.         >
    224.             <div class="commentBox">
    225.                 <div style="line-height: 25px;"><{flyLang.commentDesc}></div>
    226.                 <el-rate v-model="commentScore" style="margin-bottom: 30px;"></el-rate>
    227.                 <el-input
    228.                         type="textarea"
    229.                         :rows="4"
    230.                         v-model="commentContent">
    231.                 </el-input>
    232. {{/*                <el-tooltip content="good" placement="top">*/}}
    233. {{/*                    <span class="icono-smile" v-on:click="sendComment('good');comment = false"></span>*/}}
    234. {{/*                </el-tooltip>*/}}
    235. {{/*                <el-tooltip content="normal" placement="top">*/}}
    236. {{/*                <span class="icono-meh" v-on:click="sendComment('normal');comment = false"></span>*/}}
    237. {{/*                </el-tooltip>*/}}
    238. {{/*                <el-tooltip content="bad" placement="top">*/}}
    239. {{/*                <span class="icono-frown" v-on:click="sendComment('bad');comment = false"></span>*/}}
    240. {{/*                </el-tooltip>*/}}
    241.             </div>
    242.             <span slot="footer" class="dialog-footer">
    243.                 <el-button type="primary"  v-on:click="sendComment();comment = false"><{flyLang.sent}></el-button>
    244.             </span>
    245.         </el-dialog>
    246.         <!--//评价-->
    247.         <!--地图-->
    248.         <iframe v-if="qqMap" style="position: fixed;top: 0;left: 0;z-index: 999999999" id="mapPage" width="100%" height="100%" frameborder=0
    249.                 src="https://apis.map.qq.com/tools/locpicker?search=1&type=1&key=
    250. OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77&referer=kefu">
    251.         </iframe>
    252.         <!--//地图-->
    253.         <el-dialog
    254.                 :title="flyLang.leave"
    255.                 :visible.sync="allOffline"
    256.                 width="100%"
    257.                 top="0">
    258.             <el-input style="margin-bottom: 10px;" :placeholder="flyLang.email"  v-model="visitorContact.email"></el-input>
    259.             <el-input style="margin-bottom: 10px;" :placeholder="flyLang.wechat"  v-model="visitorContact.weixin"></el-input>
    260.             <el-input style="margin-bottom: 10px;" :placeholder="flyLang.realname"  v-model="visitorContact.name"></el-input>
    261.             <el-input :placeholder="flyLang.content" type="textarea"  v-model="visitorContact.msg"></el-input>
    262.             <span slot="footer" class="dialog-footer">
    263.                         <el-button @click="sendEmailMsg"><{flyLang.sent}></el-button>
    264.                         <el-button @click="allOffline = false"><{flyLang.cancel}></el-button>
    265.                     </span>
    266.         </el-dialog>
    267.         <!--录音-->
    268.         <el-dialog
    269.                 :visible.sync="audioDialog"
    270.                 width="100%"
    271.         >
    272.             <div class="dialogRecoder">
    273.                 <el-progress :color="colors" type="dashboard" :format="recoderFormat" :stroke-width="10" :percentage="recoderSecond"></el-progress>
    274.                 <br/>
    275.                 <audio v-show="recorderEnd" controls ref="audio" muted="muted" src="" id="audio"></audio>
    276.                 <br/>
    277.                 <el-button id="start" @click="startRecoder($event)" size="small" type="primary"><{flyLang.start}></el-button>
    278.                 <el-button @click="stopRecoder($event)" size="small" type="warning"><{flyLang.stop}></el-button>
    279.                 <el-button @click="cancelRecoder()" size="small" type="danger"><{flyLang.cancel}></el-button>
    280.                 <el-button @click="sendRecoder()" size="small" type="success"><{flyLang.sent}></el-button>
    281.             </div>
    282.  
    283.         </el-dialog>
    284.         <!--//录音-->
    285.         <!--切换语言-->
    286.         <el-dialog
    287.                 :visible.sync="flagsDialog"
    288.                 width="90%"
    289.                 top="30px">
    290.             <el-button @click="selectLang('cn')" class="flagBtn" type="primary" plain>中文简体</el-button>
    291.             <el-button @click="selectLang('tw')" class="flagBtn" type="primary" plain>中文繁体</el-button>
    292.             <el-button @click="selectLang('en')" class="flagBtn" type="primary" plain>English</el-button>
    293.         </el-dialog>
    294.         <!--//切换语言-->
    295.         <!--录音-->
    296.         <!--视频-->
    297.         <el-dialog
    298.                 center
    299.                 :close-on-click-modal="false"
    300.                 :visible="isCalling"
    301.                 width="90%"
    302.                 :show-close="false"
    303.                 @opened="initCallingDialog"
    304.                 >
    305.             <video id="chatRtc" style="width: 100%;"  controls autoplay></video>
    306.             <video v-if="isVideo==true" id="chatLocalRtc" style="width: 100%;" controls  muted></video>
    307.             <span slot="footer" class="dialog-footer">
    308.                 <el-button @click="callClose()" type="danger" size="mini">挂断</el-button>
    309.               </span>
    310.         </el-dialog>
    311.         <!--//录音-->
    312.  
    313.     </template>
    314. </div>
    315. </body>
    316. <script src="/static/js/xss.js"></script>
    317. <script src="/static/js/reconnecting-websocket.min.js"></script>
    318. <script src="/static/js/recoder.js"></script>
    319. <script src="/static/js/audio.js"></script>
    320. <script>
    321.     var KEFU_ID='{{.KEFU_ID}}';
    322.     var REFER=urlDecode('{{.Refer}}');
    323.     var REFER_URL=urlDecode('{{.ReferUrl}}');
    324.     var ENT_ID='{{.ENT_ID}}';
    325.     var IS_TRY='{{.IS_TRY}}';
    326.     var VISITOR_ID='{{.visitorId}}';
    327.     var VISITOR_NAME='{{.visitorName}}';
    328.     var ERR_MSG='{{.errMsg}}';
    329.     var AVATOR='{{.avator}}';
    330.     var LANG=checkLang();
    331.     var SHOW_KEFU_NAME='{{.ShowKefuName}}';
    332.     var EXTRA='{{.Extra}}';
    333. </script>
    334. <script src="/static/js/chat-lang.js?v=dsdsdgf45hkjk"></script>
    335. <script src="/static/js/chat-config.js?v=0.5.1"></script>
    336. <script src="/static/js/peer.js"></script>
    337. <script>
    338.     new Vue({
    339.         el: '#app',
    340.         delimiters:["<{","}>"],
    341.         data: {
    342.             window:window,
    343.             server:getWsBaseUrl()+"/ws_visitor",
    344.             socket:null,
    345.             msgList:[],
    346.             imgPreviewSrc:[
    347.                 ""],
    348.             msgListNum:[],
    349.             messageContent:"",
    350.             chatTitle:KEFU_LANG[LANG]['connecting'],
    351.             visitor:{},
    352.             face:emojiGifsMap(),
    353.             showKfonline:false,
    354.             socketClosed:false,
    355.             focusSendConn:false,
    356.             wsSocketClosed:true,
    357.             timer:null,
    358.             loadingTimer:null,
    359.             sendDisabled:false,
    360.             entLogo:"",
    361.             entName:"",
    362.             peer:null,
    363.             peerjsId:"",
    364.             kefuPeerId:"",
    365.             loading:null,
    366.             localStream:null,
    367.             flyLang:KEFU_LANG[LANG],
    368.             lang:LANG,
    369.             textareaFocused:false,
    370.             replys:[],
    371.             noticeName:"",
    372.             noticeAvatar:"",
    373.             allOffline:false,
    374.             visitorContact:{
    375.                 email:"",
    376.                 weixin:"",
    377.                 name:"",
    378.                 msg:"",
    379.             },
    380.             haveUnreadMessage:false,
    381.             audioDialog:false,
    382.             flagsDialog:false,
    383.             recorder:null,
    384.             recorderAudio:null,
    385.             recordeTimer:null,
    386.             recoderSecond:0,
    387.             currentActiveTime:Date.now(),
    388.             timeoutTimer:null,
    389.             timeoutLongTime:20*60*1000,//20分钟没反应
    390.             allTimeouter:[],
    391.             currentPage:1,
    392.             showLoadMore:false,
    393.             loadMoreDisable:false,
    394.             websocketOpenNum:0,//websocket打开次数
    395.             websocketMaxOpenNum:10,//websocket最大打开次数
    396.             talkBtnText:"按住 说话",
    397.             recorderEnd:false,
    398.             isMobile:false,
    399.             isIframe:false,
    400.             onlineType:"success",
    401.             reconnectDialog:false,
    402.             showIconBtns:false,
    403.             showFaceIcon:false,
    404.             showKefuName:SHOW_KEFU_NAME,
    405.             comment:false,
    406.             qqMap:false,
    407.             hotQuestion:[],
    408.             topQuestionList:[],
    409.             topQuestionCount:0,
    410.             topQuestionPage:1,
    411.             topQuestionPagesize:5,
    412.             entIntroduce:"",
    413.             robotSwitch:"",
    414.             robotNoAnswer:"",
    415.             visitorNotice:"",
    416.             autoWelcome:"",
    417.             searchList:[],
    418.             VisitorVoiceBtn:'{{.VisitorVoiceBtn}}',
    419.             VisitorMapBtn:'{{.VisitorMapBtn}}',
    420.             VisitorCommentBtn:'{{.VisitorCommentBtn}}',
    421.             VisitorFaceBtn:'{{.VisitorFaceBtn}}',
    422.             VisitorReadStatus:'{{.VisitorReadStatus}}',
    423.             VisitorPlusBtn:'{{.VisitorPlusBtn}}',
    424.             VisitorUploadImgBtn:'{{.VisitorUploadImgBtn}}',
    425.             VisitorUploadFileBtn:'{{.VisitorUploadFileBtn}}',
    426.             VisitorMaxLength:'{{.VisitorMaxLength}}'==''?100:parseInt('{{.VisitorMaxLength}}'),
    427.             VisitorShowAvator:'{{.VisitorShowAvator}}',
    428.             VisitorWechatQrcodeUrl:'{{.VisitorWechatQrcodeUrl}}',
    429.             percentage:0,
    430.             visitorMaxNumLimit:false,//客服达到接待上限
    431.             visitorMaxNumNotice:"",//客服达到接待上限文案
    432.             visitorCookie:"",
    433.             scanWechatQrcode:"",
    434.             entConfig:{},
    435.             colors: [
    436.                 {color: '#f56c6c', percentage: 20},
    437.                 {color: '#e6a23c', percentage: 40},
    438.                 {color: '#5cb87a', percentage: 60},
    439.                 {color: '#1989fa', percentage: 80},
    440.                 {color: '#6f7ad3', percentage: 100}
    441.             ],
    442.             commentScore:0,
    443.             commentContent:"",
    444.             isCalling:false,
    445.             call:null,
    446.             videoElement:null,
    447.             canvasElement:null,
    448.             isVideo:false,
    449.             entInfo:{},
    450.         },
    451.         methods: {
    452.             //初始化websocket
    453.             initConn:function() {
    454.                 this.socket = new ReconnectingWebSocket(this.server+"?visitor_id="+this.visitor.visitor_id+"&to_id="+this.visitor.to_id);//创建Socket实例
    455.                 this.socket.debug = true;
    456.                 this.socket.onmessage = this.OnMessage;
    457.                 this.socket.onopen = this.OnOpen;
    458.                 this.socket.onerror = this.OnError;
    459.                 this.socket.onclose = this.OnClose;
    460.                 this.ping();
    461.             },
    462.             OnOpen:function() {
    463.                 console.log("ws:onopen");
    464.                 //限制最大打开次数
    465.                 if(this.websocketOpenNum>=this.websocketMaxOpenNum){
    466.                     this.chatTitle=KEFU_LANG[LANG]['refresh'];
    467.                     this.socket.close();
    468.                     return;
    469.                 }
    470.                 this.websocketOpenNum++;
    471.  
    472.                 this.chatTitle=this.noticeName;
    473.                 this.checkTimeout();
    474.                 this.socketClosed=false;
    475.                 this.focusSendConn=false;
    476.                 this.wsSocketClosed=false;
    477.                 this.sendVisitorLogin();
    478.                 this.getExtendInfo();
    479.                 this.reconnectDialog=false;
    480.                 this.showTitle(KEFU_LANG[LANG]['connectok']);
    481.                 this.getNotice();
    482.  
    483.             },
    484.             OnMessage:function(e) {
    485.                 console.log("ws:onmessage");
    486.                 this.socketClosed=false;
    487.                 this.focusSendConn=false;
    488.                 const redata = JSON.parse(e.data);
    489.                 if (redata.type == "kfOnline") {
    490.                     let msg = redata.data
    491.                     if(this.showKfonline && this.visitor.to_id==msg.id){
    492.                         return;
    493.                     }
    494.                     this.visitor.to_id=msg.id;
    495.                     this.chatTitle=msg.name+","+KEFU_LANG[LANG]['chating'];
    496.                     $(".chatBox").append("
      chatTime\">"+this.chatTitle+"
      "      );
    497.                     this.scrollBottom();
    498.                     this.showKfonline=true;
    499.                 }
    500.                 if (redata.type == "transfer") {
    501.                     var kefuId = redata.data
    502.                     if(!kefuId){
    503.                         return;
    504.                     }
    505.                     this.visitor.to_id=kefuId;
    506.                 }
    507.                 if (redata.type == "comment") {
    508.                     this.comment=true;
    509.                 }
    510.                 if (redata.type == "wechat_notice") {
    511.                     this.showTitle(KEFU_LANG[LANG]['wechatNotice']);
    512.                 }
    513.                 if (redata.type == "notice") {
    514.                     let msg = redata.data
    515.                     if(!msg){
    516.                         return;
    517.                     }
    518.                     this.chatTitle=msg
    519.                     $(".chatBox").append("
      chatTime\">"+this.chatTitle+"
      "      );
    520.                     this.scrollBottom();
    521.                 }
    522.                 if (redata.type == "accept") {
    523.                     var _this=this;
    524.                     let msg = redata.data;
    525.                     if(!msg||_this.localStream==null){
    526.                         return;
    527.                     }
    528.                     // this.$confirm('请求与您通话?', '提示', {
    529.                     //     confirmButtonText: '确定',
    530.                     //     cancelButtonText: '取消',
    531.                     //     type: 'warning'
    532.                     // }).then(() => {
    533.                         _this.kefuPeerId=msg;
    534.                         _this.isCalling=true;
    535.                     // }).catch(() => {
    536.                     // });
    537.  
    538.                 }
    539.                 if (redata.type == "callPhone") {
    540.                     this.callPhone();
    541.                 }
    542.                 if (redata.type == "callVideo") {
    543.                     this.callPeer();
    544.                 }
    545.                 if (redata.type == "refuse") {
    546.                     this.$message({
    547.                         message: "已挂断",
    548.                         type: 'error'
    549.                     });
    550.                     this.callClear();
    551.                     return;
    552.                 }
    553.                 if (redata.type == "delete") {
    554.                     var msg = redata.data;
    555.                     for(var i=0;i<this.msgList.length;i++){
    556.                         if(this.msgList[i].msg_id==msg.msg_id){
    557.                             this.msgList.splice(i,1);
    558.                             break;
    559.                         }
    560.                     }
    561.                 }
    562.                 if (redata.type == "read") {
    563.                     var msg = redata.data;
    564.                     for(var i=0;i<this.msgList.length;i++){
    565.                         this.msgList[i].read_status=KEFU_LANG[LANG]['read'];
    566.                     }
    567.                 }
    568.                 if (redata.type == "message") {
    569.                     let msg = redata.data
    570.                     //this.visitor.to_id=msg.id;
    571.                     var _this=this;
    572.  
    573.                     var msgArr=msg.content.split("[br]");
    574.                     for(var i in msgArr){
    575.                         let content = {}
    576.                         content.avator = msg.avator;
    577.                         content.name = msg.name;
    578.                         content.content =replaceSpecialTag(msgArr[i]);
    579.                         content.is_kefu = false;
    580.                         content.time = shortTime(msg.time);
    581.                         content.is_reply=true;
    582.                         content.msg_id = msg.msg_id;
    583.                         this.msgList.push(content);
    584.                         setTimeout(function () {
    585.                             _this.scrollBottom();
    586.                         },200);
    587.                     }
    588.  
    589.                     // let content = {}
    590.                     // content.avator = msg.avator;
    591.                     // content.name = msg.name;
    592.                     // content.content =replaceSpecialTag(msg.content);
    593.                     // content.is_kefu = false;
    594.                     // content.time = msg.time;
    595.                     // content.msg_id = msg.msg_id;
    596.                     // this.msgList.push(content);
    597.  
    598.                     notify(msg.name, {
    599.                         body: msg.content,
    600.                         icon: msg.avator
    601.                     },function(notification) {
    602.                         window.focus();
    603.                         notification.close();
    604.                     });
    605.                     //this.scrollBottom();
    606.                     flashTitle();//标题闪烁
    607.                     //clearInterval(this.timer);
    608.                     this.cleanAllTimeout();
    609.                     this.alertSound('/static/images/alert4.mp3');//提示音
    610.                     this.haveUnreadMessage=true;
    611.                 }
    612.                 if (redata.type == "close") {
    613.                     this.showTitle(KEFU_LANG[LANG]['closemes']);
    614.                     this.scrollBottom();
    615.                     this.socket.close();
    616.                     //this.socketClosed=true;
    617.                     this.focusSendConn=true;
    618.                     this.reconnectDialog=true;
    619.                 }
    620.                 if (redata.type == "force_close") {
    621.                     this.showTitle(KEFU_LANG[LANG]['forceclosemes']);
    622.                     this.scrollBottom();
    623.                     this.socket.close();
    624.                     this.socketClosed=true;
    625.                     this.reconnectDialog=true;
    626.                 }
    627.                 if (redata.type == "auto_close") {
    628.                     this.showTitle(KEFU_LANG[LANG]['autoclosemes']);
    629.                     this.scrollBottom();
    630.                     this.socket.close();
    631.                     this.socketClosed=true;
    632.                     this.reconnectDialog=true;
    633.                 }
    634.                 if (redata.type == "change_id") {
    635.                     var openId = redata.data;
    636.                     setFakeCookie("visitor_"+ENT_ID,openId,this.visitorCookie);
    637.                     location.reload();
    638.                 }
    639.                 window.parent.postMessage(redata,"*");
    640.             },
    641.             //发送给客户
    642.             chatToUser:function() {
    643.                 this.searchList=[];
    644.                 if(this.sendDisabled){
    645.                     return;
    646.                 }
    647.                 var messageContent=this.messageContent.trim("\r\n");
    648.                 messageContent=messageContent.replace("\n","");
    649.                 messageContent=messageContent.replace("\r\n","");
    650.                 messageContent=filterXSS(messageContent);
    651.                 if(messageContent==""||messageContent=="\r\n"){
    652.                     this.messageContent="";
    653.                     return;
    654.                 }
    655.                 this.messageContent="";
    656.                 this.currentActiveTime=Date.now();
    657.                 if(this.socketClosed){
    658.                     this.initConn();
    659.                     // this.$message({
    660.                     //     message: '连接关闭!请重新打开页面',
    661.                     //     type: 'warning'
    662.                     // });
    663.                     //return;
    664.                 }
    665.                 this.sendDisabled=true;
    666.                 let _this=this;
    667.  
    668.                 let content = {}
    669.                 content.avator=_this.visitor.avator;
    670.                 content.content = replaceSpecialTag(messageContent);
    671.                 content.name = _this.visitor.name;
    672.                 content.is_kefu = true;
    673.                 content.time = _this.getNowDate();
    674.                 content.show_time=false;
    675.  
    676.                 let mes = {};
    677.                 mes.type = "visitor";
    678.                 mes.content = messageContent;
    679.                 mes.from_id = this.visitor.visitor_id;
    680.                 mes.to_id = this.visitor.to_id;
    681.  
    682.                 //机器人回答
    683.                 if(this.robotSwitch=="true"){
    684.                     this.sendDisabled=false;
    685.                     this.messageContent="";
    686.                     //转接人工,没用处于排队状态
    687.                     if(this.turnToMan && this.turnToMan.includes(mes.content)){
    688.                         if(this.visitorMaxNumLimit){
    689.                             this.showTitle(this.visitorMaxNumNotice);
    690.                             return;
    691.                         }
    692.                         this.initConn();
    693.                         this.robotSwitch="";
    694.                     }else{
    695.                         content.read_status = KEFU_LANG[LANG]['read'];
    696.                         _this.msgList.push(content);
    697.                         _this.scrollBottom();
    698.                         _this.sendAjax("/2/robotMessage","post",{ent_id:ENT_ID,content:messageContent},function(msg){
    699.                             if(msg.content==""){
    700.                                 msg.content=_this.robotNoAnswer;
    701.                             }
    702.                             if(msg.content==""){
    703.                                 return;
    704.                             }
    705.                             let content = {}
    706.                             content.avator=msg.avator;
    707.                             content.content = replaceSpecialTag(msg.content);
    708.                             content.name = msg.username;
    709.                             content.is_kefu = false;
    710.                             content.read_status = KEFU_LANG[LANG]['read'];
    711.                             content.time = _this.getNowDate();
    712.                             content.show_time=false;
    713.                             _this.msgList.push(content);
    714.                             _this.scrollBottom();
    715.                         });
    716.                         return;
    717.                     }
    718.                 }
    719.                 content.read_status = KEFU_LANG[LANG]['unread'];
    720.                 _this.msgList.push(content);
    721.                 _this.scrollBottom();
    722.  
    723.                 //发送人工消息
    724.                 $.post("/2/message?lang="+getQuery("lang"),mes,function(res){
    725.                     _this.sendDisabled=false;
    726.                     if(res.code!=200){
    727.                         _this.$message({
    728.                             message: res.msg,
    729.                             type: 'error'
    730.                         });
    731.                         if(res.code==401){
    732.                             setTimeout(function(){
    733.                                 window.location.reload();
    734.                             },2000);
    735.                         }
    736.                         return;
    737.                     }
    738.                     var result=res.result
    739.                     if(result.isBlack){
    740.                         _this.msgList.pop();
    741.                         content.content=result.content;
    742.                         _this.msgList.push(content);
    743.                     }
    744.  
    745.                     _this.messageContent = "";
    746.                     _this.cleanAllTimeout();
    747.                     _this.sendSound();
    748.                     _this.sendDisabled=false;
    749.                 });
    750.  
    751.             },
    752.             //正在输入
    753.             inputNextText:function(){
    754.                 var _this=this;
    755.                 this.sendInputingStrNow(this.messageContent);
    756.                 //是否进行搜索
    757.                 if(this.robotSwitch!="true"){
    758.                     return;
    759.                 }
    760.                 this.sendAjax("/2/searchQuestion","get",{ent_id:ENT_ID,content:this.messageContent},function(res){
    761.                     result=res.result;
    762.                     if(!result){
    763.                         return;
    764.                     }
    765.                     for(key in result){
    766.                         var str=result[key].title;
    767.                         str= str.replace(_this.messageContent,""+_this.messageContent+"");
    768.                         result[key].htmlTitle=str;
    769.                     }
    770.                     _this.searchList=result;
    771.                 });
    772.             },
    773.             sendInputingStrNow:function(str){
    774.                 if(this.socketClosed||!this.socket||this.wsSocketClosed){
    775.                     return;
    776.                 }
    777.                 var message = {}
    778.                 message.type = "inputing";
    779.                 message.data = {
    780.                     from : this.visitor.visitor_id,
    781.                     to : this.visitor.to_id,
    782.                     content:str
    783.                 };
    784.                 this.socket.send(JSON.stringify(message));
    785.             },
    786.             sendVisitorLogin:function(){
    787.                 var _this=this;
    788.                 setTimeout(function(){
    789.                     if(_this.socketClosed||!_this.socket||_this.wsSocketClosed){
    790.                         return;
    791.                     }
    792.                     var message = {}
    793.                     message.type = "visitor_login";
    794.                     message.data = {
    795.                         from : _this.visitor.visitor_id,
    796.                         to : _this.visitor.to_id,
    797.                     };
    798.                     _this.socket.send(JSON.stringify(message));
    799.                 }, 3000);
    800.             },
    801.             OnClose:function(event) {
    802.                 console.log("ws:onclose",event);
    803.                 this.focusSendConn=true;
    804.                 this.wsSocketClosed=true;
    805.                 this.closeTimeoutTimer();
    806.             },
    807.             OnError:function(event) {
    808.                 console.log("ws:onerror",event);
    809.                 this.closeTimeoutTimer();
    810.             },
    811.             //获取当前用户信息
    812.             getUserInfo:function(){
    813.                 var _this=this;
    814.                 var visitor_id=getFakeCookie("visitor_"+ENT_ID);
    815.                 var to_id=KEFU_ID;
    816.  
    817.  
    818.                 var extra=EXTRA;
    819.                 var url=getQuery("url");
    820.                 var paramVisitorId=VISITOR_ID;
    821.                 if(paramVisitorId!=""){
    822.                     visitor_id=paramVisitorId;
    823.                 }
    824.                 var visitorName=VISITOR_NAME;
    825.                 var avator=AVATOR;
    826.  
    827.                 if(extra==""){
    828.                     var ext={};
    829.                     var refer=document.referrer?document.referrer:"-";
    830.                     ext.refer=refer;
    831.                     ext.host=document.location.href;
    832.                     extra=utf8ToB64(JSON.stringify(ext));
    833.                 }else{
    834.                     try{
    835.                         var jsonStr=b64ToUtf8(extra)
    836.                         var extJson=JSON.parse(jsonStr)
    837.                         if(extJson.refer){
    838.                             if(REFER=="") REFER=extJson.refer;
    839.                             if(REFER_URL=="") REFER_URL=extJson.refer;
    840.                         }
    841.                     }catch (e) {}
    842.  
    843.                 }
    844.                 if(REFER_URL==""){
    845.                     REFER_URL=document.referrer;
    846.                 }
    847.                 if(REFER==""){
    848.                     REFER=document.title;
    849.                 }
    850.                 //发送消息
    851.                 $.ajax({
    852.                     type: "post",
    853.                     url: "/visitor_login",
    854.                     data:{visitor_id:visitor_id,
    855.                         visitor_name:visitorName,
    856.                         avator:avator,
    857.                         refer:REFER,
    858.                         to_id:to_id,
    859.                         extra:extra,
    860.                         ent_id:ENT_ID,
    861.                         url:document.location.href,
    862.                         refer_url:REFER_URL,
    863.                         title:document.title
    864.                     },
    865.                     error:function(res){
    866.                         var data=JSON.parse(res.responseText);
    867.                         _this.$message({
    868.                             message: data.msg,
    869.                             type: 'error'
    870.                         });
    871.                     },
    872.                     success: function(res) {
    873.                         if(res.code==40012){
    874.                             _this.$message({
    875.                                 message: res.msg,
    876.                                 type: 'error'
    877.                             });
    878.                             _this.chatTitle=res.msg;
    879.                             _this.sendDisabled=true;
    880.                             return;
    881.                         }
    882.                         if(res.code==40016){
    883.                             _this.$message({
    884.                                 message: KEFU_LANG[LANG]['freqLimit'],
    885.                                 type: 'error'
    886.                             });
    887.                             _this.chatTitle=KEFU_LANG[LANG]['freqLimit'];
    888.                             _this.sendDisabled=true;
    889.                             return;
    890.                         }
    891.                         _this.entInfo=res.kefu;
    892.                         _this.noticeName=res.kefu.username;
    893.                         _this.noticeAvatar=res.kefu.avatar;
    894.                         _this.robotNoAnswer=res.robotNoAnswer;
    895.                         _this.getTopQuestion();
    896.  
    897.  
    898.                         //判断同时接待访客数
    899.                         if(res.code==40018){
    900.                             _this.visitorMaxNumLimit=true;
    901.                             _this.visitor=res.result;
    902.                             _this.robotSwitch="true";
    903.                             _this.chatTitle=_this.noticeName;
    904.                             _this.turnToMan=res.turnToMan.split(",");
    905.                             var visitorMaxNumNotice=res.visitorMaxNumNotice;
    906.                             if(visitorMaxNumNotice==""){
    907.                                 visitorMaxNumNotice="当前有"+res.visitorMaxNum+"位访客正在咨询，请稍等一会再尝试 刷新";
    908.                             }
    909.                             _this.visitorMaxNumNotice=visitorMaxNumNotice;
    910.                             _this.showTitle(visitorMaxNumNotice);
    911.                             _this.sendDisabled=true;
    912.                             return;
    913.                         }
    914.  
    915.                         if(res.code!=200){
    916.                             _this.$message({
    917.                                 message: res.msg,
    918.                                 type: 'error'
    919.                             });
    920.                             _this.chatTitle=res.msg;
    921.                             _this.sendDisabled=true;
    922.                             return;
    923.                         }
    924.                         if(res.alloffline){
    925.                             _this.onlineType="danger";
    926.                         }else{
    927.                             _this.onlineType="success";
    928.                         }
    929.                         if(KEFU_CONFIG.SHOW_OFFLINE_PAGE){
    930.                             _this.allOffline=res.alloffline;
    931.                         }
    932.                         _this.sendDisabled=false;
    933.                         _this.visitor=res.result;
    934.                         _this.noticeName=res.kefu.username;
    935.                         _this.noticeAvatar=res.kefu.avatar;
    936.                         _this.entIntroduce=res.entIntroduce;
    937.                         _this.robotSwitch=res.robotSwitch;
    938.                         _this.turnToMan=res.turnToMan.split(",");
    939.                         _this.chatTitle=_this.noticeName;
    940.                         _this.visitorNotice=res.visitorNotice;
    941.                         _this.autoWelcome=res.autoWelcome;
    942.                         _this.visitorCookie=res.visitorCookie;
    943.                         _this.scanWechatQrcode=res.scanWechatQrcode;
    944.                         document.title=res.kefu.username;
    945.                         if(!getFakeCookie("visitor_"+ENT_ID)){
    946.                             setFakeCookie("visitor_"+ENT_ID,_this.visitor.visitor_id,res.visitorCookie);
    947.                         }
    948.  
    949.                         _this.loadMoreMessages();
    950.                         _this.showWechatTip();
    951.                         if(_this.robotSwitch!="true"){
    952.                             _this.initConn();
    953.                         }
    954.                     }
    955.                 });
    956.  
    957.             },
    958.             //获取信息列表
    959.             getMesssagesByVisitorId:function(isAll){
    960.                 let _this=this;
    961.                 $.ajax({
    962.                     type:"get",
    963.                     url:"/2/messages?visitor_id="+this.visitor.visitor_id,
    964.                     success: function(data) {
    965.                         if(data.code==200 && data.result!=null&&data.result.length!=0){
    966.                             let msgList=data.result;
    967.                             _this.msgList=[];
    968.                             for(var i=0;i<msgList.length;i++){
    969.                                 let visitorMes=msgList[i];
    970.                                 let content = {}
    971.                                 if(visitorMes["mes_type"]=="kefu"){
    972.                                     content.is_kefu = false;
    973.                                 }else{
    974.                                     content.is_kefu = true;
    975.                                 }
    976.                                 content.avator = visitorMes["avator"];
    977.                                 content.name = visitorMes["name"];
    978.                                 content.content = replaceContent(visitorMes["content"]);
    979.                                 content.time = visitorMes["time"];
    980.                                 _this.msgList.push(content);
    981.                                 _this.scrollBottom();
    982.                             }
    983.                         }
    984.                         if(data.code!=200){
    985.                             _this.$message({
    986.                                 message: data.msg,
    987.                                 type: 'error'
    988.                             });
    989.                             _this.chatTitle=KEFU_LANG[LANG]['refresh'];
    990.                         }
    991.                     }
    992.                 });
    993.             },
    994.             //获取信息列表
    995.             sendEmailMsg:function(){
    996.                 let _this=this;
    997.                 _this.visitorContact.ent_id=ENT_ID;
    998.                 $.ajax({
    999.                     type:"post",
    1000.                     url:"/ent/email_message",
    1001.                     data:_this.visitorContact,
    1002.                     success: function(data) {
    1003.                         if(data.code!=200){
    1004.                             _this.$message({
    1005.                                 message: data.msg,
    1006.                                 type: 'error'
    1007.                             });
    1008.                         }else{
    1009.                             _this.allOffline=false;
    1010.                         }
    1011.                     }
    1012.                 });
    1013.             },
    1014.             //滚动到底部
    1015.             scrollBottom:function(){
    1016.                 var _this=this;
    1017.                 //$('.chatVisitorPage').animate({scrollTop:'99999999999999'},"slow");
    1018.                 this.$nextTick(function(){
    1019.                     var container = _this.$el.querySelector(".chatVisitorPage");
    1020.                     container.scrollTop = 999999;
    1021.                     //alert(1);
    1022.                     //$('.chatVisitorPage').animate({scrollTop:'99999999999999'},'99999999');
    1023.                     // $('.chatVisitorPage').scrollTop(9999999999999999999);
    1024.                 });
    1025.             },
    1026.             //软键盘问题
    1027.             textareaFocus:function(){
    1028.                 // if(/Android|webOS|iPhone|iPad|BlackBerry/i.test(navigator.userAgent)) {
    1029.                 //     //$(".chatContext").css("margin-bottom","0");
    1030.                 //     //$(".chatBoxSend").css("position","static");
    1031.                 //     this.textareaFocused=true;
    1032.                 // }
    1033.                 this.scrollBottom();
    1034.             },
    1035.             textareaBlur:function(){
    1036.                 // if(this.textareaFocused&&/Android|webOS|iPhone|iPad|BlackBerry/i.test(navigator.userAgent)) {
    1037.                 //     var chatBoxSendObj=$(".chatBoxSend");
    1038.                 //     var chatContextObj=$(".chatContext");
    1039.                 //     if(this.textareaFocused&&chatBoxSendObj.css("position")!="fixed"){
    1040.                 //         //chatContextObj.css("margin-bottom","105px");
    1041.                 //         //chatBoxSendObj.css("position","fixed");
    1042.                 //         this.textareaFocused=false;
    1043.                 //     }
    1044.                 //
    1045.                 // }
    1046.                 this.scrollBottom();
    1047.             },
    1048.             sendReply:function(title){
    1049.                 var _this=this;
    1050.  
    1051.                 let msg = {}
    1052.                 msg.avator=_this.visitor.avator;
    1053.                 msg.content = replaceContent(title);
    1054.                 msg.name = _this.visitor.name;
    1055.                 msg.is_kefu = true;
    1056.                 msg.time = _this.getNowDate();
    1057.                 msg.show_time=false;
    1058.                 _this.msgList.push(msg);
    1059.                 _this.scrollBottom();
    1060.  
    1061.                 var mes = {};
    1062.                 mes.content = title;
    1063.                 mes.from_id = this.visitor.visitor_id;
    1064.                 mes.ent_id = ENT_ID;
    1065.                 _this.sendAjax("/2/message_ask","post",mes,function(msg){
    1066.                     var msgArr=msg.content.split("[b]");
    1067.                     for(var i in msgArr){
    1068.                         let content = {}
    1069.                         content.avator = msg.avator;
    1070.                         content.name = msg.name;
    1071.                         content.content =replaceSpecialTag(msgArr[i]);
    1072.                         content.is_kefu = false;
    1073.                         content.time = msg.time;
    1074.                         content.is_reply=true;
    1075.                         _this.msgList.push(content);
    1076.                         _this.scrollBottom();
    1077.                     }
    1078.                     _this.cleanAllTimeout();
    1079.                     _this.alertSound('/static/images/notification.mp3');//提示音
    1080.                 });
    1081.                 //this.chatToUser();
    1082.             },
    1083.             //获取日期
    1084.             getNowDate : function() {// 获取日期
    1085.                 var d = new Date(new Date());
    1086.                 return d.getFullYear() + '-' + this.digit(d.getMonth() + 1) + '-' + this.digit(d.getDate())
    1087.                     + ' ' + this.digit(d.getHours()) + ':' + this.digit(d.getMinutes()) + ':' + this.digit(d.getSeconds());
    1088.             },
    1089.             //补齐数位
    1090.             digit : function (num) {
    1091.                 return num < 10 ? '0' + (num | 0) : num;
    1092.             },
    1093.             setCache : function (key,obj){
    1094.                 if(navigator.cookieEnabled&&typeof window.localStorage !== 'undefined'){
    1095.                     localStorage.setItem(key, JSON.stringify(obj));
    1096.                 }
    1097.             },getCache : function (key){
    1098.                 if(navigator.cookieEnabled&&typeof window.localStorage !== 'undefined') {
    1099.                     return JSON.parse(localStorage.getItem(key));
    1100.                 }
    1101.             },
    1102.             setNoticeWelcome(list){
    1103.                 var _this=this;
    1104.                 var msgs = list;
    1105.                 var delaySecond=0;
    1106.                 for(let i in msgs){
    1107.                     var msg=msgs[i];
    1108.                     if(msg.delay_second){
    1109.                         delaySecond+=msg.delay_second;
    1110.                     }else{
    1111.                         delaySecond+=4;
    1112.                     }
    1113.                     var timer =  setTimeout(function (msg) {
    1114.                         msg.time=shortTime(getNowDate());
    1115.                         msg.content = replaceSpecialTag(msg.content);
    1116.                         msg.name=_this.entConfig.robotName;
    1117.                         _this.msgList.push(msg);
    1118.                         _this.scrollBottom();
    1119.                         _this.alertSound('/static/images/notification.mp3');
    1120.                         var redata={
    1121.                             type:"message",
    1122.                             data:msg
    1123.                         }
    1124.                         window.parent.postMessage(redata,"*");
    1125.                     },1000*delaySecond,msg);
    1126.                     _this.allTimeouter.push(timer);
    1127.                 }
    1128.             },
    1129.             //获取自动欢迎语句
    1130.             getNotice : function (){
    1131.                 var _this=this;
    1132.                 var oldNotice=getFakeCookie("noticed_"+ENT_ID);
    1133.                 if(oldNotice){
    1134.                     if(_this.autoWelcome=="on"){
    1135.                         return;
    1136.                     }
    1137.                     $.get("/2/notices?visitor_id="+this.visitor.visitor_id+"&ent_id="+ENT_ID+"&kefu_name="+this.visitor.to_id,function(res) {
    1138.                         _this.entConfig=res.result.ent_config;
    1139.                         if (res.result.welcome != null) {
    1140.                             setFakeCookie("noticed_"+ENT_ID,res.result.welcome,7*3600*24);
    1141.                             _this.setNoticeWelcome(res.result.welcome);
    1142.                         }
    1143.                     });
    1144.                     return;
    1145.                 }
    1146.                 $.get("/2/notices?is_record=1&visitor_id="+this.visitor.visitor_id+"&ent_id="+ENT_ID+"&kefu_name="+this.visitor.to_id,function(res) {
    1147.                     _this.entConfig=res.result.ent_config;
    1148.                     if (res.result.welcome != null) {
    1149.                         setFakeCookie("noticed_"+ENT_ID,res.result.welcome,7*3600*24);
    1150.                         _this.setNoticeWelcome(res.result.welcome);
    1151.                     }
    1152.                 });
    1153.             },
    1154.             initCss:function(){
    1155.                 var _hmt = _hmt || [];
    1156.                 (function() {
    1157.                     var hm = document.createElement("script");
    1158.                     hm.src = "https://hm.baidu.com/hm.js?82938760e00806c6c57adee91f39aa5e";
    1159.                     var s = document.getElementsByTagName("script")[0];
    1160.                     s.parentNode.insertBefore(hm, s);
    1161.                 })();
    1162.  
    1163.                 var _this=this;
    1164.                 $(function () {
    1165.                     //手机端的样式问题
    1166.                     // if(_this.isMobile){
    1167.                     //     $(".chatVisitorPage").css("height","calc(100% - 155px)");
    1168.                     // }
    1169.                     //展示表情
    1170.                     // var faces=placeFace();
    1171.                     // $.each(faceTitles, function (index, item) {
    1172.                     //     _this.face.push({"name":item,"path":faces[item]});
    1173.                     // });
    1174.                     // $(".visitorFaceBtn").click(function(e){
    1175.                     //     var status=$('.faceBox').css("display");
    1176.                     //     if(status=="block"){
    1177.                     //         $('.faceBox').hide();
    1178.                     //     }else{
    1179.                     //         $('.faceBox').show();
    1180.                     //     }
    1181.                     //     return false;
    1182.                     // });
    1183.                     $("body").on("click",".replyContentBtn a",function() {
    1184.                         var txt=$(this).text();
    1185.                         var href=$(this).attr("href");
    1186.                         if(href=="self"||!href){
    1187.                             _this.messageContent=txt;
    1188.                             _this.chatToUser();
    1189.                             return false;
    1190.                         }
    1191.                     });
    1192.  
    1193.                     //var windheight = $(window).height();
    1194.                     $(window).resize(function(){
    1195.                         //var docheight = $(window).height();  /*唤起键盘时当前窗口高度*/
    1196.                         //_this.scrollBottom();
    1197.                         _this.visitorPageHeight();
    1198.                         // if(docheight < windheight){            /*当唤起键盘高度小于未唤起键盘高度时执行*/
    1199.                         //     $(".chatBoxSend").css("position","static");
    1200.                         // }else{
    1201.                         //     $(".chatBoxSend").css("position","fixed");
    1202.                         // }
    1203.                         //_this.visitorPageHeight();
    1204.                         //document.getElementById('chatVisitorPage').style.height = (document.documentElement.clientHeight - 71) + 'px';
    1205.                     });
    1206.                     if(isMobile()){
    1207.                         _this.visitorPageHeight();
    1208.                         //document.getElementById('chatVisitorPage').style.height = (document.documentElement.clientHeight - 71) + 'px';
    1209.                     }
    1210.                     //自动问答
    1211.                     $("body").on("click",".visitorReplyContent",function() {
    1212.                         var txt=$(this).find("span").text();
    1213.                         _this.messageContent=txt;
    1214.                         _this.chatToUser();
    1215.                     });
    1216.                     //自动问答换一换
    1217.                     $("body").on("click",".visitorReplyTitle a",function() {
    1218.                         ++_this.topQuestionPage;
    1219.                         if(_this.topQuestionPage>_this.topQuestionCount){
    1220.                             _this.topQuestionPage=1;
    1221.                         }
    1222.                         var result=pagination(_this.topQuestionPage,_this.topQuestionPagesize,_this.topQuestionList);
    1223.                         _this.makeReplyItem(result,true);
    1224.                     });
    1225.                 });
    1226.             },
    1227.             //心跳
    1228.             ping:function(){
    1229.                 let _this=this;
    1230.                 let mes = {}
    1231.                 mes.type = "ping";
    1232.                 mes.data = "visitor:"+_this.visitor.visitor_id;
    1233.                 setInterval(function () {
    1234.                     if(_this.socket!=null&&!_this.wsSocketClosed){
    1235.                         _this.socket.send(JSON.stringify(mes));
    1236.                     }
    1237.                 },10000);
    1238.             },
    1239.             //初始化
    1240.             init:function(){
    1241.                 var _this=this;
    1242.                 _this.isMobile=isMobile();
    1243.  
    1244.                 this.initCss();
    1245.                 //已读消息
    1246.                 var ms= 1000*2;
    1247.                 var lastClick = Date.now() - ms;
    1248.                 $("body").mouseover(function(){
    1249.                     if(!_this.haveUnreadMessage){
    1250.                         return;
    1251.                     }
    1252.                     if (Date.now() - lastClick >= ms) {
    1253.                         lastClick = Date.now();
    1254.                         //如果有未读消息，调用已读接口
    1255.                         _this.sendAjax("/2/messages_read","post",{"visitor_id":_this.visitor.visitor_id,"kefu":_this.visitor.to_id},function(data){
    1256.                             _this.haveUnreadMessage=false;
    1257.                         });
    1258.                     }
    1259.                 });
    1260.                 $('body').click(function(){
    1261.                     clearFlashTitle();
    1262.                     window.parent.postMessage({type:"focus"},"*");
    1263.                     //$('.faceBox').hide();
    1264.                     //剪贴板
    1265.                     try{
    1266.                         var selecter = window.getSelection().toString();
    1267.                         if (selecter != null && selecter.trim() != ""){
    1268.                             var str=selecter.trim();
    1269.                             _this.sendInputingStrNow(str);
    1270.                         }
    1271.                     } catch (err){
    1272.                         var selecter = document.selection.createRange();
    1273.                         var s = selecter.text;
    1274.                         if (s != null && s.trim() != ""){
    1275.                             var str=s.trim();
    1276.                             _this.sendInputingStrNow(str);
    1277.                         }
    1278.                     }
    1279.                 });
    1280.  
    1281.  
    1282.  
    1283.                 $("body").on("click",".chatImagePic",function() {
    1284.                     var url=$(this).attr("data-src");
    1285.                     _this.imgPreviewSrc=[url];
    1286.                     _this.$refs.preview.clickHandler();
    1287.                     //new PinchZoom.default($(this)[0], {});
    1288.                     // _this.$alert("", "", {
    1289.                     //     dangerouslyUseHTMLString: true
    1290.                     // });
    1291.                     return false;
    1292.                 });
    1293.                 window.onfocus = function () {
    1294.                     //_this.focusHandle();
    1295.                 }
    1296.  
    1297.  
    1298.                 //判断当前是否在iframe中
    1299.                 if(self!=top){
    1300.                     _this.isIframe=true;
    1301.                 }
    1302.  
    1303.             },
    1304.             //表情点击事件
    1305.             faceIconClick:function(index){
    1306.                 this.showFaceIcon=false;
    1307.                 this.messageContent+="face"+this.face[index].name;
    1308.             },
    1309.             //上传图片
    1310.             uploadImg:function (url){
    1311.                 let _this=this;
    1312.                 $('#uploadImg').after('');
    1313.                 $("#uploadImgFile").click();
    1314.                 $("#uploadImgFile").change(function (e) {
    1315.                     var formData = new FormData();
    1316.                     var file = $("#uploadImgFile")[0].files[0];
    1317.                     formData.append("imgfile",file); //传给后台的file的key值是可以自己定义的
    1318.                     filter(file) && $.ajax({
    1319.                         url: url || '',
    1320.                         type: "post",
    1321.                         data: formData,
    1322.                         contentType: false,
    1323.                         processData: false,
    1324.                         dataType: 'JSON',
    1325.                         mimeType: "multipart/form-data",
    1326.                         //添加自定义属性,监听上下文的进度
    1327.                         xhr: function() {
    1328.                             //创建原生的ajax请求对象
    1329.                             var xhr = $.ajaxSettings.xhr();
    1330.                             //监听进度的一个事件
    1331.                             xhr.upload.onprogress = function(e) {
    1332.                                 console.log(e.total); //文件大小
    1333.                                 console.log(e.loaded); //上传多少
    1334.                                 var w = parseInt((e.loaded / e.total) * 100)
    1335.                                 console.log(w);
    1336.                                 _this.percentage=w;
    1337.                                 if(w>=100){
    1338.                                     _this.percentage=0;
    1339.                                 }
    1340.                             }
    1341.                             return xhr
    1342.                         },
    1343.                         success: function (res) {
    1344.                             if(res.code!=200){
    1345.                                 _this.$message({
    1346.                                     message: res.msg,
    1347.                                     type: 'error'
    1348.                                 });
    1349.                             }else{
    1350.                                 _this.$message({
    1351.                                     message: KEFU_LANG[LANG]['uploadSuccess'],
    1352.                                     type: 'success'
    1353.                                 });
    1354.                                 _this.messageContent+='img[' + res.result.path + ']';
    1355.                                 _this.chatToUser();
    1356.                                 setTimeout(function () {
    1357.                                     _this.scrollBottom();
    1358.                                 },2000);
    1359.                             }
    1360.                         },
    1361.                         error: function (data) {
    1362.                             console.log(data);
    1363.                             _this.$message({
    1364.                                 message: KEFU_LANG[LANG]['uploadFailed']+data.responseText,
    1365.                                 type: 'error'
    1366.                             });
    1367.                         }
    1368.                     });
    1369.                 });
    1370.             },
    1371.             //上传文件
    1372.             uploadFile:function (url){
    1373.                 let _this=this;
    1374.                 $('#uploadFile').after('');
    1375.                 $("#uploadRealFile").click();
    1376.                 $("#uploadRealFile").change(function (e) {
    1377.                     var formData = new FormData();
    1378.                     var file = $("#uploadRealFile")[0].files[0];
    1379.                     formData.append("realfile",file); //传给后台的file的key值是可以自己定义的
    1380.                     console.log(formData);
    1381.                     $.ajax({
    1382.                         url: url || '',
    1383.                         type: "post",
    1384.                         data: formData,
    1385.                         contentType: false,
    1386.                         processData: false,
    1387.                         dataType: 'JSON',
    1388.                         mimeType: "multipart/form-data",
    1389.                         //添加自定义属性,监听上下文的进度
    1390.                         xhr: function() {
    1391.                             //创建原生的ajax请求对象
    1392.                             var xhr = $.ajaxSettings.xhr();
    1393.                             //监听进度的一个事件
    1394.                             xhr.upload.onprogress = function(e) {
    1395.                                 console.log(e.total); //文件大小
    1396.                                 console.log(e.loaded); //上传多少
    1397.                                 var w = parseInt((e.loaded / e.total) * 100)
    1398.                                 console.log(w);
    1399.                                 _this.percentage=w;
    1400.                                 if(w>=100){
    1401.                                     _this.percentage=0;
    1402.                                 }
    1403.                             }
    1404.                             return xhr
    1405.                         },
    1406.                         success: function (res) {
    1407.  
    1408.                             if(res.code!=200){
    1409.                                 _this.$message({
    1410.                                     message: res.msg,
    1411.                                     type: 'error'
    1412.                                 });
    1413.                             }else{
    1414.                                 _this.$message({
    1415.                                     message: KEFU_LANG[LANG]['uploadSuccess'],
    1416.                                     type: 'success'
    1417.                                 });
    1418.                                 //_this.messageContent+='file[' + res.result.path + ']';
    1419.                                 var data=JSON.stringify({
    1420.                                     name:res.result.name,
    1421.                                     ext:res.result.ext,
    1422.                                     size:res.result.size,
    1423.                                     path:res.result.path,
    1424.                                 })
    1425.                                 _this.messageContent+='mutiFile[' + data+ ']';
    1426.                                 _this.chatToUser();
    1427.                             }
    1428.                         },
    1429.                         error: function (data) {
    1430.                             console.log(data);
    1431.                             _this.$message({
    1432.                                 message: KEFU_LANG[LANG]['uploadFailed']+data.responseText,
    1433.                                 type: 'error'
    1434.                             });
    1435.                         }
    1436.                     });
    1437.                 });
    1438.             },
    1439.             //粘贴上传图片
    1440.             onPasteUpload:function(event){
    1441.                 let items = event.clipboardData && event.clipboardData.items;
    1442.                 let file = null
    1443.                 if (items && items.length) {
    1444.                     // 检索剪切板items
    1445.                     for (var i = 0; i < items.length; i++) {
    1446.                         if (items[i].type.indexOf('image') !== -1) {
    1447.                             file = items[i].getAsFile()
    1448.                         }
    1449.                     }
    1450.                 }
    1451.                 if (!file) {
    1452.                     return;
    1453.                 }
    1454.                 let _this=this;
    1455.                 var formData = new FormData();
    1456.                 formData.append('imgfile', file);
    1457.                 $.ajax({
    1458.                     url: '/uploadimg',
    1459.                     type: "post",
    1460.                     data: formData,
    1461.                     contentType: false,
    1462.                     processData: false,
    1463.                     dataType: 'JSON',
    1464.                     mimeType: "multipart/form-data",
    1465.                     //添加自定义属性,监听上下文的进度
    1466.                     xhr: function() {
    1467.                         //创建原生的ajax请求对象
    1468.                         var xhr = $.ajaxSettings.xhr();
    1469.                         //监听进度的一个事件
    1470.                         xhr.upload.onprogress = function(e) {
    1471.                             console.log(e.total); //文件大小
    1472.                             console.log(e.loaded); //上传多少
    1473.                             var w = parseInt((e.loaded / e.total) * 100)
    1474.                             console.log(w);
    1475.                             _this.percentage=w;
    1476.                             if(w>=100){
    1477.                                 _this.percentage=0;
    1478.                             }
    1479.                         }
    1480.                         return xhr
    1481.                     },
    1482.                     success: function (res) {
    1483.                         if(res.code!=200){
    1484.                             _this.$message({
    1485.                                 message: res.msg,
    1486.                                 type: 'error'
    1487.                             });
    1488.                         }else{
    1489.                             _this.$message({
    1490.                                 message: KEFU_LANG[LANG]['uploadSuccess'],
    1491.                                 type: 'success'
    1492.                             });
    1493.                             _this.messageContent+='img[' + res.result.path + ']';
    1494.                             _this.chatToUser();
    1495.                             setTimeout(function () {
    1496.                                 _this.scrollBottom();
    1497.                             },2000);
    1498.                         }
    1499.                     },
    1500.                     error: function (data) {
    1501.                         console.log(data);
    1502.                         _this.$message({
    1503.                             message: KEFU_LANG[LANG]['uploadFailed']+data.responseText,
    1504.                             type: 'error'
    1505.                         });
    1506.                     }
    1507.                 });
    1508.             },
    1509.             //自动
    1510.             getTopQuestion:function(){
    1511.                 var _this=this;
    1512.                 $.get("/other/getTopQuestion?ent_id="+ENT_ID,function(res) {
    1513.                     if(res.code!=200||!res.result){
    1514.                         return;
    1515.                     }
    1516.                     var hotQuestion=res.result.hotQuestion;
    1517.                     if(hotQuestion!=""){
    1518.                         _this.hotQuestion=hotQuestion.split(",");
    1519.                     }
    1520.  
    1521.                     var questionList=res.result.questionList;
    1522.                     if(questionList.length==0){
    1523.                         return;
    1524.                     }
    1525.                     _this.topQuestionList=questionList;
    1526.                     _this.topQuestionCount=sumPage(_this.topQuestionPagesize,questionList);
    1527.                     var result=pagination(1,_this.topQuestionPagesize,questionList);
    1528.  
    1529.                     _this.makeReplyItem(result);
    1530.                 });
    1531.             },
    1532.             makeReplyItem:function(result,isPage){
    1533.                 var _this=this;
    1534.                 var msg={};
    1535.                 msg.type="card";
    1536.                 msg.avator = _this.noticeAvatar;
    1537.                 msg.name = _this.noticeName;
    1538.                 msg.show_time = true;
    1539.                 msg.time = _this.getNowDate();
    1540.                 msg.content="";
    1541.                 var i=1;
    1542.                 for(key in result){
    1543.                     msg.content+="
      "+i+". "+result[key]+"
      "      ;
    1544.                     i++;
    1545.                 }
    1546.                 if(!isPage){
    1547.                     _this.msgList.push(msg);
    1548.                     _this.scrollBottom();
    1549.                 }else{
    1550.                     $(".cardBoxContent").html(msg.content);
    1551.                 }
    1552.  
    1553.             },
    1554.             //自动
    1555.             getAutoReply:function(){
    1556.                 var _this=this;
    1557.                 $.get("/autoreply?ent_id="+ENT_ID,function(res) {
    1558.                     if(res.code!=200 || res.result.length==0){
    1559.                         return;
    1560.                     }
    1561.                     var result=res.result;
    1562.                     _this.replys.push(result);
    1563.                 });
    1564.             },
    1565.             //提示音
    1566.             alertSound:function(soundUrl){
    1567.                 var b = document.getElementById("chatMessageAudio");
    1568.                 if (b.canPlayType('audio/ogg; codecs="vorbis"')) {
    1569.                     b.type= 'audio/mpeg';
    1570.                     b.src=soundUrl ;
    1571.                     var p = b.play();
    1572.                     p && p.then(function () {
    1573.                     }).catch(function (e) {
    1574.                     });
    1575.                 }
    1576.             },
    1577.             sendSound:function(){
    1578.                 var b = document.getElementById("chatMessageSendAudio");
    1579.                 if (b.canPlayType('audio/ogg; codecs="vorbis"')) {
    1580.                     b.type= 'audio/mpeg';
    1581.                     b.src= '/static/images/sent.ogg';
    1582.                     var p = b.play();
    1583.                     p && p.then(function(){}).catch(function(e){});
    1584.                 }
    1585.             },
    1586.             initPeerjs:function(){
    1587.                 var peer = new Peer();
    1588.                 this.peer=peer;
    1589.                 var _this=this;
    1590.  
    1591.                 peer.on('open', function(id) {
    1592.                     console.log('My peer ID is: ' + id);
    1593.                     _this.peerjsId=id;
    1594.                 });
    1595.                 peer.on('close', function() {
    1596.                     console.log('My peer close');
    1597.                     if(_this.loading!=null){
    1598.                         _this.loading.close();
    1599.                     }
    1600.                 });
    1601.                 peer.on('disconnected', function() {
    1602.                     console.log('My peer disconnected');
    1603.                     if(_this.loading!=null){
    1604.                         _this.loading.close();
    1605.                     }
    1606.                 });
    1607.                 peer.on('error', function() {
    1608.                     console.log('My peer error');
    1609.                     if(_this.loading!=null){
    1610.                         _this.loading.close();
    1611.                     }
    1612.                 });
    1613.             },
    1614.             //打电话
    1615.             callPhone:function(){
    1616.                 var _this=this;
    1617.                 var media=(navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia);
    1618.                 if(!media){
    1619.                     _this.$message({
    1620.                         type: 'error',
    1621.                         message: "not support"
    1622.                     });
    1623.                     return ;
    1624.                 }
    1625.                 var getUserMedia = media.bind(navigator);
    1626.                 this.$confirm(this.flyLang.videoAudio, this.flyLang.tips, {
    1627.                     confirmButtonText: this.flyLang.audio,
    1628.                     cancelButtonText: this.flyLang.cancel,
    1629.                     type: 'warning'
    1630.                 }).then(() => {
    1631.                     _this.messageContent="voice call...";
    1632.                     _this.chatToUser();
    1633.                     _this.loading = _this.$loading({
    1634.                         lock: true,
    1635.                         text: _this.flyLang.connecting,
    1636.                         spinner: 'el-icon-phone-outline',
    1637.                         background: 'rgba(0, 0, 0, 0.7)'
    1638.                     });
    1639.                     _this.initPeerjs();//初始化peerjs
    1640.                     _this.loadingTimerTimeoutClose();
    1641.                     _this.isVideo=false;
    1642.                     getUserMedia({video:false, audio: {
    1643.                             noiseSuppression: true,
    1644.                             echoCancellation: true,
    1645.                         }}, function(stream) {
    1646.                         _this.localStream=stream;
    1647.                         _this.sendAjax("/2/callKefu","post",{"action":"callpeer",kefu_id:_this.visitor.to_id,visitor_id:_this.visitor.visitor_id},function(result){
    1648.                         });
    1649.                     }, function(err) {
    1650.                         _this.$message({
    1651.                             type: 'error',
    1652.                             message: err
    1653.                         });
    1654.                         if(_this.loading) _this.loading.close();
    1655.                     });
    1656.                 }).catch(() => {
    1657.                 });
    1658.             },
    1659.             callPeer:function(){
    1660.                 var _this=this;
    1661.                 var media=(navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia);
    1662.                 if(!media){
    1663.                     _this.$message({
    1664.                         type: 'error',
    1665.                         message: "not support"
    1666.                     });
    1667.                     return ;
    1668.                 }
    1669.                 var getUserMedia = media.bind(navigator);
    1670.                 this.$confirm(this.flyLang.videoAudio, this.flyLang.tips, {
    1671.                     confirmButtonText: this.flyLang.video,
    1672.                     cancelButtonText: this.flyLang.cancel,
    1673.                     type: 'warning'
    1674.                 }).then(() => {
    1675.                     _this.messageContent="video call...";
    1676.                     _this.chatToUser();
    1677.                     this.loading = this.$loading({
    1678.                         lock: true,
    1679.                         text: _this.flyLang.connecting,
    1680.                         spinner: 'el-icon-video-camera',
    1681.                         background: 'rgba(0, 0, 0, 0.5)'
    1682.                     });
    1683.                     this.loadingTimerTimeoutClose();
    1684.                     this.isVideo=true;
    1685.                     //初始化peerjs
    1686.                     this.initPeerjs();
    1687.                     getUserMedia({video:true, audio: {
    1688.                             noiseSuppression: true,
    1689.                             echoCancellation: true,
    1690.                         }}, function(stream) {
    1691.                         _this.localStream=stream;
    1692.                         _this.sendAjax("/2/callKefu","post",{"action":"callpeer",kefu_id:_this.visitor.to_id,visitor_id:_this.visitor.visitor_id},function(result){
    1693.                         });
    1694.                     }, function(err) {
    1695.                         _this.$message({
    1696.                             type: 'error',
    1697.                             message: err
    1698.                         });
    1699.                         if(_this.loading) _this.loading.close();
    1700.                     });
    1701.                 }).catch(() => {
    1702.                 });
    1703.             },
    1704.             talkPeer:function(){
    1705.                 var _this=this;
    1706.                 var canvas = this.canvasElement;
    1707.  
    1708.                 if(this.loading!=null){
    1709.                     this.loading.close();
    1710.                 }
    1711.                 clearTimeout(this.loadingTimer);
    1712.                 this.$message({
    1713.                     message: '正在通话...',
    1714.                     type: 'success'
    1715.                 });
    1716.                 if(_this.kefuPeerId==""||_this.localStream==null){
    1717.                     return;
    1718.                 }
    1719.                 //本人摄像头
    1720.                 if(_this.isVideo){
    1721.                     var localVideo=document.querySelector("#chatLocalRtc");
    1722.                     localVideo.srcObject = _this.localStream;
    1723.                     localVideo.autoplay=true;
    1724.                 }
    1725.  
    1726.                 //localVideo.autoplay = true;
    1727.  
    1728.                 _this.call = _this.peer.call(_this.kefuPeerId, _this.localStream);
    1729.                 _this.call.on('stream', function(remoteStream) {
    1730.                     var remoteVideo = document.querySelector("#chatRtc");
    1731.                     remoteVideo.srcObject = remoteStream;
    1732.                     remoteVideo.autoplay = true;
    1733.                 });
    1734.                 _this.call.on('close', function() {
    1735.                     console.log("call close");
    1736.                     _this.loading.close();
    1737.                     _this.callClear();
    1738.                 });
    1739.                 _this.call.on('error', function(err) {
    1740.                     console.log(err);
    1741.                     _this.callClear();
    1742.                     _this.loading.close();
    1743.                 });
    1744.                 // _this.$alert('正在通话，请保持页面..', '提示', {
    1745.                 //     confirmButtonText: '挂断',
    1746.                 //     callback: function(){
    1747.                 //         _this.sendAjax("/2/callKefu","post",{"action":"callCancel",kefu_id:_this.visitor.to_id,visitor_id:_this.visitor.visitor_id},function(result){
    1748.                 //         });
    1749.                 //         if(call!=null){
    1750.                 //             call.close();
    1751.                 //         }
    1752.                 //     }
    1753.                 // });
    1754.                 // 调用Vudio
    1755.  
    1756.                 // var vudio = new Vudio(_this.localStream, canvas, {
    1757.                 //     accuracy: 256,
    1758.                 //     width: 800,
    1759.                 //     height: 100,
    1760.                 //     waveform: {
    1761.                 //         fadeSide: false,
    1762.                 //         maxHeight: 100,
    1763.                 //         verticalAlign: 'middle',
    1764.                 //         horizontalAlign: 'center',
    1765.                 //         color: '#2980b9'
    1766.                 //     }
    1767.                 // })
    1768.                 //
    1769.                 // vudio.dance()
    1770.  
    1771.             },
    1772.             callClose(){
    1773.                 var _this=this;
    1774.                 if(this.call==null) return;
    1775.                 _this.sendAjax("/2/callKefu","post",{"action":"callCancel",kefu_id:_this.visitor.to_id,visitor_id:_this.visitor.visitor_id},function(result){
    1776.                 });
    1777.                 _this.callClear();
    1778.             },
    1779.             getExtendInfo:function(){
    1780.                 var _this=this;
    1781.                 var extra=getQuery("extra");
    1782.                 if(extra==""){
    1783.                     return;
    1784.                 }
    1785.  
    1786.                 try{
    1787.                     var extraString=b64ToUtf8(extra);
    1788.                     if(_this.getCache("extra")==extraString){
    1789.                         return;
    1790.                     }
    1791.                     var extra=JSON.parse(extraString);
    1792.                     if (typeof extra=="string"){
    1793.                         extra=JSON.parse(extra);
    1794.                     }
    1795.  
    1796.                     for(var key in extra){
    1797.                         if(extra[key]==""){
    1798.                             extra[key]="无";
    1799.                         }
    1800.                         if(key=="visitorProduct"){
    1801.                             _this.messageContent="product["+JSON.stringify(extra[key])+"]";
    1802.                             _this.chatToUser();
    1803.                             _this.setCache("extra",extraString);
    1804.                         };
    1805.                     }
    1806.                 }catch (e) {
    1807.                 }
    1808.             },
    1809.             sendAjax:function(url,method,params,callback){
    1810.                 let _this=this;
    1811.                 $.ajax({
    1812.                     type: method,
    1813.                     url: url,
    1814.                     data:params,
    1815.                     headers:{
    1816.                         "lang":getQuery("lang"),
    1817.                     },
    1818.                     error:function(res){
    1819.                         var data=JSON.parse(res.responseText);
    1820.                         console.log(data);
    1821.                         if(data.code!=200){
    1822.                             _this.$message({
    1823.                                 message: data.msg,
    1824.                                 type: 'error'
    1825.                             });
    1826.                         }
    1827.                     },
    1828.                     success: function(data) {
    1829.                         if(data.code!=200){
    1830.                             _this.$message({
    1831.                                 message: data.msg,
    1832.                                 type: 'error'
    1833.                             });
    1834.                         }else if(data.result!=null){
    1835.                             callback(data.result);
    1836.                         }else{
    1837.                             callback(data);
    1838.                         }
    1839.                     }
    1840.                 });
    1841.             },
    1842.             showTitle:function(title){
    1843.                 //this.chatTitle=title;
    1844.                 $(".chatBox").append("
      chatNotice\">
      "+title+"
      "      );
    1845.                 this.scrollBottom();
    1846.             },
    1847.             //开始录音
    1848.             startRecoder:function(e){
    1849.                 if(this.recorder){
    1850.                     this.recorder.destroy();
    1851.                     this.recorder=null;
    1852.                 }
    1853.                 var _this=this;
    1854.                 Recorder.getPermission().then(function() {
    1855.                     _this.recorder = new Recorder();
    1856.                     _this.recorderAudio = document.querySelector('#audio');
    1857.                     _this.recorder.start();
    1858.                     _this.recorder.onprogress = function (params) {
    1859.                         _this.recoderSecond = parseInt(params.duration);
    1860.                     }
    1861.                     this.talkBtnText = "松开 结束";
    1862.                 }, function(error){
    1863.                     _this.$message({
    1864.                         message: error,
    1865.                         type: 'error'
    1866.                     });
    1867.                     return;
    1868.                 });
    1869.                 e.preventDefault();
    1870.             },
    1871.             stopRecoder:function(e){
    1872.                 if(!this.recorder){
    1873.                     return;
    1874.                 }
    1875.                 var blob=this.recorder.getWAVBlob();
    1876.                 this.recorderAudio.src = URL.createObjectURL(blob);
    1877.                 this.recorderAudio.controls = true;
    1878.                 this.talkBtnText="按住 说话";
    1879.                 this.recorderEnd=true;
    1880.                 e.preventDefault();
    1881.             },
    1882.             sendRecoder:function(){
    1883.                 if(!this.recorder){
    1884.                     return;
    1885.                 }
    1886.  
    1887.                 var blob=this.recorder.getWAVBlob();
    1888.                 var formdata = new FormData(); // form 表单 {key:value}
    1889.                 formdata.append("realfile", blob); // form input type="file"
    1890.                 var _this=this;
    1891.                 this.loading = this.$loading({
    1892.                     lock: true,
    1893.                     text: '正在发送',
    1894.                     spinner: 'el-icon-loading',
    1895.                     background: 'rgba(0, 0, 0, 0.7)'
    1896.                 });
    1897.                 $.ajax({
    1898.                     url: "/2/uploadAudio",
    1899.                     type: 'post',
    1900.                     processData: false,
    1901.                     contentType: false,
    1902.                     data: formdata,
    1903.                     dataType: 'JSON',
    1904.                     mimeType: "multipart/form-data",
    1905.                     success: function (res) {
    1906.                         _this.loading.close();
    1907.                         if(res.code!=200){
    1908.                             _this.$message({
    1909.                                 message: res.msg,
    1910.                                 type: 'error'
    1911.                             });
    1912.                         }else{
    1913.                             _this.cancelRecoder();
    1914.                             _this.messageContent+='audio[' + res.result.path + ']';
    1915.                             _this.chatToUser();
    1916.                         }
    1917.                     }
    1918.                 })
    1919.  
    1920.             },
    1921.             cancelRecoder:function(){
    1922.                 this.audioDialog=false;
    1923.                 if(!this.recorder){
    1924.                     return;
    1925.                 }
    1926.                 this.recorder.destroy();
    1927.                 this.recorder=null;
    1928.                 this.recoderSecond=0;
    1929.             },
    1930.             recoderFormat:function(percentage){
    1931.                 return percentage+"s";
    1932.             },
    1933.             openNewWindow:function(){
    1934.                 var features = "height=800px, width=960px, top=0, left=0, toolbar=no, menubar=no,scrollbars=no,resizable=no, location=no, status=no";  //设置新窗口的特性
    1935.                 var me = window.open(location.href, "newW", features);
    1936.             },
    1937.             //超时关闭
    1938.             checkTimeout:function(){
    1939.                 var _this=this;
    1940.                 this.timeoutTimer=setInterval(function(){
    1941.                     if (Date.now() - _this.currentActiveTime >= _this.timeoutLongTime) {
    1942.                         if(_this.VisitorCommentBtn!="true"){
    1943.                             _this.comment=true;
    1944.                         }
    1945.                         console.log("长时间无操作");
    1946.                         if(_this.socket!=null){
    1947.                             _this.reconnectDialog=true;
    1948.                             _this.showTitle(KEFU_LANG[LANG]['autoclosemes']);
    1949.                             _this.socket.close();
    1950.                             _this.socket=null;
    1951.                         }
    1952.                     }
    1953.                 },55000);
    1954.             },
    1955.             closeTimeoutTimer:function(){
    1956.                 clearInterval(this.timeoutTimer);
    1957.             },
    1958.             cleanAllTimeout:function(){
    1959.                 for(var i in this.allTimeouter){
    1960.                     clearTimeout(this.allTimeouter[i]);
    1961.                 }
    1962.             },
    1963.             loadMoreMessages:function(){
    1964.                 var _this=this;
    1965.                 var pagesize=5;
    1966.                 // if(this.currentPage>1){
    1967.                 //     this.replys=[];
    1968.                 // }
    1969.                 if(_this.loadMoreDisable){
    1970.                     return;
    1971.                 }
    1972.                 var moreMessage=KEFU_LANG[LANG]['moremessage'];
    1973.                 this.flyLang.moremessage=this.flyLang.loading;
    1974.                 this.loadMoreDisable=true;
    1975.                 var hasUnread=false;
    1976.                 this.sendAjax("/2/messages_page","get",{pagesize:pagesize,ent_id:ENT_ID,page:this.currentPage,visitor_id:_this.visitor.visitor_id},function(result){
    1977.                     var len=result.list.length;
    1978.                     if(result.list.length!=0){
    1979.                         if(len<pagesize){
    1980.                             _this.showLoadMore=false;
    1981.                         }else{
    1982.                             _this.showLoadMore=true;
    1983.                         }
    1984.  
    1985.                         let msgList=result.list;
    1986.                         for(var i=0;i<msgList.length;i++) {
    1987.                             let visitorMes = msgList[i];
    1988.                             let content = {}
    1989.                             if (visitorMes["mes_type"] == "kefu") {
    1990.                                 content.is_kefu = false;
    1991.                                 content.content = replaceSpecialTag(visitorMes["content"]);
    1992.                             } else {
    1993.                                 content.is_kefu = true;
    1994.                                 content.content = replaceContent(visitorMes["content"]);
    1995.                             }
    1996.                             if (visitorMes["read_status"] == "read") {
    1997.                                 content.read_status = KEFU_LANG[LANG].read;
    1998.                             } else {
    1999.                                 content.read_status = KEFU_LANG[LANG].unread;
    2000.                                 if(i==0){
    2001.                                     hasUnread=true;
    2002.                                     _this.haveUnreadMessage=true;
    2003.                                 }
    2004.                             }
    2005.                             content.avator = visitorMes["avator"];
    2006.                             content.name = visitorMes["name"];
    2007.                             content.msg_id = visitorMes["msg_id"];
    2008.                             content.time = shortTime(visitorMes["time"]);
    2009.                             _this.msgList.unshift(content);
    2010.                             //_this.scrollBottom();
    2011.                         }
    2012.                     }else{
    2013.                         _this.showLoadMore=false;
    2014.                     }
    2015.                     if(_this.currentPage==1){
    2016.                         _this.scrollBottom();
    2017.  
    2018.                         //_this.getAutoReply();
    2019.                     }
    2020.  
    2021.                     _this.currentPage++;
    2022.                     _this.flyLang.moremessage=moreMessage;
    2023.                     _this.loadMoreDisable=false;
    2024.                 });
    2025.             },
    2026.             //展示微信公众号带参二维码
    2027.             showWechatTip:function(){
    2028.                 var _this=this;
    2029.                 if(this.VisitorWechatQrcodeUrl==""||this.scanWechatQrcode!="true"){
    2030.                     return;
    2031.                 }
    2032.                 if(this.visitor.visitor_id.substr(0,2)=='wx'){
    2033.                     this.showTitle("微信访客用户已登录");
    2034.                     return;
    2035.                 }
    2036.                 var msg={};
    2037.                 msg.avator = _this.noticeAvatar;
    2038.                 msg.name = _this.noticeName;
    2039.                 msg.show_time = true;
    2040.                 msg.time = _this.getNowDate();
    2041.  
    2042.  
    2043.                 var child = '
      ';
    2044.                 child += '+this.VisitorWechatQrcodeUrl+'?visitor_id=' + this.visitor.visitor_id + '&ent_id='+ENT_ID+'">';
    2045.                 child += '扫描或长按左侧二维码关注公众号。
      可防止更换浏览器丢失消息、收不到回复。
      并可接收回复通知
      ';
  • msg.content=child;
  • _this.msgList.push(msg);
  • },
  • sendComment:function(tagName){
  • var _this=this;
  • if(!_this.commentScore){
  • this.$message({
  • message: _this.flyLang.invalidParam,
  • type: 'error'
  • });
  • return;
  • }
  • this.sendAjax("/2/comment","post",{
  • comment_score:_this.commentScore,
  • comment_content:_this.commentContent,
  • kefu_name:this.visitor.to_id,
  • ent_id:ENT_ID,
  • visitor_id:_this.visitor.visitor_id},function(result){});
  • },
  • //格式化时间
  • formatTime:function(time) {
  • // var timeDate=new Date(time);
  • // var timeStamp = Math.round(timeDate.getTime()/1000);
  • // var nowTime=Math.round(new Date(new Date().toLocaleDateString()).getTime()/1000);
  • // var timeDiff=timeStamp-nowTime;
  • // if(timeDiff>=0){
  • // return dateFormat("H:M:S",timeDate);
  • // //return beautifyTime(timeStamp,LANG);
  • // }else{
  • // return dateFormat("Y-m-d H:M:S",timeDate);
  • // }
  • return time;
  • },
  • getVersion:function(){
  • if(IS_TRY=="false"){
  • return;
  • }
  • this.$alert('当前为试用版本，请点击底部链接获取授权', '警告！', {
  • confirmButtonText: '确定',
  • });
  • },
  • selectLang:function(lang){
  • var url=changeURLPar(document.URL,"lang",lang);
  • document.location.href=url;
  • },
  • //focus事件处理
  • focusHandle(){
  • clearFlashTitle();
  • window.location.reload();
  • },
  • visitorPageHeight(){
  • //$("#chatVisitorPage").css("height","calc(100% - 121px)");
  • if(isWeiXin()){
  • $("body").css("height","100vh");
  • }else{
  • $("body").css("height",document.documentElement.clientHeight+"px");
  • }
  • //document.getElementById('chatVisitorPage').style.height = (document.documentElement.clientHeight - 71) + 'px';
  • },
  • checkDomainAuth(){
  • return;
  • var _this=this;
  • $.get("/other/domainAuth",{},function(data){
  • if(data.code=="201"){
  • _this.$alert( KEFU_LANG[LANG]['authLimit'],'', {
  • callback: function(){
  • window.location.reload();
  • }
  • });
  • }
  • });
  • },
  • initCallingDialog(){
  • this.canvasElement=$('#audioCanvas')[0];
  • this.videoElement=$('#chatRtc')[0];
  • this.talkPeer();
  • },
  • //loading关闭
  • loadingTimerTimeoutClose(){
  • var _this=this;
  • if(this.loadingTimer){
  • clearTimeout(this.loadingTimer);
  • this.loadingTimer=null;
  • }
  • this.loadingTimer=setTimeout(function(){
  • _this.loading.close();
  • _this.callClear();
  • }, 30000);
  • },
  • callClear() {
  • var _this=this;
  • _this.isCalling=false;
  • if(_this.loading){
  • _this.loading.close();
  • }
  • if(_this.call!=null){
  • _this.call.close();
  • }
  • if(_this.localStream){
  • var tracks=_this.localStream.getTracks();
  • for(var i=0;i<tracks.length;i++){
  • tracks[i].stop();
  • }
  • _this.localStream=null;
  • }
  • }
  • },
  • mounted:function() {
  • var _this=this;
  • document.addEventListener('paste', this.onPasteUpload);
  • document.addEventListener('scroll',this.textareaBlur);
  • window.addEventListener('message',function(e){
  • var msg=e.data;
  • if(msg.module&&msg.module=="locationPicker"){
  • _this.qqMap=false;
  • console.log('location', msg);
  • var address={
  • "title":msg.poiaddress,
  • "price":msg.poiname,
  • "img":"/static/images/qqmap.png",
  • "url":"https://apis.map.qq.com/tools/poimarker?type=0&marker=coord:"+msg.latlng.lat+","+msg.latlng.lng+"&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77&referer=myapp"
  • };
  • _this.messageContent="product["+JSON.stringify(address)+"]";
  • _this.chatToUser();
  • }
  • if(msg.type=="inputing_message"){
  • _this.sendInputingStrNow(msg.content);
  • }
  • if(msg.type=="send_message"){
  • _this.messageContent=msg.content;
  • _this.chatToUser();
  • }
  • });
  • //监听页面关闭
  • window.onbeforeunload = function(e) {
  • _this.callClose();
  • };
  • },
  • created: function () {
  • this.init();
  • this.getUserInfo();
  • this.checkDomainAuth();
  • //加载历史记录
  • //this.msgList=this.getHistory();
  • //滚动底部
  • //this.scrollBottom();
  • //获取欢迎
  • //this.initPeerjs();
  • //this.getVersion();
  • }
  • })
  • </script>
  • </html>
  • 相关阅读:
    前后端分离开发
    2022.08.19 java web学习
    java-php-python-绿色生活基于PS、DW的绿色环保宣传网站计算机毕业设计
    HashMap 的底层数据结构是什么？
    Leetcode71. 简化路径
    Spring Boot开发之SpringSercurity(续)
    基于matlab的三维点云数据ICP拼接算法实现
    Docker DeskTop的安装（Windows版本）
    设计循环队列---力扣622
    【注解】注解解析与应用场景
  • 原文地址：https://blog.csdn.net/taoshihan/article/details/127812755