节点和套接字聊天应用程序 - 仅显示 25 条最近的消息

Question

我正在制作一个聊天应用程序，现在，当您打开该应用程序时，页面会运行 SQL 查询并通过isactive = 1 检查提取最后 25 条消息。当用户发布消息时，我使用 Socket.io 和 Node.js 将消息回显给其他用户并将其附加到聊天屏幕。它也会同时提交到数据库，因此新用户将看到该消息。这是我现在用来附加消息的代码（稍后会设置样式）

socket.on( 'message', function( data ) {
    console.log("saw a request to the socket");
    var actualContent = $( "#messages" ).html();
    var newMsgContent = '<li> NAME: ' + data.name + ' = ID: ' + data.id + ' = AVATAR: ' + data.avatar + ' = MESSAGE: ' + data.message + '</li>';
    var content = newMsgContent + actualContent;
    $( "#messages" ).html( content );
});

由于我只是附加消息，它没有不重新加载就删除消息的功能，并且随着聊天消息的发布，它还会继续永远发布到您的屏幕上，这将导致大量滚动窗口和使用在页面上。

有没有办法限制它只显示 25 条最新消息？或者我应该不让系统附加消息，而是使用数据库中的最新数据重新加载内容 div？我看到的缺点是它会创建更多的数据库调用并阻塞 SQL 服务器。有什么更好的方式来传达这些事件？

我是 Socket 和 Node 的新手，到目前为止我很喜欢它。我以前的聊天引擎使用纯 JS，每 4 秒检查一次内容，如果有变化，它会重新加载整个 div。这会导致消息延迟并且感觉非常笨拙，所以我喜欢 Node 支持的速度。提前致谢！

Answer 1

在插入元素时使用slice：

socket.on( 'message', function( data ) {
    console.log("saw a request to the socket");
    var actualContent = $( "#messages" ).html();
    var newMsgContent = '<li> NAME: ' + data.name + ' = ID: ' + data.id + ' = AVATAR: ' + data.avatar + ' = MESSAGE: ' + data.message + '</li>';
    var content = newMsgContent + actualContent;
    content = $(content).slice(0, 25).map(function(i, x) { return x.outerHTML }).toArray().join(''); // Will return first 25 messages
    $( "#messages" ).html( content );
});