如何使用 socket.io 在数据表的 "status" 列中获取进度状态
How to get the progress status in the "status" column of a datatable using socket.io
我可以连接到套接字并获取数据。但是我无法在状态栏中显示百分比。
我收到此错误：DataTables 警告：table id=DataTables_Table_0 - 为第 0 行请求了未知参数 'null'。有关此错误的详细信息，请参阅 http://datatables.net/tn/4.
如何解决这个问题...
后端代码：
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");
})
我的代码在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(){})
我的 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>
我的截图：
一起来看看here:
Each cell in DataTables requests data, and when DataTables tries to obtain data for a cell and is unable to do so, it will trigger a warning, telling you that data is not available where it was expected to be. The warning message is:
DataTables warning: table id={id} - Requested unknown parameter
'{parameter}' for row `{row-index}, column{column-index}`` where:
{id} is replaced with the DOM id of the table that has triggered the
error {parameter} is the name of the data parameter DataTables is
requesting {row-index} is the DataTables internal row index
(row().index()) for the row that has triggered the error.
{column-index} is the column data index (column().index()) for the
column that has triggered the error. The column index information was
added in DataTables 1.10.10. So to break it down, DataTables has
requested data for a given row, of the {parameter} provided and there
is no data there, or it is null or undefined (DataTables doesn't know,
by default how to display these parameters - see below if your data
does contain these values).
您收到此警报，因为您在构建数据库时将 null 值设置为 mData 属性。 Here描述了当null设置为值时会发生什么：
null - the sDefaultContent option will be used for the cell (null by default, so you will need to specify the default content you want - typically an empty string). This can be useful on generated columns such as edit / delete action columns.
因此，要消除此警报，您应该设置 sDefaultContent 属性:
aoColumns": [
{
"sTitle":"File Name",
"mData": null,
sDefaultContent: '',
"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>";
}
}
},
请记住，每一列都应该这样做。
PS:
如果您使用 .emit() 方法发送数据，您应该传递一个对象作为参数。但是，在提供的代码中，您传递的是 json 字符串。如果要通过套接字发送字符串，请使用 .send() 方法：
io.of('/socket_issue').send('message', JSON.stringify({size: state.total, received: state.received, percent: state.percent, fileName: file_name}));
但我建议您传递一个对象：
io.of('/socket_issue').emit('message', {size: state.total, received: state.received, percent: state.percent, fileName: file_name});
在这种情况下，你不应该在前面使用 JSON.parse(data)，因为它不再是一个字符串。变化：
var percentage = JSON.parse(data).percent;
收件人：
var percentage = data.percent;
我可以连接到套接字并获取数据。但是我无法在状态栏中显示百分比。
我收到此错误：DataTables 警告：table id=DataTables_Table_0 - 为第 0 行请求了未知参数 'null'。有关此错误的详细信息，请参阅 http://datatables.net/tn/4.
如何解决这个问题...
后端代码：
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");
})
我的代码在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(){})
我的 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>
我的截图：
一起来看看here:
Each cell in DataTables requests data, and when DataTables tries to obtain data for a cell and is unable to do so, it will trigger a warning, telling you that data is not available where it was expected to be. The warning message is:
DataTables warning:
table id={id}- Requested unknown parameter '{parameter}' for row `{row-index}, column{column-index}`` where:
{id}is replaced with the DOM id of the table that has triggered the error{parameter}is the name of the data parameter DataTables is requesting{row-index}is the DataTables internal row index (row().index()) for the row that has triggered the error.{column-index}is the column data index (column().index()) for the column that has triggered the error. The column index information was added in DataTables 1.10.10. So to break it down, DataTables has requested data for a given row, of the{parameter}provided and there is no data there, or it is null or undefined (DataTables doesn't know, by default how to display these parameters - see below if your data does contain these values).
您收到此警报，因为您在构建数据库时将 null 值设置为 mData 属性。 Here描述了当null设置为值时会发生什么：
null - the sDefaultContent option will be used for the cell (null by default, so you will need to specify the default content you want - typically an empty string). This can be useful on generated columns such as edit / delete action columns.
因此，要消除此警报，您应该设置 sDefaultContent 属性:
aoColumns": [
{
"sTitle":"File Name",
"mData": null,
sDefaultContent: '',
"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>";
}
}
},
请记住，每一列都应该这样做。
PS:
如果您使用 .emit() 方法发送数据，您应该传递一个对象作为参数。但是，在提供的代码中，您传递的是 json 字符串。如果要通过套接字发送字符串，请使用 .send() 方法：
io.of('/socket_issue').send('message', JSON.stringify({size: state.total, received: state.received, percent: state.percent, fileName: file_name}));
但我建议您传递一个对象：
io.of('/socket_issue').emit('message', {size: state.total, received: state.received, percent: state.percent, fileName: file_name});
在这种情况下，你不应该在前面使用 JSON.parse(data)，因为它不再是一个字符串。变化：
var percentage = JSON.parse(data).percent;
收件人：
var percentage = data.percent;