实时聊天室系统设计与实现

[qq_41355963]

       这是一个基于socket.io的聊天室，并对消息单对单处理。以nodejs为后台，使用express和ejs框架，使用mongodb数据库存储用户信息。 尝试实现接收到对自己的消息时自动弹出对话框，并保存未读取的消息在队列中，当打开聊天窗口在显示出来。

项目部署

1：安装nodejs和mongodb

2：npm install

3：启动mongodb数据库

4：node app启动

演示

登录界面：

注册页面：

聊天界面：

发送表情： 

 

具体实现：

监听用户登录：

    var now_chat_list = [];
    $('li').on('dblclick', function() {
        if ($(".chat_box").hasClass('chat_box_new')) {

            $(".chat_header").stop().slideDown(400);
            $("#chat_list").stop().show(400);
            $(".chat_box").removeClass('chat_box_new').addClass('chat_box_old');
            $(".chat_box_old").css({
                "width": "85%",
                "height": "90%",
            });
            $("#biggest>span").css({
                "height": 15 + "px"
            });
        }


        if ($(".chat").stop().hide) {
            $(".chat").stop().show();
        };
        $("#msg").val('');
        var touser = $(this).children('.userlist_name')[0].innerText;
        socket.emit('newRoom', {
            'from': self,
            'to': touser
        })
        $("#touser").html(touser);
        $("#showMsg").html('');

        now_chat_list.push(touser);

        upArr(now_chat_list);

        if (now_chat_list.length > 5) {
            now_chat_list.splice(0, 1);
        };
        // console.log(now_chat_list);
        var msg = '';
        $("#send").on('click', function() {
                msg = $("#msg").val();
                send_msg(msg);

            })
            // 点击后发送图片，隐藏预览
        $("#sendImg").on('click', function() {
            msg = $("#preview").attr("src");
            $("#previewBox").stop().hide();
            send_img(msg);

        })
        $("#msg").on('keydown', function(e) {
            msg = $("#msg").val();
            if (e.keyCode === 13) {
                e.preventDefault();
                send_msg(msg)
            };
        })
    });

 

发送消息：

    function send_msg(msg) {
        if (msg.trim() != '') {
            socket.emit('getMsg', {
                'flag': 'word',
                'from': self,
                'content': msg,
                to: $("#touser").text()
            })
        };
        $("#msg").val('').blur();
    }

 接收消息：

var msgArr = [];
    socket.on('getMsg', function(newObj) {
            // console.log(newObj);
            msgArr.push(newObj);
            var isW, newContent, isme, isto, section,
                contentDiv = '',
                usernameDiv = '';

            for (let i in msgArr) {

                isW = (msgArr[i].flag === 'word') ? true : false;

                newContent = replace_em(msgArr[i].content);
                isme = (msgArr[i].fromName === self) ? true : false;
                isto = (msgArr[i].fromName === $("#touser").text()) ? true : false;
                if (isW) {
                    contentDiv = '<div class="clearfix">' + newContent + '</div>';
                } else {
                    contentDiv = '<div class="clearfix">' + '<img class="check" src="' + newContent + '"/>' + '</div>'
                };
                section = $('<section class="clearfix"></section>');
                if (isme) {
                    usernameDiv = '<span>' + msgArr[i].fromName + '</span>';
                    section.addClass('user');
                    section.html(contentDiv + usernameDiv);
                } else {
                    if (!isto) {
                        if ($(".chat").hide) {
                            $(".chat").show();
                        };
                        $("#touser").html(msgArr[i].fromName);
                        $("#showMsg").html('');
                    };
                    usernameDiv = '<span>' + msgArr[i].fromName + '</span>';
                    section.addClass('service');
                    section.html(usernameDiv + contentDiv);
                };
            }
            $("#showMsg").append(section)
            scrollBottom();
        })

匹配表情：

function replace_em(str) {
        str = str.replace(/\</g, '&lt;');
        str = str.replace(/\>/g, '&gt;');
        str = str.replace(/\n/g, '<br/>');
        str = str.replace(/\[em_([0-9]*)\]/g, '<img src="images/face/$1.gif" border="0" />');
        return str;
    }
    $('#emotion').qqFace({ //表情转换
        'id': 'facebox', //表情盒子的ID
        'assign': 'msg', //给那个控件赋值
        'path': 'images/face/' //表情存放的路径
    });
    $("#msg").blur(function() {
        $("#facebox").css("display", "none");
    })


    $(".back").on('click', function() {
        now_chat_list.pop();
        $("#touser").html(now_chat_list[now_chat_list.length - 1]);
        if (now_chat_list.length == 0) {
            $(".chat").stop().hide();
            $(".chat_header").stop().show(400);
            $("#chat_list").stop().show(400);
        };

    });

 

监听消息收发：

    socket.on('getMsg', function(obj) {
        console.log(obj.flag)
        User.findOne({ name: obj.from }, function(error, from) {
            User.findOne({ name: obj.to }, function(error, to) {
                var newObj = {
                    'content': obj.content,
                    'fromName': obj.from,
                    'flag':obj.flag
                }
                if (userServer.hasOwnProperty(from.userid)) {
                    userServer[from.userid].emit('getMsg', newObj);
                    console.log(obj.from + '说：' + obj.content);
                    // console.log(userServer)
                } else {
                    socket.emit("err", { msg: "对方已经下线或者断开连接" })
                }
                if (to.userid) {
                    if (userServer.hasOwnProperty(to.userid)) {
                        userServer[to.userid].emit('getMsg', newObj);
                        console.log(obj.to + '说：' + obj.content);
                        // console.log(userServer)
                    } else {
                        // console.log(err)

                        socket.emit("err", { msg: "对方已经下线或者断开连接" })
                    }
                };
            })

        })
    })

mogodb查询数据库中的数据：

var mongoose = require('mongoose');
var Schema = mongoose.Schema;
var models = require('./models');

for (var m in models) {
    mongoose.model(m, new Schema(models[m]));
}

module.exports = {
    getModel: function(type) {
        return _getModel(type);
    }
};

var _getModel = function(type) {
    return mongoose.model(type);
};

NP495