跳至主要內容
  • Hostloc 空間訪問刷分
  • 售賣場
  • 廣告位
  • 賣站?

4563博客

全新的繁體中文 WordPress 網站
  • 首頁
  • 这个服务器监控微信小程序,有点意思
未分類
2020 年 5 月 16 日

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

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

資深大佬 : jerrodpoole 0

写在前面

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

特点

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

大佬有話說 (92)

  • 資深大佬 : tanranran

    LZ 思路骨骼清奇,太强了。

  • 資深大佬 : dixeran

    骚操作,学到了

  • 資深大佬 : proqj

    666 牛皮

  • 資深大佬 : misaka19000

    哈哈哈有点意思

  • 資深大佬 : zhuangjia

    有点意思

  • 資深大佬 : narmgalaxy

    可以直接生成一个图片呢,把数据画在图片上。弊端 浪费流量,好处就是数据量更大了。

  • 資深大佬 : narmgalaxy

    你这思路确实 np,学习了。

  • 資深大佬 : hlwjia

    这思路太 np 了!

  • 主 資深大佬 : jerrodpoole

    @narmgalaxy #6 此路不通的,wx.canvasGetImageData 需要先 CanvasContext.drawImage,而 CanvasContext.drawImage 所要绘制的网络图片要通过 getImageInfo / downloadFile 先下载,下载需要先配置开发信息,死胡同。微信几乎把所有能想到的方法都堵死了 :(

  • 資深大佬 : s609926202

    @jerrodpoole 所以实际不可行喽?

  • 資深大佬 : s609926202

    @s609926202 抱歉看错了,是 6 的不可行,

  • 主 資深大佬 : jerrodpoole

    @s609926202 #10 这个提问有点模糊,不知道说的是哪个不可行
    上说的`把数据画在图片上`的做法不可行,解释过了
    利用 bindload 获取宽和高的办法是可行的,毕竟都做出来了,总不至于空口说浪费大家时间啦

  • 主 資深大佬 : jerrodpoole

    @s609926202 #11 没事没事,消息延迟,我又跟你发了一遍 这个服务器监控微信小程序,有点意思

  • 資深大佬 : neekeV2

    这个思路好骚啊

  • 資深大佬 : Meiyun

    不错啊 写到我博客了

  • 資深大佬 : qiayue

    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

    @qiayue #16 如果用到的字符有限的话,可以自制码表,甚至可以更省

  • 資深大佬 : vc1

    数据转 10 进制纯数字,不知道最大到几位

  • 資深大佬 : Tink

    骚气

  • 資深大佬 : etouyang

    骚年, 好想法

  • 資深大佬 : ajaxfunction

    哈哈,妙啊!

  • 資深大佬 : ChangQin

    秀儿

  • 資深大佬 : lukaz

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

  • 資深大佬 : mywaiting

    果然思路清奇~

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

  • 主 資深大佬 : jerrodpoole

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

  • 資深大佬 : uucloud

    奇技淫巧

  • 資深大佬 : solaro

    奇淫巧技

  • 資深大佬 : Perry

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

  • 資深大佬 : 9yu

    主牛批

  • 資深大佬 : narutots

    牛批

  • 資深大佬 : mclxly

    牛 B

  • 資深大佬 : marvinemao

    lz 思路牛 B 赞

  • 資深大佬 : Desiree

    太骚了

  • 資深大佬 : molezz765

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

  • 主 資深大佬 : jerrodpoole

    @molezz765 #34 感谢反馈 这个服务器监控微信小程序,有点意思 ,可以磁盘&内存容量少的时候用 M 多的时候用 G,下次更新加上
    可能目前还有些粗糙,有什么想法欢迎反馈 这个服务器监控微信小程序,有点意思

  • 資深大佬 : wyfbest

    妙啊!!

  • 資深大佬 : fancy111

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

  • 資深大佬 : evill

    企鹅正在赶来的路上

  • 資深大佬 : igwen6w

    wx:马上修復

  • 資深大佬 : fangcan

    牛皮

  • 資深大佬 : tmrQAQ

    牛批

  • 資深大佬 : lzdyes

    微信:好家伙

  • 資深大佬 : lzhnull

    牛皮牛皮

  • 資深大佬 : hs0000t

    牛啤

  • 資深大佬 : lazyyz

    厉害了我的主

  • 資深大佬 : RiceS

    牛批…

  • 資深大佬 : rrfeng

    感觉应该还有更多办法……其实思路跟 jsonp 差不多吧。
    小程序应该可以发很多类型的请求,这些请求里你都可以拼数据进去然后自己解码……

  • 資深大佬 : laydown

    Telegram 的机器人估计更好用,主试试?

  • 資深大佬 : falcon05

    感觉要“被修复”了

  • 資深大佬 : nekoyaki

    主真是鬼才,,,

  • 主 資深大佬 : jerrodpoole

    上好多表示了 image 接口改动的担忧,如果要求图片地址报备,要修改的小程序可能会有很多。并且这个接口还是有用的,为了这种角度刁钻的玩法改动接口没有必要,个人感觉改动的可能性不大。

  • 資深大佬 : tyrad

    6,不过估计长久不了

  • 資深大佬 : phpfpm

    所以你 dom 是怎么写的?
    “`

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

    换句话说直接显示这样的图片不行吗

  • 資深大佬 : Vegetable

    微信:收到,马上封!

  • 資深大佬 : hereIsChen

    厉害了,还有这种操作

  • 資深大佬 : putaozhenhaochi

    够骚。已 star

  • 資深大佬 : hereIsChen

    哦,对了,可以用小程序的云开发,也能去请求其他服务器的内容
    云端的请求时没有限制域名的

  • 資深大佬 : pakro888

    厉害了,牛逼

  • 資深大佬 : huage2580

    是你吗 秀儿

  • 資深大佬 : m0cha

    想法新奇,学到了

  • 資深大佬 : dyxang

    这帖子不错的地方就是不仅仅只放一个小程序码,还放了预览图

  • 資深大佬 : Ritter

    666

  • 資深大佬 : paoqi2048

  • 資深大佬 : pmispig

    主好骚啊,牛逼
    张小龙: 收到,马上修复

  • 資深大佬 : itwarcraft88

    666

  • 資深大佬 : ylx

    wget -N –no-check-certificate “https://raw.githubusercontent.com/tadple/mini-status-shell/master/mini-status.sh” && chmod +x mini-status.sh && ./mini-status.sh

  • 資深大佬 : JoeoooLAI

    有点意思,关注看看

  • 資深大佬 : yulgang

    你好骚。。。

  • 資深大佬 : NSAgold

    已 star
    非常有创意的实现方式!(骚的飞起)
    我现在在用 server-status 探针(可乐博客修改美化版 https://www.cokemine.com/serverstatus-hotaru.html )
    那个是你一开始想的网页版的那种探针

  • 資深大佬 : speculatorA

    玩玩看看

  • 資深大佬 : lizheming

    https://imququ.com/post/use-image-to-transfer-data.html 多年前屈屈老师也折腾过这个方案~

  • 資深大佬 : cquyf

    看起不错,哈哈

  • 資深大佬 : zhw2590582

    既然能做到这样,那么后面可以扩展的花样就多了,妙啊。

  • 資深大佬 : zhw2590582

    你要刷新一次面板,需要请求多少个 svg 才足够?

  • 資深大佬 : Rekkles

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

  • 資深大佬 : int11

    奇淫巧技

  • 資深大佬 : luckyrayyy

    好骚啊

  • 資深大佬 : manmuy

    牛皮~
    思路清奇

  • 資深大佬 : winglight2016

    传递信息的话,还是可以放在图片里的。以前记得有把图片 base64 转码之后放在 DB 里面,lz 的需求可以反向操作一下,直接把数据 base64 之后,先转 16 进制,再转成 bmp 格式,解码的时候反向操作即可。

    再脑洞一下,数据可以放在 HEAD 请求的返回结果里,连图片都不需要了——不过我没写过小程序不知道能不能这么搞?

  • 資深大佬 : zhw2590582

    @winglight2016 把数据放到图片简单,但这样只能通过类似 fetch 的方式异步请求,请求接口是要申报的。

  • 資深大佬 : xiaominglui

    学到了,主阔以

  • 資深大佬 : uuker

    已 star

  • 資深大佬 : winglight2016

    @zhw2590582 小程序严防死守啊,没法。。。要是能直接获取到缓存图片也可以的

  • 資深大佬 : HuberyPang

    你们跑起来了吗 为啥我的运行出错呀 我运行 mini-status 报错 系统:VMware ubuntu:16.04

    https://s1.ax1x.com/2020/05/14/YBHcD0.png

  • 資深大佬 : topc101

    牛皮~!!

  • 資深大佬 : dxgundam01

    想用来监控我的 openwrt,提示 “[错误] 当前系统为 不在支持的系统列表内,安装中断”

  • 資深大佬 : Xusually

    骚年,思路轻奇,

  • 資深大佬 : Maboroshii

    把二进制 base10 一下。。。 岂不是 这个服务器监控微信小程序,有点意思

  • 主 資深大佬 : jerrodpoole

    @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

    width 和 height 有大小限制吗?没限制的话是不是可以传更多信息?

  • 資深大佬 : ShayneWang

    你好骚啊~

  • 資深大佬 : vcode

    妙啊

文章導覽

上一篇文章
下一篇文章

AD

其他操作

  • 登入
  • 訂閱網站內容的資訊提供
  • 訂閱留言的資訊提供
  • WordPress.org 台灣繁體中文

51la

4563博客

全新的繁體中文 WordPress 網站
返回頂端
本站採用 WordPress 建置 | 佈景主題採用 GretaThemes 所設計的 Memory
4563博客
  • Hostloc 空間訪問刷分
  • 售賣場
  • 廣告位
  • 賣站?
在這裡新增小工具