聊天气泡按时间分组

Chat bubble grouping by time wise

本文关键字：时间 气泡 聊天      更新时间：2023-09-26

im试图用node.js制作一个聊天应用程序。我想在10秒内将多条消息封装在一个div（气泡）中，比如facebook和gmail聊天。遵循我的代码。

var last_date= Date.now(); 
var cre_div = "<div class='row message'>new</div>";
function addMessage(msg, pseudo, date, self) {

    Date.now = function() { return new Date().getTime(); }
    if(self){
        if( last_date!=null && last_date+10000<Date.now()) {
            var chat =  $("#chatEntries").append('<div class="row message"><p class="infos"><span class="pseudo">'+pseudo+'</span><time class="date" title="'+Date.now()+'">'+Date.now()+'</time></p><p>' + msg + '</p></div>');
            console.log(chat);
                //$("#chatEntries").append(cre_div);
                last_date=Date.now();
            }

        $("#chatEntries").append('<div class="row message self"><p class="infos"><span class="pseudo">'+pseudo+'</span></p><p>' + msg + '</p></div>');
        //$("#chatEntries").append(cre_div);
        last_date=Date.now();
    }
    else {
        $("#chatEntries").append('<div class="row message"><p class="infos"><span class="pseudo">'+pseudo+'</span></p><p>' + msg + '</p></div>');
        //$("#chatEntries").document.createElement('cre_div');
        last_date=Date.now();
    }
    time();
}

尝试一下对我来说有点有趣，我实际上更改了你的代码很多，希望你能明白这个想法，所以你可以使用

Date.now = function () {
    return new Date().getTime();
}
var last_group = {
    me: false,
    time:Date.now()
}
var messages_count = 0;
function addMessage(msg, pseudo, date, me) {
    messages_count++;
    if(messages_count < 1){
        console.log('first message');
        createGroup(msg, pseudo, date, me);
        last_group.me = me;
    } else {
        if(last_group.me == me){
            if(last_group.time + 10000 > Date.now()) {
                 //console.log('adding to last group');                
                 addToGroup(msg, pseudo, date, me);                
            } else {                
                //console.log('creating new group', last_group.me, me);
                createGroup(msg, pseudo, date, me);
            }
        } else {
            //console.log('creating new group', last_group.me, me);
            createGroup(msg, pseudo, date, me);
        }   
    }
}
function addToGroup(msg, pseudo, date, me){
    $("#group-" + last_group.time).append('<div class="row message' + (me ? ' self' : '') + '">' + pseudo + '<p>' + msg + '</p></div>');
}
function createGroup(msg, pseudo, date, me){
    last_group.time = Date.now();
    var html = '<div class="group" id="group-' + last_group.time + '"><div class="row message' + (me ? ' self' : '') + '">' + pseudo + ' - ' + Date.now() + '<p>' + msg + '</p></div></div><br>';
    //console.log(html);
    $("#chatEntries").append(html);            
    last_group.me = me;
}
setInterval(function () {
    addMessage('Hello', 'pseudo', new Date().getTime(), true);
}, 1000);
setInterval(function () {
    addMessage('Hello 2', 'pseudo 2', new Date().getTime(), false);
}, 5000);

jsFiddle此处

相关文章：