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

Question

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

在继续阅读之前，请先看看这个问题。

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

我想主动开发一些东西，一旦完成就开源。

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

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

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

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

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

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

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

感谢您的意见。

编辑：基于 Raynos 下面的评论

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

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

Answer 1

使用 javascript 很容易做到这一点。您在上面提到使用 html5 文件 api，这是一个很好的起点 (html file api)，您可以使用不显眼的 javascript 在上传文件时触发回调。在回调中，您可以使用任何出色的 javascript 模板库从上传的文件中构造元素表。然后在后续文件上传时，您可以使用它们的时间戳将它们动态地交错到表中。使用 js 正则表达式检测时间戳会相当简单，如果您使用已编译的表单，则相当有效。

这是对该问题的相当高水平的回答，如果您对特定细节有任何疑问，我也很乐意回答。

希望对你有帮助

Answer 2

您正在寻找一个在线 diff 工具，该工具以某种顺序获取包含时间戳列表的 n 个文件，其中包括要在适当位置显示但未在 diffing 中解析的额外数据。

文件上传会涉及

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

连同javascript的sn-ps

$("#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。

因此，您拥有在解析器上工作所需的所有文本。我希望这会有所帮助。

至于差异的标记，我建议如下：

<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。

这些是基本的构建块。从文件 API 获取数据。将数据处理成规范化的数据格式，然后对数据格式使用某种渲染工具。