基于Go和Vue开发监控模块

昨天我们进行了开发流程中的第二步架构设计，并且创建了vite+vue的项目并且引入了antd的UI组件，今天我们就进行开发流程中的比较费时间的第三部分，就是前后端功能模块的实际开发，利用程序实现自己的业务需求。

之前我们用的的elmentplus的ui组件，显示K8s的集群信息。今天我们利用antd组件显示后端信息组件也是大同小异，所以前后端交互流程也都是一样的。那么我们的功能模块包括暂时包括三个模块，一个是传统模块，一个是云原生模块，还有一个就是微服务的模块。

我们现阶段先开发传统模块，包含监控、终端等功能。

监控模块开发

那么从监控功能开始，如果想开发监控功能的话，一般有那些方式呢，个人目前理解的大方向有两个：

1、使用后端语言单独开发监控资源   

2、直接调用成熟系统的api接口返回数据给前端

第一种方式优点就是可以完全自定义监控的逻辑，灵活度高，而且不依赖第三方监控系统，部署简单。缺点也是显而易见的就是自行开发和维护监控功能,工作量大。关键功能还不如成熟系统强大。

第二种方式优点显而易见，可以利用成熟的监控系统，监控功能强大，前端获取的监控数据还比较丰富。缺点就是依赖第三方监控系统，系统更换或者升级会带来影响，监控的数据结构和api需要依赖监控系统，可能不是很灵活。

所以一般我们除了需要高度定制的监控功能，一般都会选择直接调用成熟监控系统的API这是一种简单高效，能够快速获取监控数据的方案。所以说一切都是按需求定义，看客户需求是什么，两者结合都是可以的。

那么我这边平台的需求暂时没有什么高度定制的监控需求，所以我们只要部署监控系统，调用它的api，利用前端显示即可。

调用方式也有几种方式：

1、前端直接调用监控系统API，优势就是简单快速，直接展示api返回的丰富监控数据，但是缺点就是面向具体的监控系统的api进行开发，更换系统的话影响就比较大

2、后端调用

前端调用后端接口，后端再调用监控api获取数据，返回给前端，优势在于前端和具体的监控系统解耦，更换监控系统影响不大，但是需要后端进行二次开发

3、基于socket推送

监控系统直接推送实时监控数据和事件到后端，后端通过socket连接推送到前端，这个实时推送监控消息，前端实时展示，但是开发复杂度还是大

4、基于webhook

监控系统通过webhook推送到后端，后端再将数据返回给前端，和上面的方法一样，需要webhook接入的开发。

本来想我们直接调用监控系统api显示即可，但是我又想到另一种方法，直接将现有的监控面板grafana接入我的前端页面是最快速高效的办法。

所以我就着手搭建监控系统，我本来是利用helm直接一套安装的，但那成想，网络原因一直下载不下来，所以暂时不浪费时间了，明天再抽空搭建一套之后再引入。

但是，我觉得除了直接引入，自己开发单独的监控流程还是要熟悉一下。

这里我们使用go语言，简单的来监控一下远程linux机器的cpu的信息，设置每5秒来监控一下，然后返回cpu的占用率和可用率。

马上动手，新建go项目monitor，代码如下：

这里简单说下流程就是下载引入需要的模块，利用ssh连接远程机器，执行模块封装的函数，返回具体的机器信息，并用json格式，这里还要设置下跨域访问，不然前端因为浏览器安全设置无法获取后端数据。

运行看一下：

再在昨天vite创建的项目上引入页面：

上代码：

完整的前端代码如下:

这里调整了几次样式,使用antd的卡片，我们看看效果：

我们实际看看机器信息：

当然这里的后端可用率逻辑只是简单的100-用户空间cpu占用率，没算系统占用的，还可以改善一下。

所以其他的内存硬盘等主机信息也是类似的开发流程。所以说对于特定的比较重要的监控信息可以采取单独开发。不然还是直接调用API是最好的选择。

那么好了，今天的分享就到这了，感兴趣的朋友别忘了关注点赞呀。