logo标签列表

基于HTML5/websockets/javascript的实时日志文件查看器？

htmlloggingwebsocket
13

我正在寻找在使用HTML5或JavaScript的浏览器中运行的"tail -f"等效工具。

解决方案需要在客户端编写HTML5/WebSockets/JavaScript代码以及后端服务器应用程序。我正在寻找一个C#语言的解决方案，但我也愿意从PHP或Python进行重新编写。

目前我所看到的最接近的是：

http://commavee.com/2007/04/13/ajax-logfile-tailer-viewer/

然而，现代浏览器已经支持WebSockets，这使得问题变得更简单了。

http://www.websocket.org/echo.html

理想情况下，我希望拥有BareTail的一些功能，例如行的颜色编码、排序和多文件标签页。

http://www.baremetalsoft.com/baretail/

我找到了一个类似的帖子，其中有人正在寻找基于Windows的日志文件程序：

https://stackoverflow.com/questions/113121/best-tail-log-file-visualization-freeware-tool

有人有什么建议吗？

发现了一篇关于HTML5 Websockets的好文章。(http://refcardz.dzone.com/refcardz/html5-websocket)。他们列出了所有websocket服务器实现的清单。对于C#来说，(http://superwebsocket.codeplex.com)看起来是最好的选择。 - mbalsam
这篇文章(https://dev59.com/Emox5IYBdhLWcg3wTina)还提供了一些关于websocket服务器的其他意见。但是我的应用程序并没有所有这些应用程序构建者必须考虑的性能问题。 - mbalsam
在客户端，我想要类似于这样的东西（http://dhtmlx.com/docs/products/dhtmlxGrid/）。 - mbalsam
2个回答
1
虽然我希望它能更好地美化JSON对象以进行实时尾随和历史日志记录，但以下JS客户端可行并支持您的服务器端要求：

https://github.com/logentries/le_js/wiki/API

<html lang="en">
  <head>
    <title>Your page</title>
    <script src="/js/le.min.js"></script>
    <script>
    // Set up le.js
    LE.init('YOUR-LOG-TOKEN');
    </script>
 </head>

.....

<script>
// log something
LE.log("Hello, logger!");
</script>

个人而言，为了使上述代码正常工作，我不得不在LE.init('YOUR-LOG-TOKEN')之前添加以下代码行：
window.LEENDPOINT = 'js.logentries.com/v1'

或者，Loggly也可能是一个合适的选择：https://www.loggly.com/docs/javascript/

1
这不完全像tail命令，但https://log4sure.com的实时日志功能确实允许您实时监控客户端日志。您需要设置并适当记录日志，就像使用tail命令一样，但您可以看到有关客户端的所有日志信息，例如浏览器、操作系统、国家等等。您还可以创建自己的自定义日志来记录内容。在该网站上查看演示以获得更好的了解。
安装代码非常简单，而且最好的部分是它是免费的。 

// set up 
var _logServer;

(function() {
  var ls = document.createElement('script');
  ls.type = 'text/javascript';
  ls.async = true;
  ls.src = 'https://log4sure.com/ScriptsExt/log4sure-0.1.min.js';
  var s = document.getElementsByTagName('script')[0];
  s.parentNode.insertBefore(ls, s);
  ls.onload = function() {
    // use your token here.
    _logServer = new LogServer("use-your-token-here");
  };
})();

// example for logging text
_logServer.logText("your log message goes here.")

// example for logging error 
divide = function(numerator, divisor) {
    try {
      if (parseFloat(value) && parseFloat(divisor)) {
        throw new TypeError("Invalid input", "myfile.js", 12, {
          value: value,
          divisor: divisor
        });
      } else {
        if (divisor == 0) {
          throw new RangeError("Divide by 0", "myfile.js", 15, {
            value: value,
            divisor: divisor
          });
        }
      }
    } catch (e) {
      _logServer.logError(e.name, e.message, e.stack);

    }
  }
  // another use of logError in window.onerror
  // must be careful with window.onerror as you might be overwriting some one else's window.onerror functionality
  // also someone else can overwrite window.onerror.
window.onerror = function(msg, url, line, column, err) {
  // may want to check if url belongs to your javascript file
  var data = {
    url: url,
    line: line,
    column: column,

  }
  _logServer.logError(err.name, err.message, err.stack, data);

};

//example for custom logs
var foo = "some variable value";
var bar = "another variable value";
var flag = "false";
var temp = "yet another variable value";

_logServer.log(foo, bar, flag, temp);

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接