IM12345_Web/WebUI/CallCenterWe.../js/chat.js

var wst, objs = {}, lockReconnect = false;

function CreateWebSockets() {
    try {
        //              $("#conn").attr("disabled", "disabled");

        Connects();
    } catch (e) {
        ReConnect();
    }
}
//连接
function Connects() {
    // ws = new WebSocket("ws://192.168.4.18:4006");
    // ws = new WebSocket("ws://192.168.1.21:2021");
    wst = new WebSocket("ws://192.168.8.10:2022");
    wst.onopen = function () {
        console.log(new Date() + "    " + "建立连接");
        //              $("#conn").removeAttr("disabled");
        var userCode = $.cookie("zx_user");
        Conn(userCode); //注册
        lockReconnect = false;
    };
    //接收到消息的回调方法
    wst.onmessage = function (evt) {
        console.log(new Date() + "  receive  " + evt.data);
        var data = JSON.parse(evt.data);
        if (data) {
            var ele = $("#" + data.code).find(".chatlist_con")[0];
            var type = data.action;
            switch (type.toLowerCase()) {
                case "serconn":
                    if (!data.state) {
                        $(".error").text(data.msg);
                    }
                    else {

                        $(".sidebar_list").empty();//sidebar
                        $(".chat_main").empty();
                    }
                    break;
                case "sersend":
                    if (data.state) {
                        append(ele, "self", data.msg, data.code, data.time, data.humanclass);
                        $("#" + data.code).find(".send_content").val("");
                    }
                    else {
                        notice(ele, "notice", data.msg);
                    }
                    break
                    //case "sersenderror":
                    //    append("notice", data.msg);
                    //    break
                case "serreceive":

                    if (!ele) {
                        $('.before').show();
                        var first = '';
                        if (!$(".sidebar_list li").length) {
                            first = 'activess';
                        }
                        //                              var userhtml = '<span class="user ' + first + '" code="' + data.code + '">' + data.name + '</span>';
                        var userhtml = '<li class="user ' + first + ' li' + data.code + '" code="' + data.code + '">' +
                                            '<img class="ver_middle"  src="img/youkeTx.png" alt="" width="30" height="30"/>' +
                                            '<p class="chat_name">' + data.name + '</p>' +
                                            '<i class="fa fa-circle pie" style="color:red;"></i>' +
                                            '<i class="fa fa-remove closeds" onclick="removed(this)"></i>' +
                                        '</li>';
                        $(userhtml).appendTo(".sidebar_list").click(function () {
                            $(".user").removeClass("activess");
                            // $(this).siblings('li').removeClass("actives");
                            $(this).addClass("activess");
                            $(this).find('.pie').removeClass('pieShow').addClass('pieHide');
                            $('.open_chat').find('.before').removeClass('show').addClass('hide');
                            $(".tabMain").removeClass("activess");
                            $("#" + $(this).attr("code")).addClass("activess");
                            var conul = $("#" + $(this).attr("code")).find(".chatlist_con");
                            $(conul).scrollTop($(conul)[0].scrollHeight);
                        });
                        var tabhtml = '<div class="tabMain ' + first + '" id="' + data.code + '">' +
                                            '<div class="main_message">' +
                                                '<ul class="chatlist_con">' +
                                                    '<a href="javascript:void(0)" class="more" onclick="getmore(\'' + data.code + '\')"><i class="fa fa-clock-o" style="margin-right: 5px;"></i>查看更多信息</a>' +
                                                    '<input type="hidden" class="hidnum" />' +
                                                '</ul>' +
                                            '</div>' +
                                            '<div class="main_sendMessage ">' +
                                                '<textarea name=" " rows=" " cols=" " onkeypress="keySend(event)" placeholder="按Enter 发送 " class="send_content "></textarea>' +
                                                '<input type="hidden" class="hidcid" value="' + data.code + '" />' +
                                                '<div class="send_btn ">' +
                                                    '<button class="sendTo " onclick="sendinfo(\'' + data.code + '\') ">发送(S)</button>' +
                                                     '<span style="color:red; " class="senderror"></span>' +
                                                '</div>' +
                                            '</div>' +
                                        '</div>';
                        $(".chat_main").append($(tabhtml));
                        ele = $("#" + data.code).find(".chatlist_con")[0];
                        objs.action = "loglist";
                        objs.code = data.code;
                        Sends();
                    }
                    if (!data.state) {
                        notice(ele, "notice", data.msg);
                    }
                    else {
                        append(ele, "left", data.msg, data.code, data.time, data.humanclass);
                    }

                    break; //收到消息
                case "loglist":
                    var list = data.data.rows;
                    $(list).each(function (i, n) {
                        var classname = "self";
                        if (n.F_FromUser == data.code) {
                            classname = "left";
                        }
                        insert(ele, classname, n.F_Message, $("#" + data.code).find(".hidnum").val(), n.F_HumanClass);
                    })
                    if (!data.data.isfirst) {
                        $(ele).find(".more").css("display", "block");
                        $("#" + data.code).find(".hidnum").val(data.data.num);
                    }
                    else {
                        $(ele).find(".more").css("display", "none");
                    }

                    break;//聊天记录
            }
        }
    };

    //连接关闭的回调方法
    wst.onclose = function (evt) {
        console.log(new Date() + "    " + "连接关闭");
        console.log(new Date() + "    " + "开始重连");
        ReConnect();
    };
    //连接发生错误的回调方法
    wst.onerror = function (evt) {
        console.log(new Date() + "    " + "连接异常");
        console.log(new Date() + "    " + "开始重连");
        ReConnect();
    };
}
//重连
function ReConnect() {
    if (!lockReconnect) {
        lockReconnect = true;
        //没连接上会一直重连，设置延迟避免请求过多
        setTimeout(function () {
            console.log(new Date() + "    " + "重连中……");
            lockReconnect = false;
            CreateWebSockets();
        }, 2000);
    }
}
//发送
function Sends() {
    if (wst.readyState != wst.OPEN) {
        ReConnect();
    }
    if (wst.readyState == wst.OPEN) {
        console.log(new Date() + "  send  " + JSON.stringify(objs));
        wst.send(JSON.stringify(objs));
    }
}
//注册
function Conn(userCode) {
    console.log(userCode);
    objs.action = "serconn";
    objs.code = userCode;
    Sends();
}
//查看更多
function getmore(ele) {
    objs.action = "loglist";
    objs.code = $("#" + ele).find(".hidcid").val();
    objs.msg = $("#" + ele).find(".hidnum").val();
    Sends();
}
//发送消息
function sendinfo(ele) {
    var msg = $("#" + ele).find(".send_content").val();
    if ($.trim(msg)) {
        objs.action = "sersend";
        objs.code = $("#" + ele).find(".hidcid").val();
        objs.msg = msg;
        Sends();
        $("#" + ele).find(".senderror").text("");
    }
    else {
        $("#" + ele).find(".send_content").val('');
        $("#" + ele).find(".senderror").text("请输入内容");
    }
}

