Wie erhalte ich den Fortschrittsstatus in der Spalte "Status" einer mit socket.io @ datierbaren Date
Ich kann eine Verbindung zum Socket herstellen und die Daten abrufen. Aber ich kann den Prozentsatz nicht in der Statusspalte anzeigen.
Ich erhalte folgenden Fehler: DataTables-Warnung: table id = DataTables_Table_0 - Angeforderter unbekannter Parameter 'null' für Zeile 0. Weitere Informationen zu diesem Fehler finden Sie unterhttp: //datatables.net/tn/.
So beheben Sie dieses Problem ...
Backend-Code:
io.of('/socket_issue').on('connection', function (socket) {
console.log("Socket connected :"+socket.id);
});
var callback = function(state){
console.log('received size in bytes', state.received);
console.log('total size in bytes', state.total);
console.log('percent', state.percent);
io.of('/socket_issue').emit('message', JSON.stringify({size: state.total, received: state.received, percent: state.percent, fileName: file_name}));
}
progress(request('https://nodejs.org/dist/v0.12.7/node-v0.12.7.tar.gz'), {
throttle:0,
delay: 0
})
.on('progress', callback)
.pipe(fs.createWriteStream(DOWNLOAD_DIR + file_name))
.on('error', function (err) {
console.log("error");
})
.on('close', function (err){
console.log("Download Complete");
})
Mein Code in template.html:
{
"sTitle": "Status",
align: 'Center',
"mData": null,
"bSortable": false,
"sClass": "head1",
"sWidth": "55px",
"render": socket.on( 'message', function (data, type, row, meta) {
console.log(data);//Here I'm able to get socket data
var percentage = JSON.parse(data).percent;
if (data.IsDirectory) {
return percentage;
}else{
return percentage;
}
})
}
]
};
socket.on('disconnect', function(){})
Meine template.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>File Browser</title>
<link rel="stylesheet" href="/lib/bootstrap.min.css">
<link rel="stylesheet" href="/lib/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="/lib/app.css">
</head>
<body>
<div id="panelDiv">
<div class="panel-heading">
<button type="button" id="butDiv" >Browse</button>
<input type="text" name="location" size="35"/>
<span class="up">
<i class="fa fa-level-up"></i> Up
</span>
</div>
<div id="showDiv" class="panel-body">
<table class="linksholder">
</table>
</div>
</div>
<script src="/lib/jquery.min.js"></script>
<script src="/lib/bootstrap.min.js"></script>
<script src="/lib/datatable/js/jquery.datatables.min.js"></script>
<script src="/lib/socket.js"></script>
<script>
var extensionsMap = {
".zip" : "fa-file-archive-o",
".gz" : "fa-file-archive-o",
".bz2" : "fa-file-archive-o",
".xz" : "fa-file-archive-o",
".rar" : "fa-file-archive-o",
".tar" : "fa-file-archive-o",
".tgz" : "fa-file-archive-o",
".tbz2" : "fa-file-archive-o",
".z" : "fa-file-archive-o",
".7z" : "fa-file-archive-o",
".mp3" : "fa-file-audio-o",
".cs" : "fa-file-code-o",
".c++" : "fa-file-code-o",
".cpp" : "fa-file-code-o",
".js" : "fa-file-code-o",
".xls" : "fa-file-excel-o",
".xlsx" : "fa-file-excel-o",
".png" : "fa-file-image-o",
".jpg" : "fa-file-image-o",
".jpeg" : "fa-file-image-o",
".gif" : "fa-file-image-o",
".mpeg" : "fa-file-movie-o",
".pdf" : "fa-file-pdf-o",
".ppt" : "fa-file-powerpoint-o",
".pptx" : "fa-file-powerpoint-o",
".txt" : "fa-file-text-o",
".log" : "fa-file-text-o",
".doc" : "fa-file-word-o",
".docx" : "fa-file-word-o",
};
$(document).ready(function(){
$("#showDiv").hide();
});
$("#butDiv").click(function(){
$("#showDiv").show();
});
function getFileIcon(ext) {
return ( ext && extensionsMap[ext.toLowerCase()]) || 'fa-file-o';
}
var socket = io('http://localhost:8089/socket_issue');
socket.on('connect', function(){ console.log('connected to socket'); });
socket.on('error', function(e){ console.log('error' + e); });
var currentPath = null;
var options = {
"bProcessing": true,
"bServerSide": false,
"bPaginate": false,
"bAutoWidth": false,
"sScrollY":"250px",
"fnCreatedRow" : function( nRow, aData, iDataIndex ) {
if (!aData.IsDirectory) return;
var path = aData.Path;
$(nRow).bind("click", function(e){
$.get('/files?path='+ path).then(function(data){
table.fnClearTable();
table.fnAddData(data);
currentPath = path;
});
$.get('/directory?path='+ path).then(function(data){
$("input[name='location']").val(data.directory);
});
e.preventDefault();
});
},
"aoColumns": [{"sTitle":"File Name", "mData": null, "bSortable": false, "sClass": "head0", "sWidth": "55px",
"render": function (data, type, row, meta) {
if (data.IsDirectory) {
return "<a href='#' target='_blank'><i class='fa fa-folder'></i> " + data.Name +"</a>";
} else {
return "<a href='/" + data.Path + "' target='_balnk'><i class='fa " + getFileIcon(data.Ext) + "'></i> " + data.Name +"</a>";
}
}
},
{"sTitle":"Date",align: 'Center', "mData": null, "bSortable": false, "sClass": "head1", "sWidth": "55px",
"render": function (data, type, row, meta) {
if (data.IsDirectory) {
return data.Date;
}else{
return data.Date;
}
}
},
{"sTitle":"Status",align: 'Center', "mData": null, "bSortable": false, "sClass": "head1", "sWidth": "55px",
"render":socket.on( 'message', function (data, type, row, meta) {
console.log(data);
if (data.IsDirectory) {
return "";
}else{
return "";
}
})
}
]
};
socket.on('disconnect', function(){})
var table = $(".linksholder").dataTable(options);
$.get('/files').then(function(data){
table.fnClearTable();
table.fnAddData(data);
});
$.get('/directory').then(function(data){
$("input[name='location']").val(data.directory);
$("#showDiv").hide();
});
$(".up").bind("click", function(e){
if (!currentPath) return;
var idx = currentPath.lastIndexOf("/");
var path =currentPath.substr(0, idx);
$.get('/files?path='+ path).then(function(data){
table.fnClearTable();
table.fnAddData(data);
currentPath = path;
});
$.get('/directory?path='+path).then(function(data){
$("input[name='location']").val(data.directory);
});
});
</script>
</body>
</html>
Mein Screenshot:
