Question

差不多6个月前，我在stackoverflow上问了一个问题“Software to help in log analysis?”

请在阅读之前先查看这个问题。

事实证明，目前没有可用的软件可以根据时间戳混合日志文件，并将它们呈现在良好的用户界面中。

我想在完成后主动开发一些东西并开源。

早些时候，我通过在c ++中编写一段快速而肮脏的代码来解决这个问题，它会生成一个制表符分隔文件（如csv但是分隔符），我稍后会在Excel中打开它。

由于以下原因，我对我的c ++代码不满意： 1.完全依赖于Excel以后查看输出文件。 2.由于没有涉及UI，每次都不容易编写命令行。 3.由于命令行的学习曲线，它与其他团队成员（以及世界）没有那么多的共享。

由于上述原因（以及其他一些原因），我正在考虑将其作为Web解决方案进行开发。这样我就可以与每个人分享工作实例。

我想到的是基于网络的解决方案，如下所示：

用户可以使用HTML5的File API提供输入日志文件。
然后用户可能会告诉与每个日志文件关联的时间戳的格式。
此后，javascript会将这些日志文件处理为表格中混合的HTML输出。

我只是网络技术的初学者。所以我需要你的帮助来确定这是否是最佳方式呢？

我想要一个网络解决方案，但这并不意味着我希望用户上传他的日志文件以进行后端处理。我想要一个基于Web的客户端解决方案。

感谢您的投入。

编辑：根据Raynos下面的评论

@bits你确实意识到了浏览器不是为了处理大块数据的。有 stackoverflow.com/questions/4833480/... 这表明这可能导致问题。

我觉得在浏览器中这样做并不是最好的选择。可能，我应该探索基于后端的解决方案。有什么想法或建议吗？

Answer 1

您正在寻找一个在线差异工具，该工具包含n个文件，其中包含按某种顺序列出的时间戳列表，其中包括一个额外的数据，这些数据将在适当的位置显示但不会在差异中进行解析。

文件上传将涉及

<input id="upload" type="file">

与javascript的片段一起

$("#upload").change(function(files) {
    var files = this.files;
    for (var i = 0; i < files.length; i++) {
        (function() {
            var file = files[i]; 
            var reader = new FileReader;
            reader.onload = function(e) {
                var text = reader.result;
                console.log(text);
            };
            reader.readAsText(file);
        }());
    }
});

查看实时example。

因此，您只需要处理解析器所需的所有文本。我希望有所帮助。

至于diff的标记，我会建议像：

<table>
 <!-- one tr per unique timestamp -->
 <tr>
  <!-- one td/textarea per file -->
  <td> <textarea /> </td>
  <td> <textarea /> </td>
 </tr>
 ...
</table>

我建议将其作为模板并使用模板引擎来完成一些繁重的工作。

假设我们想要使用jquery-tmpl。

这是一个让你started的例子。（我花了零时间让它看起来很好。这是你的工作）。

剩下的就是生成要插入模板的JSON数据。

所以给定你的文件输入你应该在某个地方有一个fileTexts的数组。

我们希望有某种分隔符将其拆分为单独的时间戳记录。为了简单起见，让我们说新的线条角色会起作用。

var fileTexts = [file];
var regex = new RegExp("(timestampformat)(.*)");

for (var i = 0; i < fileTexts.length; i++) {
    var text = fileTexts[i];
    var records = text.split("\n");
    for (var j = 0; j < records.length; j++) {
        var match = regex.exec(records[j]);
        addToTimestamps(match[1], match[2], i);
    }
}

function addToTimestamps(timestamp, text, currFileCount) {
    console.log(arguments);
    // implement it.
}

根据example。

这些是基本构建块。从File API获取数据。将数据处理为标准化数据格式，然后在数据格式上使用某种渲染工具。

Answer 2

使用javascript这很容易。你上面提到的使用html5文件api，这是一个很好的起点（html file api），你可以使用不引人注目的javascript来上传文件时引发回调。在回调内部，您可以使用任何优秀的javascript模板库来构建上传文件中的元素表。然后在后续文件上传时，您可以使用它们的时间戳将它们动态交织到表中。使用js正则表达式检测时间戳非常简单，如果使用已编译的表单，则相当有效。

对于这个问题，这是一个相当高级别的答案，如果您对特定细节有任何疑问，我也很乐意回答这些问题。

希望这有帮助

我可以在HTML5 +其他网络技术中实现这一目标吗？

2 个答案: