使用socket.io和jquery附加新內容

Question

我正在嘗試從數據庫中獲取最新數據，並將其追加到HTML頁面上，我是使用socket.io的新手，不知道是否有更好的方法可以做到這一點。

我在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時，我會將其附加到具有chart_content ID的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的方法，如one ， remove ， load ， html ， replaceWith首先清除div，但它不像我需要的那樣工作。

我在想的是刪除div的當前內容，並使用append其替換為新內容，任何實現此目的的建議，謝謝！

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

1. 創建數據守護者
2. 檢查數據已經存在
3. 如果沒有，那么推
4. 清空您的chat_content
5. 再次追加所有數據

它使場景嗎？