首页   注册   登录
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
OPPO Watch
jerrodpoole
V2EX  ›  分享创造

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

  jerrodpoole · 15 天前 · 6663 次点击

写在前面

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

特点

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

第 1 条附言  ·  14 天前
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 条回复    2020-05-23 15:19:17 +08:00
tanranran
    1
tanranran   15 天前   ❤️ 2
LZ 思路骨骼清奇,太强了。
dixeran
    2
dixeran   15 天前 via Android
骚操作,学到了
proqj
    3
proqj   15 天前 via Android
666 牛皮
misaka19000
    4
misaka19000   15 天前
哈哈哈有点意思
zhuangjia
    5
zhuangjia   15 天前
有点意思
narmgalaxy
    6
narmgalaxy   15 天前
可以直接生成一个图片呢,把数据画在图片上。弊端 浪费流量,好处就是数据量更大了。
narmgalaxy
    7
narmgalaxy   15 天前
你这思路确实 np,学习了。
hlwjia
    8
hlwjia   15 天前
这思路太 np 了!
jerrodpoole
    9
jerrodpoole   15 天前
@narmgalaxy #6 此路不通的,wx.canvasGetImageData 需要先 CanvasContext.drawImage,而 CanvasContext.drawImage 所要绘制的网络图片要通过 getImageInfo / downloadFile 先下载,下载需要先配置开发信息,死胡同。微信几乎把所有能想到的方法都堵死了 :(
s609926202
    10
s609926202   15 天前 via iPhone
@jerrodpoole 所以实际不可行喽?
s609926202
    11
s609926202   15 天前 via iPhone
@s609926202 抱歉看错了,是 6 楼的不可行,😓
jerrodpoole
    12
jerrodpoole   15 天前
@s609926202 #10 这个提问有点模糊,不知道说的是哪个不可行
楼上说的`把数据画在图片上`的做法不可行,解释过了
利用 bindload 获取宽和高的办法是可行的,毕竟都做出来了,总不至于空口说浪费大家时间啦
jerrodpoole
    13
jerrodpoole   15 天前
@s609926202 #11 没事没事,消息延迟,我又跟你发了一遍
neekeV2
    14
neekeV2   15 天前
这个思路好骚啊
Meiyun
    15
Meiyun   15 天前 via iPhone
不错啊 写到我博客了
qiayue
    16
qiayue   15 天前
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
    17
jerrodpoole   15 天前
@qiayue #16 如果用到的字符有限的话,可以自制码表,甚至可以更省
vc1
    18
vc1   15 天前 via Android
数据转 10 进制纯数字,不知道最大到几位
Tink
    19
Tink   15 天前 via iPhone
骚气
etouyang
    20
etouyang   15 天前
骚年, 好想法
ajaxfunction
    21
ajaxfunction   15 天前
哈哈,妙啊!
ChangQin
    22
ChangQin   15 天前 via Android
秀儿
lukaz
    23
lukaz   15 天前 via Android
楼上说的直接生成图片跟楼主提到的“直接传递大体积的二进制图片”应该是一致的吧,直接用组件显示图片,跟 canvas 没啥关系
mywaiting
    24
mywaiting   15 天前
果然思路清奇~

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

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

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

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

https://s1.ax1x.com/2020/05/14/YBHcD0.png
topc101
    85
topc101   14 天前
牛皮~!!
dxgundam01
    86
dxgundam01   14 天前
想用来监控我的 openwrt,提示 “[错误] 当前系统为 不在支持的系统列表内,安装中断”
Xusually
    87
Xusually   14 天前
骚年,思路轻奇,👍
Maboroshii
    88
Maboroshii   14 天前
把二进制 base10 一下。。。 岂不是
jerrodpoole
    89
jerrodpoole   14 天前
@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
    90
guyskk0x0   14 天前 via Android
width 和 height 有大小限制吗?没限制的话是不是可以传更多信息?
ShayneWang
    91
ShayneWang   13 天前
你好骚啊~
vcode
    92
vcode   13 天前
妙啊
Achiii
    93
Achiii   5 天前
学会了!
关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   4466 人在线   最高记录 5168   ·     Select Language
创意工作者们的社区
World is powered by solitude
VERSION: 3.9.8.5 · 47ms · UTC 07:06 · PVG 15:06 · LAX 00:06 · JFK 03:06
♥ Do have faith in what you're doing.