kefu/public/js/server/index.js

//一般直接写在一个js文件中
layui.use(['layer', 'form', 'jquery'], function () {
    var layer = layui.layer
        , form = layui.form
        , $ = layui.jquery;

    var currentUUID = '';
    var uuid = '';
    // 创建socket连接
    var socket = io.connect('http://' + document.domain + ':9010', {
        "transports": ['websocket', 'polling'],
        autoConnect: false
    });
    var uuids = [];
    var online_num = 0;

    //页面初始化函数
    function init() {
        $(".admin-index").addClass("layui-this");

        var height = document.body.clientHeight - 292;
        $(".message-container").css("height", height);

        window.onresize = function () {
            var height = document.body.clientHeight - 292;
            $(".message-container").css("height", height);
        };

        document.getElementById("msg-send-textarea").onkeydown = function (e) {
            if (e.keyCode == 13 && e.ctrlKey) {
                // 这里实现换行
                document.getElementById("msg-send-textarea").value += "\n";
            } else if (e.keyCode == 13) {
                // 避免回车键换行
                e.preventDefault();
                // 下面写你的发送消息的代码
                msg_send();
            }
        };
    }

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

    // 添加新的节点
    function insert_section(uid) {
        var html = '<section class="user-section"  style="display:none;" id="section-' + uid + '"></section>';
        $(".message-container").append(html);
        get_message(uid);
    }

    // 添加管理员消息
    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 html = ' <div class="message-agent">\n' +
            '                <div class="message-agent-time-sender message-time-sender">\n' +
            '                    <span class="message-agent-time">' + time + '</span>\n' +
            '                    <span class="">我</span>\n' +
            '                </div>\n';

        if (msg.chat_type == "text") {
            html += '  <div class="message-agent-content message-content">\n' +
                '        <div>' + msg.content + '</div>\n' +
                '    </div>\n';
        } else if (msg.chat_type == "image") {
            html += ' <div class="msg-agent-img">' +
                '       <a href="' + msg.image + '"target="_blank">' +
                '           <img src="' + msg.image + '" alt="photo">' +
                '       </a>' +
                '    </div>';
        }

        html += '            </div>';
        $('#section-' + msg.uid).append(html);
    }

    // 添加客户端消息
    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 html = '<div class="message-client">\n' +
            '                <div class="message-time-sender">\n' +
            '                    <span class="message-client-time">' + time + '</span>\n' +
            '                    <span class="">客户</span>\n' +
            '                </div>\n';
        if (msg.chat_type == "text") {
            html += '                <div class="message-client-content message-content">\n' +
                '                    <div>' + msg.content + '</div>\n' +
                '                </div>\n';
        } else if (msg.chat_type == "image") {
            html += ' <div class="msg-client-img">' +
                '       <a href="' + msg.image + '"target="_blank">' +
                '           <img src="' + msg.image + '" alt="photo">' +
                '       </a>' +
                '    </div>';
        }

        html += '            </div>';
        $('#section-' + msg.uid).append(html);
    }


    function insert_user_html(id, name) {
        var html = '<div class="user-info layui-row" id="' + id + '">\n' +
            '                <div class="layui-col-xs3 user-avatar">\n' +
            '                    <img src="/images/server/mine_fill_blue.png">\n' +
            '                </div>\n' +
            '                <div class="layui-col-xs8 user-name">' + name + '-' + id + '</div>\n' +
            '                <span class="layui-badge-dot layui-col-xs1 msg-tips"></span>' +
            '            </div>';
        $('.chat-user').append(html);
    }

    //设置消息状态
    function msg_sender_status(status) {
        if (status) {
            $(".btnMsgSend").removeClass("layui-btn-disabled");
            $("#msg-send-textarea").removeAttr("disabled");
            $(".empty-status").hide();
        } else {
            $(".btnMsgSend").addClass("layui-btn-disabled");
            $("#msg-send-textarea").attr("disabled", "disabled");
            $(".empty-status").show();
        }
    }

    //消息提醒
    function msg_notification(msg) {
        $(".chat-user #" + msg.uid + " .msg-tips").show();
        if (window.Notification && Notification.permission !== "denied") {
            Notification.requestPermission(function (status) {
                var n = new Notification('您有新的消息', {body: msg.content});
            });
        }
    }

    //设置 在线状态(人数)
    function update_online_status() {
        var num = uuids.length;
        if (online_num > num) {
            num = online_num;
        }
        $(".friend-head-right").html(online_num + ' / ' + num + ' 人');
    }

    //发送消息
    function msg_send() {
        var msg = $("#msg-send-textarea").val();

        if (msg) {
            var msg_sender = {
                "type": 'private',
                "uid": currentUUID,
                "content": msg,
                "from_uid": uuid,
                "chat_type": 'text'
            };
            socket.emit('message', msg_sender);
            //将发送的消息添加到页面中
            insert_agent_html(msg_sender);
            scrollToBottom();
            $("#msg-send-textarea").val('');
        }
    }

    //获取在线用户
    function get_users() {
        $.get('/users', function (data) {
            if (data.code == 200) {
                $('.chat-user').html('');

                var data = data.data;

                data.forEach(function (user) {
                    insert_user_html(user.uid, user.name + '#' + (uuids.length + 1));
                    //创建聊天section
                    insert_section(user.uid);
                    uuids.push(user.uid);
                });
                if (data.length > 0 && !currentUUID) {
                    currentUUID = data[0].uid;
                }

                $(".user-info").css("background", "#ffffff");
                $("#" + currentUUID).css("background", "#f2f3f5");
                $(".user-section").hide();
                msg_sender_status(true);
                $("#section-" + currentUUID).show();
                update_online_status();
            }
        });
    }

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

                    scrollToBottom();
                });
            }
        });
    }

    //发送消息
    $(".btnMsgSend").click(function () {
        msg_send();
    });

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

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

    //连接服务器
    socket.on('connect', function () {
        console.log('连接成功...');
        uuid = 'chat-admin-' + data.username;
        var ip = $("#keleyivisitorip").html();
        var msg = {
            "uid": uuid,
            "ip": ip,
            type:'kefu'
        };
        socket.emit('login', msg);
    });

    //后端推送来消息时
    socket.on('message', function (msg) {
        insert_client_html(msg);
        scrollToBottom();
        msg_notification(msg);
    });

    //后端推送来消息时,更新用户
    socket.on('update-users', function (msg) {
        if (msg.type == 'offline') {
            //arrayRemove(uuids,msg.uid);
            $(".chat-user #" + msg.uid + " .user-avatar img").attr("src", "/images/server/mine_fill.png");
            $("#section-" + msg.uid).hide();
            //$(".chat-user").find("#"+msg.uid).remove();
            msg_sender_status(false);
        } else if (msg.type == 'online') {
            if (!currentUUID) {
                currentUUID = msg.uid;
            }

            if (currentUUID == uuid) {
                return false;
            }

            var index = uuids.indexOf(msg.uid);
            if (index == -1) {
                uuids.push(msg.uid);
                insert_user_html(msg.uid, msg.name + '#' + (uuids.length + 1));
                //创建聊天section
                insert_section(msg.uid);
            } else {
                if ($(".chat-user").find("#" + msg.uid).length == 0) {
                    insert_user_html(msg.uid, msg.name + '#' + (uuids.length + 1));
                    //创建聊天section
                    insert_section(msg.uid);
                }
            }

            $(".chat-user #" + msg.uid + " .user-avatar img").attr("src", "/images/server/mine_fill_blue.png");
        }
        update_online_status();
    });

    //更新用户在线数
    socket.on('update_online_count', function (msg) {
        online_num = (msg.online_count - 1) >= 0 ? (msg.online_count - 1) : 0;
        update_online_status();
    });

    //切换用户
    $(document).on('click', '.user-info', function () {
        var uid = $(this).attr("id");
        currentUUID = uid;
        $(".user-info").css("background", "#ffffff");
        $("#" + uid).css("background", "#f2f3f5");
        $(".user-section").hide();
        $("#section-" + uid).show();
        msg_sender_status(true);
        $(".chat-user #" + uid + " .msg-tips").hide();
    });

    const showLoginView = () => {
        layer.prompt({
            formType: 0,
            title: '请先输入工号进行登录',
            btnAlign: 'c',
            btn: ['   登录   '],
            closeBtn: 0,
            shade :0.7,
            value: ''
        }, function (username, index, elem) {
            if(!username){
                showLoginView();
                return;
            }
            $.post('/admin/login', {username}, (res) => {
                if (res.code != 200) {
                    layer.msg(res.message);
                    return;
                }
                layer.msg('登录成功');
                layer.closeAll();
                console.log(res);
                location.reload();
            }, 'json').fail(() => {
                layer.msg('登录异常请重试')
            })
        });
    }
    if (!data.username) {
        showLoginView();
    } else {
        socket.connect();
        init();
        get_users();
    }
});