kefu/public/js/client/client.js

$(function () {
    //Socket.IO 连接
    var socket = io.connect('http://' + document.domain + ':9010', {
        transports: ['websocket', 'polling'],
        autoConnect: false
    });
    var uuid = '';

    function insert_client_html(msg) {
        var time = dateFormat();
        if (msg.time) {
            time = dateFormat("yyyy-MM-dd hh:mm:ss", new Date(msg.time));
        }
        if (!msg.chat_type) {
            msg.chat_type = 'text';
        }
        var tpl = '<div class="msg-box">' +
            '<div  class="msg-client">' +
            '<div  class="date">' + time + ' 我' + '</div>';

        if (msg.chat_type == "text") {
            tpl += '<div class="bubble rich-text-bubble">' +
                '<span class="arrow"></span>' +
                '<div class="text">' + msg.content + '</div>' +
                '<span class="status icon"></span>' +
                '</div>';
        } else if (msg.chat_type == "image") {
            tpl += ' <div class="msg-client-img">' +
                '       <a href="' + msg.image + '"target="_blank">' +
                '           <img src="' + msg.image + '" alt="photo">' +
                '       </a>' +
                '    </div>';
        }

        tpl += '</div>' +
            '</div>';
        $(".msg-container").append(tpl);
    }

    function insert_agent_html(msg) {
        var time = dateFormat();
        if (msg.time) {
            time = dateFormat("yyyy-MM-dd hh:mm:ss", new Date(msg.time));
        }
        if (!msg.chat_type) {
            msg.chat_type = 'text';
        }
        var tpl = '<div class="msg-box">' +
            '<div class="msg-agent">' +
            '<div class="agent-avatar">' +
            '<img src="images/client/kefu.svg">' +
            '</div>' +
            '<div class="date">' + time + ' 客服' + '</div>';

        if (msg.chat_type == "text") {
            tpl += '<div class="bubble rich-text-bubble">' +
                '<span class="arrow-bg"></span>' +
                '<span class="arrow"></span>' +
                '<div class="text"></div>' +
                '</div>';
        } else if (msg.chat_type == "image") {
            tpl += ' <div class="msg-agent-img">' +
                '       <a href="' + msg.image + '"target="_blank">' +
                '           <img src="' + msg.image + '" alt="photo">' +
                '       </a>' +
                '    </div>';
        }
        tpl += '</div>' +
            '</div>';
        $(tpl).appendTo(".msg-container").find('.text').html(msg.content.replace(/\n/g, "<br>"));
    }

    //聊天窗口自动滚到底
    function scrollToBottom() {
        var div = document.getElementById('msg-container');
        div.scrollTop = div.scrollHeight;
    }

    //获取最新的五条数据
    function get_message(uid, callback = null) {
        $.get('/message?uid=' + uid, function (data) {
            if (data.code == 200) {
                data.data.reverse().forEach(function (msg) {
                    if (msg.from_uid == uid) {
                        insert_client_html(msg);
                    } else {
                        insert_agent_html(msg);
                    }
                });
                if (callback) {
                    callback.call();
                }

                scrollToBottom();
            }
        });
    }
    function showLog(message) {
        var log = $('<div class="msg-box log-box" ></div>');
        log.html('<span class="log-content">' + message + '</span>').appendTo('#msg-container');
    }

    function getQuery(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
        var r = window.location.search.substr(1).match(reg);  //匹配目标参数
        if (r != null) return decodeURI(r[2]); return null; //返回参数值
    }
    console.log(
        getQuery('id')
    );
    var gongHao = getQuery('id');
    gongHao = gongHao ? gongHao : 10001;
    var loginSuccess = false;
    $("#btnSend").click(function () {
        var msg = $("#textarea").val().trim();
        if (msg) {
            if (loginSuccess == false) {
                showLog('连接服务器失败,请稍后再试!')
                return false;
            }
            var msg_sender = {
                "type": 'private',
                "uid": gongHao,
                "content": msg.replace(/\r\n/ig,'<br>').replace(/\n/ig,'<br>'),
                "from_uid": uuid,
                "chat_type": 'text'
            };
            socket.emit('message', msg_sender);
            insert_client_html(msg_sender);
            scrollToBottom();
            $("#textarea").val('');
        }
    });

    $(".emoji-list li").click(function () {
        var content = $("#textarea").val();
        $("#textarea").val(content + " " + $(this).html() + " ");
        $(".emoji-list").toggle();
    });

    $(".emoji-send").click(function () {
        $(".emoji-list").toggle();
    });

    //连接服务器
    socket.on('connect', function () {
        //uuid = 'chat'+ guid();
        let uuid_store_key = 'kf_c_uuid';
        uuid = localStorage.getItem(uuid_store_key);
        if (!uuid) {
            uuid = (new Fingerprint()).get();
            localStorage.setItem(uuid_store_key, uuid);//save uuid to ls
        }
        console.log('连接成功...' + uuid);

        var ip = $("#keleyivisitorip").text();
        var msg = {
            "uid": uuid,
            "ip": ip,
            kefu_id: gongHao,
            type: 'customer'
        };
        socket.emit('login', msg);
    });

    socket.on('kefu-logout', function (ret) {
        loginSuccess = false;
        showLog('当前客服不在线,可以给他留言哟')
        document.title = "给客服留言";
        $('#kefu_name').html("给客服留言");
    });

    socket.on('connect-success', function (ret) {
        loginSuccess = true;
        if (ret.status == 1) {
            showLog("客服" + ret.nickname + "正在为您服务!")
            document.title = "客服" + ret.nickname + "正在为您服务!";
            $('#kefu_name').html("客服 <b>" + ret.nickname + "</b> 正在为您服务!");
        } else {
            showLog('当前客服不在线,可以给他留言哟')
            document.title = "给客服留言";
            $('#kefu_name').html("给客服留言");
        }
        // get_message(uuid,()=>{

        // });
    });

    // /* 后端推送来消息时
    //     msg:
    //         type 消息类型 image,text
    //         content 消息
    // */
    socket.on('message', function (msg) {
        insert_agent_html(msg);
        scrollToBottom();
    });
    socket.on('log', function (msg) {
        showLog(msg);
    })

    $.get('/users/kefu', { id: gongHao }, function (data) {
        if (data.code == 200) {
            var data = data.data;
            if (data.description) {
                var log = $('<div class="msg-box" style="background:#eee;border-radius:3px;padding:5px;"></div>');
                log.html(data.description.replace(/\r\n/ig, "<br>")).appendTo('#msg-container');
            }
            socket.connect();// 开始连接到服务器
        } else {
            showLog(data.message);
        }
    }, 'json');

});