function append(ele, cname, msg, codes, dates, humanclass) {
    var html = '<li>' +
                '<p class="message_time"><span>' + dates + '</span></p>' +
                '<div class="message_mincon ' + cname + '">'
    if (humanclass) {
        if (humanclass == 1)
            html += '<img class="ver_middle chat_yhtx" src="img/kefuTx.png" alt="" width="30" height="30" />'
        else if (humanclass == 2)
            html += '<img class="ver_middle chat_yhtx" src="img/youkeTx.png" alt="" width="30" height="30" />'
        else
            html += '<img class="ver_middle chat_yhtx" src="img/robot.png" alt="" width="30" height="30" />'
    }
    else {
        if (cname == 'self') {
            html += '<img class="ver_middle" src="img/kefuTx.png" alt="" width="30" height="30"/>'
        } else {
            html += '<img class="ver_middle" src="img/youkeTx.png" alt="" width="30" height="30"/>'
        }
    }

    html += '<div class="message_text">' + msg + '</div>' +
    '</div>' +
'</li>'
    $(html).appendTo(ele);
    $(ele).scrollTop($(ele)[0].scrollHeight);
    $('.li' + codes).find('.pie').removeClass('pieHide').addClass('pieShow');
    $('.open_chat').find('.before').removeClass('hide').addClass('show');
}

