IM12345_Web/WebSite/js/chat.js

var uid = localStorage.getItem("uid");
var ws, obj = {},
lockReconnect = false;
CreateWebSocket();
$(".send_content").focus();

function CreateWebSocket() {
    try {
        Connect();
    } catch (e) {
        ReConnect();
    }
}
//连接
function Connect() {
    //ws = new WebSocket("ws://192.168.4.18:4006");
    ws = new WebSocket("ws://192.168.8.10:2022");
    //ws = new WebSocket("ws://117.158.196.116:4006");

    ws.onopen = function () {
        console.log(new Date() + "    " + "建立连接");
        lockReconnect = false;
        obj.action = "cusconn";
        obj.code = uid;
        Send();
    };
    //接收到消息的回调方法
    ws.onmessage = function (evt) {
        console.log(new Date() + "  receive  " + evt.data);
        var data = JSON.parse(evt.data);
        if (data) {
            var type = data.action;
            switch (type.toLowerCase()) {
                case "cusconn":
                    // $(".main_message .chatlist_con").find("li").remove();
                    if (data.state) {
                        localStorage.setItem("uid", data.code);
                    } else {
                        // $('.notice').html('');
                        notice("notice", data.msg);
                    }
                    if (data.code) {
                        obj.action = "loglist";
                        obj.code = data.code;
                        obj.msg = "";
                        Send();
                    }
                    break;
                    //case "servicerson":
                    //    append("notice", data.msg);
                    //    break; //通知客服上线
                case "cussend":
                    if (data.state) {
                        append("self", data.msg, data.time, data.humanclass);
                        // document.getElementById("msg").value = "";
                        $('.send_content').val('');
                    } else {
                        notice("notice", data.msg);
                        // $('.notice').html(data.msg);
                    }
                    break
                case "cusreceive":
                    append("left", data.msg, data.time, data.humanclass)
                    break; //收到消息
                case "loglist":
                    var list = data.data.rows;
                    $(list).each(function (i, n) {
                        var classname = "left";
                        if (n.F_FromUser == uid) {
                            classname = "self";
                        }
                        insert(classname, n.F_Message, $(".hidnum").val(), n.F_HumanClass);
                    })
                    if (!data.data.isfirst) {
                        $(".more").css("display", "block");
                        $(".hidnum").val(data.data.num);
                    } else {
                        $(".more").css("display", "none");
                    }
                    break; //聊天记录
            }
        }
    };
    //连接关闭的回调方法
    ws.onclose = function (evt) {
        console.log(new Date() + "    " + "连接关闭");
        console.log(new Date() + "    " + "开始重连");
        ReConnect();
    };
    //连接发生错误的回调方法
    ws.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;
            CreateWebSocket();
        }, 2000);
    }
}

//发送
function Send() {
    if (ws.readyState != ws.OPEN) {
        ReConnect();
    }
    if (ws.readyState == ws.OPEN) {
        console.log(new Date() + "  send  " + JSON.stringify(obj));
        ws.send(JSON.stringify(obj));
    }
}
//查看更多
function getmore() {
    obj.action = "loglist";
    obj.code = localStorage.getItem("uid");
    obj.msg = $(".hidnum").val();
    Send();
}
//发送消息
function sendinfo() {
    //      var msg = document.getElementById("msg").value;
    var msg = $('.send_content').val();
    if ($.trim(msg)) {
        obj.action = "cussend";
        obj.msg = msg;
        Send();
        $(".error").text("");
    } else {
        $('.send_content').val('');
        $(".error").text("请输入内容");
    }
}

function append(cname, msg, 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 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>'
    $(html).appendTo($(".chatlist_con")[0]);
    console.log($(".chatlist_con")[0].scrollHeight);
    $(".chatlist_con").scrollTop($(".chatlist_con")[0].scrollHeight);
}
function insert(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 = $(".chatlist_con").find("li");
    if (list.length) {
        $(html).insertBefore(list[0]);
    }
    else {
        $(html).appendTo($(".chatlist_con")[0]);
    }
    if (!nodown) {
        $(".chatlist_con").scrollTop($(".chatlist_con")[0].scrollHeight);
    }
}

//键盘发送事件
$(document).keydown(function (event) {
    event = event || window.event;
    if ($(".send_content").is(":focus") == true) {
        if (event.keyCode == 13) {
            $(".sendTo").click();
            event.returnValue = false;
            return false
        }
    }
});
function notice(cname, msg) {
    var html = '<li><span class="' + cname + '">' + msg + '</span></li>';
    $(html).appendTo($(".chatlist_con")[0]);

    $(".chatlist_con").scrollTop($(".chatlist_con")[0].scrollHeight);
}

