爱意满满的作品展示区。
jerrodpoole

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

  jerrodpoole · May 13, 2020 · 12559 views
This topic created in 2368 days ago, the information mentioned may be changed or developed.

写在前面

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

特点

  • 直接通过小程序和服务器的点对点连接,数据不经过第三方中转
  • 不要求服务器域名备案,可以直接使用 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

Supplement 1  ·  May 14, 2020
wget https://gist.githubusercontent.com/axipo/81e148e47f4a02892c22e76339b68b63/raw/4ae1fc7f1ccc42ee6a4537358e41c42b415725bd/mini_status_easy_install.sh && chmod u+x mini_status_easy_install.sh && ./mini_status_easy_install

临时写了个方便安装的脚本,如果有问题的话到对应的 gist 下反馈吧(可以顺便帮忙测试下...

93 replies  •  2020-05-23 15:19:17 +08:00
ByteRan
ByteRan
May 13, 2020❤️2
1
LZ 思路骨骼清奇,太强了。
dixeran
dixeran
May 13, 2020 via Android
2
骚操作,学到了
proqj
proqj
May 13, 2020 via Android
3
666 牛皮
misaka19000
misaka19000
May 13, 2020
4
哈哈哈有点意思
zhuangjia
zhuangjia
May 13, 2020
5
有点意思
narmgalaxy
narmgalaxy
May 13, 2020
6
可以直接生成一个图片呢,把数据画在图片上。弊端 浪费流量,好处就是数据量更大了。
narmgalaxy
narmgalaxy
May 13, 2020
7
你这思路确实 np,学习了。
hlwjia
hlwjia
May 13, 2020
8
这思路太 np 了!
jerrodpoole
jerrodpoole
OP
May 13, 2020
9
@narmgalaxy #6 此路不通的,wx.canvasGetImageData 需要先 CanvasContext.drawImage,而 CanvasContext.drawImage 所要绘制的网络图片要通过 getImageInfo / downloadFile 先下载,下载需要先配置开发信息,死胡同。微信几乎把所有能想到的方法都堵死了 :(
rateltalk
rateltalk
May 13, 2020 via iPhone
10
@jerrodpoole 所以实际不可行喽?
rateltalk
rateltalk
May 13, 2020 via iPhone
11
@s609926202 抱歉看错了,是 6 楼的不可行,😓
jerrodpoole
jerrodpoole
OP
May 13, 2020
12
@s609926202 #10 这个提问有点模糊,不知道说的是哪个不可行
楼上说的`把数据画在图片上`的做法不可行,解释过了
利用 bindload 获取宽和高的办法是可行的,毕竟都做出来了,总不至于空口说浪费大家时间啦
jerrodpoole
jerrodpoole
OP
May 13, 2020
13
@s609926202 #11 没事没事,消息延迟,我又跟你发了一遍
neekeV2
neekeV2
May 13, 2020
14
这个思路好骚啊
Meiyun
Meiyun
May 13, 2020 via iPhone
15
不错啊 写到我博客了
qiayue
qiayue
May 13, 2020
16
miniStatus 转成二进制是
01101101011010010110111001101001010100110111010001100001011101000111010101110011

再每 12 位分割,最后补 0,得到
011011010110 : 1750
100101101110 : 2414
011010010101 : 1685
001101110100 : 884
011000010111 : 1559
010001110101 : 1141
011100110000 : 1840
四次请求就可以传递了
1750,2414
1685,884
1559,1141
1840,0
jerrodpoole
jerrodpoole
OP
May 13, 2020
17
@qiayue #16 如果用到的字符有限的话,可以自制码表,甚至可以更省
vc1
vc1
May 13, 2020 via Android
18
数据转 10 进制纯数字,不知道最大到几位
Tink
Tink
May 13, 2020 via iPhone
19
骚气
etouyang
etouyang
May 13, 2020
20
骚年, 好想法
ajaxfunction
ajaxfunction
May 13, 2020
21
哈哈,妙啊!
ChangQin
ChangQin
May 13, 2020 via Android
22
秀儿
lukaz
lukaz
May 13, 2020 via Android
23
楼上说的直接生成图片跟楼主提到的“直接传递大体积的二进制图片”应该是一致的吧,直接用组件显示图片,跟 canvas 没啥关系
mywaiting
mywaiting
May 13, 2020
24
果然思路清奇~

坐等鹅厂出个图片请求白名单~
jerrodpoole
jerrodpoole
OP
May 13, 2020
25
@lukaz #23 感谢指正,我理解错了。我理解成把数据转化成图片每个像素的二进制指了,6 楼说的是后端直接渲染出结果图片。最开始设计的时候考虑过我理解的这个版本,所以先入为主了。
uucloud
uucloud
May 14, 2020
26
奇技淫巧
solaro
solaro
May 14, 2020
27
奇淫巧技
Perry
Perry
May 14, 2020
28
可以,这塞几十张图片进去应该可以传很多数据吧
9yu
9yu
May 14, 2020 via Android
29
楼主牛批
narutots
narutots
May 14, 2020
30
牛批
mclxly
mclxly
May 14, 2020
31
牛 B
marvinemao
marvinemao
May 14, 2020
32
lz 思路牛 B 赞
Desiree
Desiree
May 14, 2020
33
太骚了
molezznet
molezznet
May 14, 2020
34
挺好用 就是 disk 最好是 G 啊,M 的少了吧现在
jerrodpoole
jerrodpoole
OP
May 14, 2020
35
@molezz765 #34 感谢反馈 ,可以磁盘&内存容量少的时候用 M 多的时候用 G,下次更新加上
可能目前还有些粗糙,有什么想法欢迎反馈
wyfbest
wyfbest
May 14, 2020
36
妙啊!!
fancy111
fancy111
May 14, 2020
37
既然都用图片了,任何信息都可以搞上去,直接服务端把信息页面生成图片,小程序每秒刷新这个图片就行了。 看起来就跟动态监控页面一样。
至于流量,其实还有更多办法可以实现。
evill
evill
May 14, 2020
38
企鹅正在赶来的路上
igwen6w
igwen6w
May 14, 2020
39
wx:马上修復
fangcan
fangcan
May 14, 2020
40
牛皮
tmrQAQ
tmrQAQ
May 14, 2020
41
牛批
lzdyes
lzdyes
May 14, 2020
42
微信:好家伙
lzhnull
lzhnull
May 14, 2020
43
牛皮牛皮
hs0000t
hs0000t
May 14, 2020 via Android
44
牛啤
lazyyz
lazyyz
May 14, 2020
45
厉害了我的楼主
RiceS
RiceS
May 14, 2020
46
牛批...
rrfeng
rrfeng
May 14, 2020
47
感觉应该还有更多办法……其实思路跟 jsonp 差不多吧。
小程序应该可以发很多类型的请求,这些请求里你都可以拼数据进去然后自己解码……
laydown
laydown
May 14, 2020
48
Telegram 的机器人估计更好用,楼主试试?
GG668v26Fd55CP5W
GG668v26Fd55CP5W
May 14, 2020 via iPhone
49
感觉要“被修复”了
nekoyaki
nekoyaki
May 14, 2020
50
楼主真是鬼才,,,
jerrodpoole
jerrodpoole
OP
May 14, 2020
51
楼上好多表示了 image 接口改动的担忧,如果要求图片地址报备,要修改的小程序可能会有很多。并且这个接口还是有用的,为了这种角度刁钻的玩法改动接口没有必要,个人感觉改动的可能性不大。
tyrad
tyrad
May 14, 2020
52
6,不过估计长久不了
phpfpm
phpfpm
May 14, 2020
53
所以你 dom 是怎么写的?
```

<img src="http://foo.bar.com/hint.svg" bindload="foo">
```
这样吗?这样的图片能被加载出来吗?

换句话说直接显示这样的图片不行吗
Vegetable
Vegetable
May 14, 2020
54
微信:收到,马上封!
hereIsChen
hereIsChen
May 14, 2020
55
厉害了,还有这种操作
putaozhenhaochi
putaozhenhaochi
May 14, 2020
56
够骚。已 star
hereIsChen
hereIsChen
May 14, 2020
57
哦,对了,可以用小程序的云开发,也能去请求其他服务器的内容
云端的请求时没有限制域名的
pakro888
pakro888
May 14, 2020
58
厉害了,牛逼
huage2580
huage2580
May 14, 2020
59
是你吗 秀儿
m0cha
m0cha
May 14, 2020 via iPhone
60
想法新奇,学到了
dyxang
dyxang
May 14, 2020 via Android❤️2
61
这帖子不错的地方就是不仅仅只放一个小程序码,还放了预览图👍
Ritter
Ritter
May 14, 2020
62
666
paoqi2048
paoqi2048
May 14, 2020
63
🐂的
pmispig
pmispig
May 14, 2020
64
楼主好骚啊,牛逼
张小龙: 收到,马上修复
itwarcraft88
itwarcraft88
May 14, 2020
65
666
JoeoooLAI
JoeoooLAI
May 14, 2020
67
有点意思,关注看看
yulgang
yulgang
May 14, 2020
68
你好骚。。。
NSAgold
NSAgold
May 14, 2020
69
已 star
非常有创意的实现方式!(骚的飞起)
我现在在用 server-status 探针(可乐博客修改美化版 https://www.cokemine.com/serverstatus-hotaru.html )
那个是你一开始想的网页版的那种探针
speculatorA
speculatorA
May 14, 2020
70
玩玩看看
lizheming
lizheming
May 14, 2020
71
https://imququ.com/post/use-image-to-transfer-data.html 多年前屈屈老师也折腾过这个方案~
cquyf
cquyf
May 14, 2020
72
看起不错,哈哈
zhw2590582
zhw2590582
May 14, 2020
73
既然能做到这样,那么后面可以扩展的花样就多了,妙啊。
zhw2590582
zhw2590582
May 14, 2020
74
你要刷新一次面板,需要请求多少个 svg 才足够?
Rekkles
Rekkles
May 14, 2020
75
nb
int11
int11
May 14, 2020
76
奇淫巧技
luckyrayyy
luckyrayyy
May 14, 2020
77
好骚啊
manmuy
manmuy
May 14, 2020 via Android
78
牛皮~
思路清奇
winglight2016
winglight2016
May 14, 2020
79
传递信息的话,还是可以放在图片里的。以前记得有把图片 base64 转码之后放在 DB 里面,lz 的需求可以反向操作一下,直接把数据 base64 之后,先转 16 进制,再转成 bmp 格式,解码的时候反向操作即可。

再脑洞一下,数据可以放在 HEAD 请求的返回结果里,连图片都不需要了——不过我没写过小程序不知道能不能这么搞?
zhw2590582
zhw2590582
May 14, 2020
80
@winglight2016 把数据放到图片简单,但这样只能通过类似 fetch 的方式异步请求,请求接口是要申报的。
xiaominglui
xiaominglui
May 14, 2020
81
学到了,楼主阔以
uuker
uuker
May 14, 2020
82
已 star
winglight2016
winglight2016
May 14, 2020
83
@zhw2590582 小程序严防死守啊,没法。。。要是能直接获取到缓存图片也可以的
HuberyPang
HuberyPang
May 14, 2020
84
你们跑起来了吗 为啥我的运行出错呀 我运行 mini-status 报错 系统:VMware ubuntu:16.04

https://s1.ax1x.com/2020/05/14/YBHcD0.png
topc101
topc101
May 14, 2020
85
牛皮~!!
dxgundam01
dxgundam01
May 14, 2020
86
想用来监控我的 openwrt,提示 “[错误] 当前系统为 不在支持的系统列表内,安装中断”
Xusually
Xusually
May 14, 2020
87
骚年,思路轻奇,👍
Maboroshii
Maboroshii
May 14, 2020
88
把二进制 base10 一下。。。 岂不是
jerrodpoole
jerrodpoole
OP
May 14, 2020
89
@HuberyPang #84
@dxgundam01 #86

wget https://gist.githubusercontent.com/axipo/81e148e47f4a02892c22e76339b68b63/raw/4ae1fc7f1ccc42ee6a4537358e41c42b415725bd/mini_status_easy_install.sh && chmod u+x mini_status_easy_install.sh && ./mini_status_easy_install

临时写了个方便安装的脚本,如果有问题的话到对应的 gist 下反馈吧(可以顺便帮忙测试下...
guyskk0x0
guyskk0x0
May 14, 2020 via Android
90
width 和 height 有大小限制吗?没限制的话是不是可以传更多信息?
ShayneWang
ShayneWang
May 15, 2020
91
你好骚啊~
vcode
vcode
May 15, 2020
92
妙啊
Achiii
Achiii
May 23, 2020
93
学会了!
About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Privacy   ·   Solana   ·   1659 Online   Highest 6679   ·     Select Language
创意工作者们的社区
World is powered by solitude
VERSION: 3.9.8.5 · 183ms · UTC 04:39 · PVG 12:39 · LAX 20:39 · JFK 23:39
♥ Do have faith in what you're doing.