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();
    }

})

//聊天右侧列表开始
//弹屏右侧切换效果
$(".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");

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

//获取快速回复
quick_answer();
//知识库列表
knowledge_answer();
//快速回复搜索
$('.Seach_answer').on('click',function(){
	quick_answer();
	if($('#key_answer').val().trim()){
		var content=document.getElementById('quick_answer').innerHTML;
		var keywords=document.getElementById('key_answer').value;
		var reg=new RegExp(keywords,'g')
		var newStr=content.replace(reg,`<font color=#FF6633>${keywords}</font>`)
		document.getElementById('quick_answer').innerHTML=newStr
	}
})
//知识库搜索
$('.Seach_knowledge').on('click',function(){
	knowledge_answer();
	if($('#key_knowledge').val().trim()){
		var content1=document.getElementById('knowledge_anwser').innerHTML;
		var keywords1=document.getElementById('key_knowledge').value;
		console.log(keywords1)
		var reg1=new RegExp(keywords1,'g')
		console.log(reg1)
		var newStr1=content1.replace(reg1,`<font color=#FF6633>${keywords1}</font>`)
		console.log(newStr1);
		document.getElementById('knowledge_anwser').innerHTML=newStr1
	}
})
//快速回复
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(),
				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 + '">' + n.F_ReplyContent + '</span>' +
                                '<button type="button" class="btn btn-primary btn-sm" onclick=sendMsg("' + n.F_ReplyContent + '",' + n.F_Id + ')>发送</button> ' +
                                '<span class="collection"><img onclick="collection_img(' + n.F_Id + ')" src="' + collection_imgurl + '"/></span>' +
                            '</li>').appendTo($('.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(),
				token: $.cookie("token")
			},
			success: function(data) {
				$.each(data.rows, function(i,n) {
					var contant=n.F_Content.replace(/<[^>]+>/g,"");
					if(contant.length>30){
						contants = contant.substr(0, 30) + "...";	
					}
					$('<div class="tel_title">' + n.F_Title + '</div><li class="chat_item">' +
                                '<span title="' + n.F_Description + '">' + contants + '</span>' +
                                '<button type="button" class="btn btn-primary btn-sm" onclick=sendMsg("' + contant + '",' + n.F_Id + ')>发送</button> <span class="collection"><img onclick="collection_img(' + n.F_CategoryId + ')" src="./img/collection.png"/></span>' +
                            '</li>').appendTo($('.knowledge_anwser'));
				});
			}
		});
        	
}
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);
            }
        }
    });
}