使用socket.io和jquery追加新内容

我正在尝试从我的数据库中获取最新数据，并将其附加到我的HTML页面上。我对使用socket.io有点陌生，不知道是否有更好的方法

我在server.js上有下面的代码，每次执行一个新实例时，我都会从数据库中选择最新的数据，并在index.html上发出它

现在在我的index.html上，当调用活动图表时，我将把它附加到一个id为chart\u content的div中

一切都在第一次加载时工作，正如调用我的新实例时所预期的那样，它会再次在我的div上附加相同的数据，因此我在一个div中有重复的数据。我已经研究了一些jquery方法，如one、remove、load、html、replaceWith，以首先清除div，但它不像我需要的那样工作

我的想法是删除一个div的当前内容，并使用append将其替换为一个新的内容，任何实现这一点的建议，提前感谢

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();
    }
});

创建数据保管器 检查数据已存在 如果没有，就推 清空聊天内容 再次追加所有数据

---

这很有意思吗？

谢谢，先生，这很有意义。

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>');
});

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();
    }
});