function insert(ele, cname, msg, nodown, humanclass) {
    var html = '<li>' +
//						'<p class="message_time"><span>' + n.CreateDate + '</span></p>' +
                '<div class="message_mincon ' + cname + '">'
    if (humanclass) {
        if (humanclass == 1)
            html += '<img class="ver_middle chat_yhtx" src="img/kefuTx.png" alt="" width="30" height="30" />'
        else if (humanclass == 2)
            html += '<img class="ver_middle chat_yhtx" src="img/youkeTx.png" alt="" width="30" height="30" />'
        else
            html += '<img class="ver_middle chat_yhtx" src="img/robot.png" alt="" width="30" height="30" />'
    }
    else {
        if (cname == 'self') {
            html += '<img class="ver_middle chat_yhtx" src="img/kefuTx.png" alt="" width="30" height="30" />'
        } else {
            html += '<img class="ver_middle" src="img/youkeTx.png" alt="" width="30" height="30"/>'
        }
    }

    html += '<div class="message_text">' + msg + '</div>' +
    '</div>' +
'</li>'
    var list = $(ele).find("li");
    if (list.length) {
        $(html).insertBefore(list[0]);
    }
    else {
        $(html).appendTo(ele);
    }
    if (!nodown) {
        $(ele).scrollTop($(ele)[0].scrollHeight);
    }
}
function notice(ele, cname, msg) {
    var html = '<li><span class="' + cname + '">' + msg + '</span></li>';
    $(html).appendTo(ele);
    $(ele).scrollTop($(ele)[0].scrollHeight);
}
// 		  //键盘发送事件
function keySend(event) {
    event = event || window.event;
    if (event.keyCode == 13) {
        $(".sendTo").click();
        event.returnValue = false;
        return false
    }
}
function removed(ele) {
    var code = $(ele).parent().attr('code');
    $(".user").removeClass("activess");
    $("#" + code).remove();
    $(ele).parent().remove();
    $(ele).parent().parent();
    showChat();
}
function showChat() {
    $('.sidebar_list').children("li:first-child").addClass("activess");
    $('.chat_main').children(".tabMain:first-child").addClass("activess");
}
$('.open_chat').click(function () {
    if ($('#chat').css('display') == 'block') {
        $('#chat').hide();
    } else {
        $('#chat').show();
        $(".send_content").focus();
    }

})

//聊天右侧列表开始
//弹屏右侧切换效果
$(".chat_ld-service li").click(function () {
    $(this).addClass("chat_cr-click").siblings().removeClass("chat_cr-click");
    var index = $(this).index();
    var ss = $(this).attr("itemtype");
    $(".chat_Content_box").find(".chat_complain").eq(index).addClass("chat_Shows").siblings().removeClass("chat_Shows");
    $(".chat_Content_box").find(".chat_complain").eq(index).find("input").focus();

});
//聊天右侧列表结束

//获取快速回复
quick_answer();
//知识库列表
knowledge_answer();
//工单搜索
workorder_answer();
//客户档案搜索
customer_answer();

//快速回复搜索
$('.Seach_answer').on('click', function () {
    quick_answer();
})
//知识库搜索
$('.Seach_knowledge').on('click', function () {
    knowledge_answer();
})
//工单搜索
$('.Seach_workorder').on('click', function () {
    workorder_answer();
})
//客户档案搜索
$('.Seach_customer').on('click', function () {
    customer_answer();
})

//快速回复
function quick_answer() {
    $('.quick_answer').empty();
    $.ajax({
        type: "get",
        url: huayi.config.callcenter_url + "ChatMessages/GetReplyList",
        dataType: 'json',
        async: false,
        data: {
            keyword: $('#key_answer').val(),
            page: 1,         //当前第几页
            pagesize: 20,    //每页显示的记录数
            token: $.cookie("token")
        },
        success: function (data) {
            $.each(data.rows, function (i, n) {
                var collection_imgurl = n.IsCollection == true ? "./img/collection_active.png" : "./img/collection.png";
                $('<li class="chat_item">' +
                            '<span class="answer_text" title="' + n.F_ReplyContent + '">' + GetLimitStr(n.F_ReplyContent, 68) + '<div>' +
                            '<button type="button" class="btn btn-primary btn-sm" onclick=sendMsg("' + n.F_ReplyContent + '",' + n.F_Id + ')>发送</button> ' +
                            '<img onclick="collection_img(' + n.F_Id + ')" src="' + collection_imgurl + '"/>' +
                        '</div></span></li>').appendTo($('.quick_answer'));
            });
            // 搜索关键词高亮显示
            GetReplaceKey(data.keys, document.getElementById('quick_answer').innerHTML, "quick_answer");
        }
    });

}

