5显示日志_关于运行日志实时监控的设计方案

今年在设计PSS的时候，一直在思考一个功能。

从我个人出发和从开源反馈上来看，都希望一个功能，图形化自动展示日志。

比如，

当前服务客户端连接数，指定时间内的断开和建立数量。

某个关键指令的实时处理量。

这些东西如果能自动的图形化展示给运营，将是非常方便的。必须要实时性，只是曲线图刷新。

但是实现这个功能需要两个前提：

（1）后台怎么把日志吐成图形需要的数据格式？

（2）后端如何将指定的日志变为多图形？

第一个问题简单。我规范化一下日志。

日志输出格式如下：

连接数据|2019-10-12 15:00:00|11
连接数据|2019-10-12 15:30:00|15
连接数据|2019-10-12 16:00:00|20
连接数据|2019-10-12 16:30:00|11
连接数据|2019-10-12 17:00:00|16
连接数据|2019-10-12 17:30:00|25

数据间的格式，以|隔开，后面的数据可以继续叠加，这样可以扩展不同的线段（目前版本的时候是线图）

解决第二个问题，一定要保留弹性。什么是弹性呢？

也就是说，我要生成的图形，必须可以根据日志文件的配置不同，生成不同的图表。

也就是说，前端要按照我的配置，生成不同的日志图表。

不那么，我就需要一个配置文件，来完成后端json生成的过程。

于是配置文件如下：（后端用go实现）

{
  "Loginfo": [
    {
      "Logpath": "root/nodejs/testview/backgound_src/",
      "Filename": "testlog.txt",
      "Readcount": 5
    },
    {
      "Logpath": "root/nodejs/testview/backgound_src/",
      "Filename": "testlog.txt",
      "Readcount": 5
    }
  ],
  "ListenInfo": {
    "Urlinterface": "/TestChart",
    "Address": "",
    "Port": "12345"
  }

这里的Loginfo 可以配置你想配置的若干个文件。你想配置多少个就配置多少个，这个例子是2个。你可以根据实际情况，生成若干个。

Logpath 是需要图形化的日志路径

Filename 是文件名

Readcount 是读取日志最后几行。因为图形化的数据，考虑到后端一直输出日志，比如输出了几万行，那么对于看图形的人，最多需要的可能只是最新的几条数据而已，所以在这里配置。

ListenInfo 是后端http resful接口配置相关信息。

好了，有了这些，后端的材料就基本备齐了。

再说前端，前端使用VUE做架子。目前的VUE版本是2.8

VUE加载对应的前端显示元素，并连接后端的接口或者数据展示（前后端分离）

显示结果为下图。

项目代码地址为：

ArkNX/logchartview​github.com

项目目录结构为：

backgound_src 为go的后端实现。

src为vue架构代码。