????在線客服聊天系統 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

????????????????.....

JavaScript

<!--<script src="<?php echo $app->asset('js/app/view/admin/MapView.js') ?>"></script>-->

?

????????? ? ? ...

JavaScript

<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

????????

JavaScript

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響應消息設定相關初始化狀態
?????????????

JavaScript

<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前端調用方法：

JavaScript

<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>

?

案例：https://zb.haoniu7.com
轉載鏈接?http://91hu.top/post/6.html

總結

以上是生活随笔為你收集整理的在线客服聊天系统 PHP Live Chat 二次开发的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。