//知识库列表
function knowledge_answer() {
    $('.knowledge_anwser').empty();
    $.ajax({
        type: "get",
        url: huayi.config.callcenter_url + "ChatMessages/GetKnowledgeList",
        dataType: 'json',
        async: true,
        data: {
            keyword: $('#key_knowledge').val(),
            page: 1,         //当前第几页
            pagesize: 20,    //每页显示的记录数
            token: $.cookie("token")
        },
        success: function (data) {
            $.each(data.rows, function (i, n) {
                var collection_imgurl = n.IsCollection == true ? "./img/collection_active.png" : "./img/collection.png";
                $('<div class="knowledge_title">' + n.F_Title + '</div>' +
                        '<li class="chat_item">' +
                        '<span class="answer_text" title="' + GetLimitStr(n.F_Content, 200) + '">' + GetLimitStr(n.F_Content, 68) + '<div>' +    //n.F_Description
                        '<button type="button" class="btn btn-primary btn-sm" onclick=sendKnowledgeMsg("' + GetLimitStr(n.F_Content, 1000) + '",' + n.F_RepositoryId + ')>发送</button> ' +
                        '<img id="collectionimg" itemcollection = ' + n.F_RepositoryId + ' src="' + collection_imgurl + '"/>' +
                        '</div></span></li>').appendTo($('.knowledge_anwser'));
            });
            // 搜索关键词高亮显示
            GetReplaceKey(data.keys, document.getElementById('knowledge_anwser').innerHTML, "knowledge_anwser");
        }
    });
}

//工单列表
function workorder_answer() {
    $('.workorder_anwser').empty();
    $.ajax({
        type: "get",
        url: huayi.config.callcenter_url + "ChatMessages/GetWorkOrderList",
        dataType: 'json',
        async: true,
        data: {
            keyword: $('#key_workorder').val(),
            page: 1,         //当前第几页
            pagesize: 20,    //每页显示的记录数
            token: $.cookie("token")
        },
        success: function (data) {
            $.each(data.rows, function (i, n) {
                //var collection_imgurl = n.IsCollection == true ? "./img/collection_active.png" : "./img/collection.png";
                $('<div class="knowledge_title">' + n.F_WorkOrderId + '&nbsp;' + n.F_ComTitle + '【' + States(n.F_WorkState, n.F_IsReturn) + '】</div>' +
                        '<li class="chat_item">' +
                        '<span class="answer_text" title="' + GetLimitStr(n.F_ComContent, 200) + '">' + GetLimitStr(n.F_ComContent, 68) + '<div>' +    //n.F_Description
                        '<button type="button" class="btn btn-primary btn-sm" onclick=sendworkorderMsg("' + n.F_WorkOrderId + '&nbsp;' + n.F_ComTitle + '【' + States(n.F_WorkState, n.F_IsReturn) + '】&nbsp;内容:' + GetLimitStr(n.F_ComContent, 1000) + '",' + n.F_WorkOrderId + ')>发送</button> ' +
                        //'<img id="collectionimg" itemcollection = ' + n.F_WorkOrderId + ' src="' + collection_imgurl + '"/>' +
                        '</div></span></li>').appendTo($('.workorder_anwser'));
            });
            // 搜索关键词高亮显示
            GetReplaceKey(data.keys, document.getElementById('workorder_anwser').innerHTML, "workorder_anwser");
        }
    });
}

