【JQuery】简易聊天室应用

虽然我是一名实打实的产品喵，但是为了能够和程序猿们愉快地沟通（让撕逼再和谐一点），我自学了一些代码知识，写了一些不入流不靠谱不成熟的“三不”应用，随便扔在这里分享一下。

简介

这款聊天室应用和我之前写过的弹幕APP一样，都用到了wilddog野狗通讯云，实现了即时通讯功能。

截图

愉快地撕逼中...

代码

$(document).ready(function () {
    //创建通讯实体
    var configSync = {
        authDomain: "alen-easy-chat-room.wilddog.com",
        syncURL: "https://alen-easy-chat-room.wilddogio.com"
    };
    wilddog.initializeApp(configSync);
    var msgs = wilddog.sync().ref("/msg");
    var dws = wilddog.sync().ref("/dirtywords");
    //定义DOM变量
    var inputForm = $("form");
    var inputBtn = $("#input-send");
    var html;
    var chatBox = $(".chat-room-content");
    var chatContainer = $(".mCSB_container");
    var blackScreen = $(".blackScreen");
    var formUsername = $(".form-username");
    var okay = $(".okay");
    var hintBlackScreen = $(".hintBlackScreen");
    var dirtyMsg = $(".dirty-word-reply");
    //获取用户昵称
    function getUsername() {
        blackScreen.fadeOut("slow");
        var inputUsername = $("#input-username").val();
        if (inputUsername.length === 0) {
            return "这个人藏得很深";
        } else {
            return $("#input-username").val();
        }
    }
    
    //绑定点击及回车
    okay.click(getUsername);
    formUsername.keypress(function (event) {
        if (event.keyCode === 13) {
            event.preventDefault();
            okay.trigger("click");
        }
        event.stopImmediatePropagation();
    });
    //获取时间
    function getTime() {
        var mydate = new Date();
        var year = mydate.getFullYear();
        var month = mydate.getMonth() + 1;
        var day = mydate.getDate();
        var hour = mydate.getHours();
        var minute = mydate.getMinutes();
        var second = mydate.getSeconds();
        //standardize time
        function stdTime(s) {
            if (s < 10) {
                return "0" + s;
            } else {
                return s;
            }
        };
        return year + "/" + stdTime(month) + "/" + stdTime(day) + " " + stdTime(hour) + ":" + stdTime(minute) + ":" + stdTime(second);
    }
    //脏话判断及回复
    dws.on("value", function (data) {
        //get dirty word data
        var dirtyWords = data.val().dirtyWords;
        var dirtyWordsReply = data.val().dirtyWordsReply;
        //dirty words validation
        function getMsg(x) {
            for (var i = 0; i < dirtyWords.length; i++) {
                if (x.includes(dirtyWords[i])) {
                    dirtyMsg.html(dirtyWordsReply[i]);
                    hintBlackScreen.fadeIn("slow").delay(800).fadeOut("slow");
                    return;
                }
            }
            return x;
        }
        //点击发送消息至通讯云
        inputBtn.click(function () {
            var inputMsg = $("#input-value").val();
            //push msg to database
            msgs.push({
                "name": getUsername(),
                "time": getTime(),
                "msg": getMsg(inputMsg)
            });
            $("#input-value").val("");
        });
        //回车发送消息至通讯云
        inputForm.keypress(function (event) {
            if (event.keyCode === 13) {
                event.preventDefault();
                inputBtn.trigger("click");
            }
        });
        //实时监听通讯云
        msgs.on("child_added", function (data) {
            var msg = data.val();
            html = '<div class="media single-content">';
            html += '<div class="media-left media-top">';
            html += '<span class="glyphicon glyphicon-user user-icon" aria-hidden="true"></span>';
            html += '</div>';
            html += '<div class="media-body">';
            html += '<div>';
            html += '<span class="media-heading user-name">' + msg.name + '</span>';
            html += '<span class="time pull-right">' + msg.time + '</span>';
            html += '</div>';
            html += '<span class="user-content">' + msg.msg + '</span>';
            html += '</div>';
            html += '</div>';
            chatContainer.append(html);
            chatBox.mCustomScrollbar("update");
            chatBox.mCustomScrollbar("scrollTo", "bottom");
        });
    });
});

相关

想看源代码的童鞋可以来CODING.NET获取，也可以直接去DEMO体验一下。

---

THE END.