在线客服聊天系统 PHP Live Chat,原官方地址https://livechat.mirrormx.net/,我下载于某源码分享网站。
本系统在使用中有以下几个不足:
1 采用了GOOGLE MAP ,国内无法使用
2 定位接口https://lcapi.mirrormx.net/v1/geolocation/query ,在国内定位 精度太差,跟换接口会出现IP不能定位问题
3 邮箱接口异常,无法发送邮件
4 调用JS方法不能动态更新客户端聊天窗口主题色
为此,我分析了相关代码,做了适应国内的相关二次开发。
A 地图采用国内的百度地图
views/admin/index.html
.....
<!-- <script src="<?php echo $app->asset('js/app/view/admin/MapView.js') ?>"></script> -->
...
<script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=YbMXiMrWb86X9FSSZ71xExIMXeRHVAw6"></script> <script> var mp = new BMap.Map("allmap"); var point = new BMap.Point(116.404, 39.915); mp.centerAndZoom(point, 14); mp.enableScrollWheelZoom(); mp.enableInertialDragging(); mp.enableContinuousZoom(); function bdmap(){ var size = new BMap.Size(10, 20); mp.addControl(new BMap.CityListControl({ anchor: BMAP_ANCHOR_TOP_LEFT, offset: size, // 切换城市之前事件 // onChangeBefore: function(){ // alert('before'); // }, // 切换城市之后事件 // onChangeAfter:function(){ // alert('after'); // } })); } function newloc(x,y){ var s_x=Number(x).toFixed(4); var s_y=Number(y).toFixed(4); var point = new BMap.Point(s_x, s_y); mp.centerAndZoom(point, 14); mp.panTo(new BMap.Point(s_x,s_y)); var marker = new BMap.Marker(point); // 创建标注 mp.addOverlay(marker); marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画 } </script>
B 国内IP定位 用baidu
../js/customer-chat-widget.min.js
t.Geolocation = function() { this.info = n(), this.empty = !0; var t = this; this.requestInfo = function(n, o) { o = o || "", i.get(e.geolocConfig.url + o, function(e) { if(e.country_code.length>0){ $.get("/php/api/loctionapi.php",function(data){ e.city=data.city; e.latitude=data.latitude; e.longitude=data.longitude; e.region_name=data.regionName; t.info = e, t.empty = !1 }); }else{ t.info = s(e), t.empty = !1 } }).always(function() { n && n(t.info) }) } }
其中/php/api/loctionapi.php 是自己做的一个接口,以此系统当前 的JSON 方式导出接口
C 邮箱问题
将/php/lib/PHPMailer 目录下相关类更新,调用发送邮件相关参数
D JS调用动态更新客户端窗口主题,初始化打开状态
主要用到的方式为HTML 向frame posetmessage消息
frame响应消息设定相关初始化状态
<script> function resetstyle(){ window.addEventListener('message',function(e){ var value = e.data; //子页面如果接收到的data的值是'return',则调用返回方法向父页面发送数据 if (value != null && value.match("background")){ var nv=value.replace("background",""); for(let i=0;i<document.getElementsByClassName('customer-chat-header').length;i++){ document.getElementsByClassName('customer-chat-header').valueOf()[i].setAttribute("style","background:"+nv); } // if(document.getElementById('chat-send-button')){ document.getElementById('chat-send-button').setAttribute("style","background:"+nv); } //document.getElementById("customer-chat-content-chat-box").setAttribute("style","border:2px solid "+nv); //var tc="customer-chat customer-chat-widget chat-box customer-chat-visible"; //document.getElementById("customer-chat-widget").setAttribute("class",tc); } else if(value != null && value.match("click")){ document.getElementById('customer-chat-button-toggle').click(); } }, false); } </script>
最后 此二次开发的在线客服系统JS前端调用方法:
<script> (function(d,t,u,s,e){ e=d.getElementsByTagName(t)[0]; s=d.createElement(t); s.src=u; s.async=1; f=d.createElement("a") f.id='iframe_style' f.hidden=true; f.text="1,#0d86ff"; // 1/0 初始化时就打开/关闭 #0d86ff 主题色 e.parentNode.insertBefore(f,e); e.parentNode.insertBefore(s,e); })(document,'script','//kfxt.91hu.top/php/app.php?widget-init.js'); </script>