//客户档案列表
function customer_answer() {
    $('.customer_anwser').empty();
    $.ajax({
        type: "get",
        url: huayi.config.callcenter_url + "ChatMessages/GetCustomerList",
        dataType: 'json',
        async: true,
        data: {
            keyword: $('#key_workorder').val(),
            page: 1,         //当前第几页
            pagesize: 20,    //每页显示的记录数
            token: $.cookie("token")
        },
        success: function (data) {
            $.each(data.rows, function (i, n) {
                $('<div class="knowledge_title">' + n.F_CustomerName + '</div>' +
                        '<li class="chat_item">' +
                        '<span class="answer_text" title="客户电话：' + n.F_Mobile + ' ' + n.F_CustomerEName + ' 联系电话：' + n.F_Telephone + '">客户电话：' + n.F_Mobile + ' ' + n.F_CustomerEName + ' 联系电话：' + n.F_Telephone + '<div>' +    //n.F_Description
                        '<button type="button" class="btn btn-primary btn-sm" onclick=sendcustomerMsg("' + n.F_CustomerName + '&nbsp;客户电话：' + n.F_Mobile + '&nbsp;' + n.F_CustomerEName + '&nbsp;联系电话：' + n.F_Telephone + '",' + n.F_CustomerId + ')>发送</button> ' +
                        '</div></span></li>').appendTo($('.customer_anwser'));
            });
            // 搜索关键词高亮显示
            GetReplaceKey(data.keys, document.getElementById('customer_anwser').innerHTML, "customer_anwser");
        }
    });
}

//状态
function States(WorkState, IsReturn) {
    var html = '';
    switch (WorkState + '') {
        case '0':
            html = '新工单';
            if (IsReturn == 1) {
                html = '新工单（回退）';
            }
            break;
        case '1':
            html = '待交办';
            break;
        case '2':
            html = '待查收';
            break;
        case '3':
            html = '退回审核中';
            break;
        case '4':
            html = '办理中';
            break;
        case '5':
            html = '延时审核';
            break;
        case '6':
            html = '已办理';
            break;
        case '7':
            html = '已回访';
            break;
        case '8':
            html = '重办中';
            break;
        case '9':
            html = '已结案';
            break;
        case '10':
            html = '待审核';
            break;
        case '11':
            html = '重办待交办';
            break;
            //              case '12':
            //                  html = '待审核';
            //                  break;
        case '13':
            html = '重办驳回';
            break;
    }
    return html;
}

// IM在线客服 - 键盘发送事件
$('.inputkeyword').bind('keypress', function (event) {
    if (event.keyCode == "13") {
        var id = $(this).attr("id");
        if (id == "key_answer")
            $(".Seach_answer").click();
        else if (id == "key_knowledge")
            $(".Seach_knowledge").click();
        else if (id == "key_workorder")
            $(".Seach_workorder").click();
        else
            $(".Seach_customer").click();
    }
})

// 发送 - 快速回复
function sendMsg(msg, id) {
    $.ajax({
        type: "post",
        url: huayi.config.callcenter_url + "ChatMessages/SendReply",
        async: true,
        data: {
            id: id,
            token: $.cookie('token')
        },
        success: function (result) {
            var result = $.parseJSON(result)
            if (result.state == 'success') {
                layer.msg(result.message);
            }
        }
    });
    objs.action = "sersend";
    //  objs.code = $("#" + ele).find(".hidcid").val();
    objs.msg = msg;
    Sends();
}
// 收藏 - 快速恢复
function collection_img(id) {
    $.ajax({
        type: "post",
        url: huayi.config.callcenter_url + "ChatMessages/CollectionReply",
        async: true,
        data: {
            id: id,
            token: $.cookie('token')
        },
        success: function (result) {
            var result = $.parseJSON(result)
            if (result.state == 'success') {
                quick_answer();
                layer.msg(result.message);
            }
        }
    });
}

// 发送 - 快速回复
function sendKnowledgeMsg(msg, id) {
    $.ajax({
        type: "post",
        url: huayi.config.callcenter_url + "ChatMessages/SendKnowledge",
        async: true,
        data: {
            id: id,
            token: $.cookie('token')
        },
        success: function (result) {
            var result = $.parseJSON(result)
            if (result.state == 'success') {
                layer.msg(result.message);
            }
        }
    });
    objs.action = "sersend";
    //  objs.code = $("#" + ele).find(".hidcid").val();
    objs.msg = msg;
    Sends();
}

