使用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叫我將其追加爲div有chart_content

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

一切的ID工作在第一負載，如預期，當我新的實例被調用時，然後再追加個E中的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. 追加的所有數據再次

它使現場？