//智能回复 - 动作 start
// 创建工单
$(".chatlist_con").on('click', "li .message_mincon .message_text #btnaddworkorder", function () {
    var width_active = 460;
    //$("#chat").width(width_active);
    if ($(".chat_main").width() == width_active) {
        $(".chat_main").width(782);
        $(".chat_rightcontent").css('display', 'none');
    } else {
        $(".chat_main").width(width_active);
        $(".chat_rightcontent").css('display', 'block');
    }
});

//信息分类
LB($("#xxlb"));
//主题关键词
ZT($("#keys"));
//事件区域
QY($('#sourcearea'), 0);
$('#sourcearea').change(function () {
    QY($('#town'), $(this).val())
})
$('#town').change(function () {
    QY($('#village'), $(this).val())
})

//上传附件
$("#scwj").click(function () {
    $("#upFile").trigger("click");
})
$("#upFile").change(function () {
    upload();
})
// 创建工单
$("#SavedSubmit").click(function () {
    var myreg = /^[0-9]*$/;
    var myregs = /^[0-9]*$/
    var reg = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
    var cusname = $('#cusname').val(); //姓名
    var cussex = $("input[name='sex']:checked").val(); //性别
    var touSuphone = $('#touSuphone').val(); //投诉电话
    var cusphone = $("#conphone").val(); //投诉人电话
    var title = $('#title').val(); //主题
    var content = $('#content').val(); //内容
    var email = $("#email").val();
    var zipcode = $("#zipcode").val();
    var sourcearea = $("#sourcearea").val(); //=事发地域id
    var sourceaddress = $('#sourceaddress').val(); //=事发详细地址
    var type = $('#xxlb').val(); //信息类别ID
    var keys = $('#keys').val(); //主题词
    var isprotect = $("input[name='secret']:checked").val(); //(0保密1公开)
    if (!$.trim(cusname)) {
        layer.confirm('请输入姓名！', {
            btn: ['确定']
        });
        return;
    }
    if (!$.trim(cusphone)) {
        layer.confirm('请输入联系电话！', {
            btn: ['确定']
        });
        return;
    }
    if (!myreg.test($.trim(cusphone))) {
        layer.confirm('联系电话格式不正确！', {
            btn: ['确定']
        });
        return;
    }
    if (email) {
        if (!reg.test($.trim(email))) {
            layer.confirm('邮箱格式不正确！', {
                btn: ['确定']
            });
            return;
        }
    }
    if (zipcode) {
        if (!/^[0-9][0-9]{5}$/.test($.trim(zipcode))) {
            layer.confirm('邮编格式不正确！', {
                btn: ['确定']
            });
            return;
        }
    }
    if (!$.trim(touSuphone)) {
        layer.confirm('请输入投诉电话！', {
            btn: ['确定']
        });
        return;
    }
    if (!/^[0-9]*$/.test($.trim(touSuphone))) {
        layer.confirm('投诉电话格式不正确！', {
            btn: ['确定']
        });
        return;
    }
    if (!$.trim(title)) {
        layer.confirm('请输入主题！', {
            btn: ['确定']
        });
        return;
    }
    if (!type) {
        layer.confirm('请选择信息类别！', {
            btn: ['确定']
        });
        return;
    }
    if (!$.trim(content)) {
        layer.confirm('请输入内容！', {
            btn: ['确定']
        });
        return;
    }
    if (!keys) {
        layer.confirm('请选择主题词！', {
            btn: ['确定']
        });
        return;
    }
    if (!$.trim(sourceaddress)) {
        layer.confirm('请输入详细地址！', {
            btn: ['确定']
        });
        return;
    }

    $.ajax({
        type: "post",
        url: huayi.config.callcenter_url + 'web/AddWebWorkOrder',
        async: true,
        dataType: 'json',
        data: {
            cusname: cusname,
            cussex: cussex,
            conphone: touSuphone,
            //投诉电话
            cusphone: cusphone,
            //=投诉人电话
            //cusaddress: cusaddress,
            sourcearea: sourcearea,
            sourceaddress: $('#town').find("option:selected").text() + " " + $('#village').find("option:selected").text() + " " + $('#sourceaddress').val(),
            zipcode: zipcode,
            email: email,
            title: title,
            content: content,
            //isfile:isfile,
            //filename:filename,
            files: $("#file").val(),
            keys: keys,
            type: type,
            source: 4,
            issubmit: 1,
            //=（0保存1保存并提交）
            isprotect: isprotect
        },
        success: function (result) {
            if (result.state.toLowerCase() == "success") {
                var msg = '受理编号：' + result.data.workorderid + '&nbsp;查询密码：' + result.data.password + ',如需要查询请进网络查询'
                if ($.trim(msg)) {
                    obj.action = "cusreceive";  //cussend
                    obj.msg = msg;
                    Send();
                    layer.msg('网上受理，提交成功');
                }
                Clean();
            }
        }
    });
});

