AI智能摘要
作者通过哪吒（Nezha）面板实现服务器状态监控页面，因WordPress缺乏相关组件，遂采用自定义方案。首先分析哪吒面板的WebSocket接口/api/v1/ws/server，发现其每2秒发送一次数据，但存在Origin头部导致断连问题。随后使用C#编写后端接口，作为HTTP桥接服务，接收并存储哪吒数据，并提供API供前端调用。前端页面通过HTML块引入，展示实时服务器状态，源码已公开于Git仓库https://git.weiai.org.cn/weiai/NezhaAgentHTTPBridge。
— 此摘要由AI分析文章内容生成，仅供参考。
我的博客中有下面这个界面
这是我写的服务器状态监控页面，看起来很高级，因为在WordPress 中似乎并没有类似的组件？
其实最早我是想寻找一个能在WordPress中很容易就集成的工具，但是确实是没有找到。
最后才选择了nezha作为面板的状态检测，那么就一步步来说吧，我是怎么实现的这个页面。
一、查看哪吒面板的对接方式
二、利用C#编写一个接口，用于同步和nezha的交互
三、前端页面接收输出
一会我会把源码上传到git，希望能帮助到一部分人
一、查看哪吒面板对接方式
1、利用开发着工具查看与哪吒的通讯。我们注意到有一个有一个/api/v1/ws/server的ws（websocket）链接，大概是每隔2秒服务器会发送一次消息
2、尝试与服务器进行通讯，但是不知道为什么，请求头部如果携带Origin服务器会断开链接
二、利用C#编写一个接口，用于同步和nezha的交互
git存储位置：https://git.weiai.org.cn/weiai/NezhaAgentHTTPBridge
在这里把最后一条信息存储到一个地方
在另一个接口返回存储的数据
三：前端页面接收输出
其实就是AI跑出来的，放在这了：https://git.weiai.org.cn/weiai/NezhaAgentHTTPBridge/src/branch/main/UI.html
然后新建一个页面，增加一个html块就行了
差不多就是这个样子
若您喜欢这篇内容，欢迎用TRC-USDT支持创作者
Comments 1 条评论
刚建的啊，前来围观