// 收藏 - 知识库
$('#knowledge_anwser').on('click', "li span div img", function () {
    var collection_act_url = "./img/collection_active.png";
    var collection_url = "./img/collection.png";
    var id = $(this).attr("itemcollection");
    var src = $(this).attr("src");
    var b = false; var reg = "";
    $.ajax({
        type: "post",
        url: huayi.config.callcenter_url + "ChatMessages/CollectionKnowledge",
        async: false,
        data: {
            id: id,
            token: $.cookie('token')
        },
        success: function (result) {
            var result = $.parseJSON(result)
            if (result.state == 'success') {
                //knowledge_answer();   //注释掉原因 - 操作成功后列表刷新闪动厉害
                b = true;
                reg = result.message;
            }
        }
    });
    if(b){
        if (src == collection_act_url) {
            $(this).attr("src", collection_url);
        } else {
            $(this).attr("src", collection_act_url);
        }
        layer.msg(reg);
    }
})

// 发送 - 工单
function sendworkorderMsg(msg, id) {
    $.ajax({
        type: "post",
        url: huayi.config.callcenter_url + "ChatMessages/SendWorkOrder",
        async: true,
        data: {
            id: id,
            token: $.cookie('token')
        },
        success: function (result) {
            var result = $.parseJSON(result)
            if (result.state == 'success') {
                layer.msg(result.message);
            }
        }
    });
    objs.action = "sersend";
    //  objs.code = $("#" + ele).find(".hidcid").val();
    objs.msg = msg;
    Sends();
}

// 发送 - 客户档案
function sendcustomerMsg(msg, id) {
    $.ajax({
        type: "post",
        url: huayi.config.callcenter_url + "ChatMessages/SendCustomer",
        async: true,
        data: {
            id: id,
            token: $.cookie('token')
        },
        success: function (result) {
            var result = $.parseJSON(result)
            if (result.state == 'success') {
                layer.msg(result.message);
            }
        }
    });
    objs.action = "sersend";
    //  objs.code = $("#" + ele).find(".hidcid").val();
    objs.msg = msg;
    Sends();
}

//// 收藏 - 知识库
//function collection_img_knowledge(id) {
//    var ss = $(this).attr("itemcollection");
//    $.ajax({
//        type: "post",
//        url: huayi.config.callcenter_url + "ChatMessages/CollectionKnowledge",
//        async: true,
//        data: {
//            id: id,
//            token: $.cookie('token')
//        },
//        success: function (result) {
//            var result = $.parseJSON(result)
//            if (result.state == 'success') {
//                //knowledge_answer();   //注释掉原因 - 操作成功后列表刷新闪动厉害
//                var collection_act_url = "./img/collection_active.png";
//                var collection_url = "./img/collection.png";
//                if ($(this).attr("src") == collection_act_url) {
//                    $(this).attr("src", collection_url);
//                } else {
//                    $(this).attr("src", collection_act_url);
//                }
//                layer.msg(result.message);
//            }
//        }
//    });
//}

//截取字符串 - IM在线客服
function GetLimitStr(val, len) {
    if (val) {
        // var val = val.replace(/<[^>]+>/g, "");
        var val = RemoveHtml(val);
        if (val.length > len) {
            val = val.substr(0, len) + "...";
        }
        return val;
    } else {
        return '';
    }
}
// 过滤HTML标签以及空格
function RemoveHtml(str) {
    str = str.replace(/<\/?[^>]*>/g, '');       //去除HTML tag
    str = str.replace(/[ | ]*\n/g, '\n');       //去除行尾空白
    str = str.replace(/\n[\s| | ]*\r/g, '\n');  //去除多余空行
    str = str.replace(/(<br[^>]*>| |\s*)/g, '')
    str = str.replace(/ /ig, '');               //去掉空格
    str = str.replace(/(^\s*)|(\s*$)/g, "");    //去掉空格
    str = str.replace(/&nbsp;/ig, "");          //&nbsp;全部替换为空字符串  
    return str;
}
// 批量替换关键词 - 搜索关键词高亮显示
function GetReplaceKey(str, innerHtmlContent, id) {
    if (str.trim()) {
        var arr = str.split(',');
        $.each(arr, function (index, j) {
            var reg = new RegExp(j, 'g')
            innerHtmlContent = innerHtmlContent.replace(reg, `<font color=#c00>${j}</font>`)
        });
        document.getElementById(id).innerHTML = innerHtmlContent
    }
}