这个服务器监控微信小程序，有点意思

[jerrodpoole]

写在前面

想写一个服务器监控的网页供自己用，突发奇想能不能用小程序实现。然而遇到了一些问题，众所周知小程序请求地址必须在开发信息中手动报备并且要求域名备案。而我想实现的是可以动态添加节点，并且通过小程序直接连接到服务器，不经过第三方服务器。琢磨了一段时间做了这个，可以实现小程序和服务器的点对点连接。

特点

• 直接通过小程序和服务器的点对点连接，数据不经过第三方中转
• 不要求服务器域名备案，可以直接使用 ip，甚至局域网地址
• 看起来还挺好看的，如果不符合你的审美，可以自定义显示样式

原理

这是一个黑魔法（ hhh 开玩笑

原理很简单，是巧妙运用了小程序 image 组件的 bindload 接口，当图片加载成功时会返回图片的宽和高。也就是说一个图片能够返回两个数值，前后端约定好请求 API 后可以动态创建 image 获取一系列数值。

注意这个接口是不要求图片地址是备案域名，不用在小程序开发信息中报备。但是这种信息传递方式比较低下，只适合传递少量的信息，但是对这个需求来说足够了。

但是直接传递大体积的二进制图片很浪费带宽，解决方案是后端动态生成 svg 图片。也就是说，动态返回下面这种形式的文字信息：

<svg width="${width}" height="${height}" xmlns="http://www.w3.org/2000/svg"></svg>

详细的实现可以看这个文件

截图给你

不是所有人都有空去打开小程序，截个图放这里，长这样：

节点列表界面

自定义主题样式界面

小程序二维码和后端 github 地址

扫码或者微信搜索 miniStatus 小程序

后端项目地址：https://github.com/axipo/mini-status

（顺手求个 star

[ajaxfunction]

哈哈，妙啊！

[ChangQin]

秀儿

[lukaz]

楼上说的直接生成图片跟楼主提到的“直接传递大体积的二进制图片”应该是一致的吧，直接用组件显示图片，跟 canvas 没啥关系

[mywaiting]

果然思路清奇~

坐等鹅厂出个图片请求白名单~

[jerrodpoole]

@lukaz #23 感谢指正，我理解错了。我理解成把数据转化成图片每个像素的二进制指了，6 楼说的是后端直接渲染出结果图片。最开始设计的时候考虑过我理解的这个版本，所以先入为主了。

[uucloud]

奇技淫巧

[solaro]

奇淫巧技

[Perry]

可以，这塞几十张图片进去应该可以传很多数据吧

[9yu]

楼主牛批

[narutots]

牛批

[mclxly]

牛 B

[marvinemao]

lz 思路牛 B 赞

[Desiree]

太骚了

[molezznet]

挺好用 就是 disk 最好是 G 啊，M 的少了吧现在

[jerrodpoole]

@molezz765 #34 感谢反馈 ，可以磁盘&内存容量少的时候用 M 多的时候用 G，下次更新加上
可能目前还有些粗糙，有什么想法欢迎反馈

[wyfbest]

妙啊！！

[fancy111]

既然都用图片了，任何信息都可以搞上去，直接服务端把信息页面生成图片，小程序每秒刷新这个图片就行了。 看起来就跟动态监控页面一样。
至于流量，其实还有更多办法可以实现。

[evill]

企鹅正在赶来的路上

[igwen6w]

wx:马上修復

[fangcan]

牛皮