使用 socket.io 和 jquery 添加新内容答案

【问题标题】：Appending new content using socket.io and jquery使用 socket.io 和 jquery 添加新内容
【发布时间】：2017-08-14 07:11:57
【问题描述】：

我正在尝试从我的数据库中获取最新数据并将其附加到我的 HTML 页面上

我的server.js 上有以下代码，每次执行新实例时，我都会从我的数据库中选择最新数据并将其发送到我的index.html

socket.on('new instance', function (data) {
    var query = con.query("SELECT * FROM sales_agent WHERE  STR_TO_DATE(hour, '%Y-%m-%d %H:%i')" +
        " > SUBDATE( CURRENT_TIMESTAMP, INTERVAL 2 HOUR) GROUP BY unq",
        function (err, rows, result) {
            if (err) throw err;
            for (var i in rows) {
                io.sockets.emit('active charts', {
                    msg: rows[i].product,
                    date: rows[i].date_added,
                    board: rows[i].type
                });
            }
        });
});

现在在我的 index.html 上，当调用 active charts 时，我会将其附加到 ID 为 chart_content 的 div 中

var $chart = $('#chart_content');
socket.on('active charts', function (data) {
    console.log('Data instance called');
    $chart.append('<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12"><div class="card"><div class="body' +
        ' bg-blue-grey">' + data.msg + '  ' + data.board + ' </div></div> </div>');
});

第一次加载时一切正常，正如预期的那样，当我调用新实例时，它再次在我的div 上附加相同的数据，所以我在div 中有重复的数据我研究了一些 jquery 方法，比如@ 987654331@, remove,load,html,replaceWith 先清除 div 但它不像我需要的那样工作。

我的想法是删除 div 的当前内容并使用 append 将其替换为新内容，任何实现此目的的建议，提前致谢！

【问题讨论】：

标签： jquery socket.io

【解决方案1】：

var $chart = $('#chart_content');
var allData = [];

function checkIn(data) {
    for (var i = 0; i < allData.length; i++) {
        // drop your logic here
        if (allData[i].msg == data.msg || allData[i].board == data.board) return true;
    }
    return false;
}

function showData() {
    $chart.empty();
    allData.forEach(function (data) {
        $chart.append('<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12"><div class="card"><div class="body' +
            ' bg-blue-grey">' + data.msg + '  ' + data.board + ' </div></div> </div>');
    });
}
socket.on('active charts', function (data) {
    console.log('Data instance called');
    if (!checkIn(data)) {
        allData.push(data);
        showData();
    }
});

创建数据管理员
检查数据已经存在
如果没有则推送
清空您的聊天内容
再次追加所有数据

它会制造场景吗？

【讨论】：

谢谢先生，有道理。