在线客服聊天系统 PHP Live Chat 二次开发
在线客服聊天系统 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>