//信息类别
function LB(obj) {
    obj.empty();
    $.ajax({
        type: "get",
        url: huayi.config.callcenter_url + "web/GetWebTypeList",
        async: true,
        dataType: 'json',
        success: function (data) {
            if (data.state.toLowerCase() == "success") {
                var content = data.data;
                $(content).each(function (i, n) {
                    $("<option value='" + n.F_ValueId + "'>" + n.F_Value + "</option>").appendTo(obj);
                })
            }
        }
    });

}
//主题词
function ZT(obj) {
    obj.empty();
    //obj.append('<option selected="selected" value="">请选择</option>');
    $.ajax({
        type: "get",
        url: huayi.config.callcenter_url + "web/GetWebKeyList",
        async: true,
        dataType: 'json',
        success: function (data) {
            if (data.state.toLowerCase() == "success") {
                var content = data.data;
                $(content).each(function (i, n) {
                    $("<option value='" + n.F_ValueId + "'>" + n.F_Value + "</option>").appendTo(obj);
                })
            }
        }
    });
}
function QY(obj, aid) {
    obj.empty();
    //obj.append('<option selected="selected" value="">请选择</option>');
    $.ajax({
        type: "get",
        url: huayi.config.callcenter_url + "Web/GetWebAreaListById",
        async: true,
        dataType: 'json',
        data: {
            id: aid,
        },
        success: function (data) {
            if (data.state.toLowerCase() == "success") {
                var content = data.data;
                $(content).each(function (i, n) {
                    $("<option value='" + n.F_AreaId + "'>" + n.F_AreaName + "</option>").appendTo(obj);
                })
                obj.trigger('change')
            }

        }
    });
}
//清除事件
function Clean() {
    $('#cusname').val(''); //姓名
    $('#conphone').val(''); //联系电话
    $('#touSuphone').val(''); //投诉电话
    $('#zipcode').val(''); //邮编
    $('#email').val(''); //邮箱
    $('#title').val(''); //内容主题
    $('#content').val(''); //详细内容
    $('#sourceaddress').val(''); //事件详细地址
    $('#xxlb').val(''); //形式分类id
}
//上传文件
function upload() {
    var Files = document.getElementById("upFile").files;

    if (Files.length > 0) {
        var formData = new FormData();
        for (var i = 0; i < Files.length; i++) {
            formData.append('file' + i, Files[i]);
        }
        var typeName = Files[0].name.split('.')[1];
        if (typeName == "png" || typeName == 'jpg' || typeName == 'mp4' || typeName == 'mp3' || typeName == 'pdf' || typeName == 'doc' || typeName == 'docx' || typeName == 'xls' || typeName == 'xlsx') {
            $.ajax({
                url: huayi.config.callcenter_url + "Web/UploadFile",
                type: "POST",
                data: formData,
                /**
				 *必须false才会自动加上正确的Content-Type
				 */
                contentType: false,
                /**
				 * 必须false才会避开jQuery对 formdata 的默认处理
				 * XMLHttpRequest会对 formdata 进行正确的处理
				 */
                processData: false,
                success: function (result) {
                    document.getElementById("upFile").outerHTML = document.getElementById("upFile").outerHTML;
                    $("#upFile").change(function () {
                        upload();
                    });
                    var r = $.parseJSON(result);
                    if (r.state.toLowerCase() == "success") {
                        var a = r.data;
                        $(a).each(function (i, n) {
                            var strs = '<span class="files" fiel-num="' + n.F_FileId + '">' + n.F_FileName + '<i class="fa del_file">X</i></span>'
                            $(strs).appendTo($('.fileBox')).find('.del_file').click(function (event) {
                                event.stopPropagation();
                                $(this).parent().remove();
                                file_num();
                            })

                        })
                        file_num();
                    }
                }
            });
        } else {
            layer.msg("格式不正确");
        }
    } else {
        layer.confirm('请上传文件！', {
            btn: ['确定']
        });
    }
}
//智能回复 - 动作 end