This server monitors wechat applet, which is a bit interesting

Time:2021-6-11

Write on the front

Want to write a server monitoring web page for their own use, whim can use small programs to achieve. However, there are some problems. As we all know, the request address of the small program must be manually reported in the development information, and the domain name must be recorded. What I want to achieve is to dynamically add nodes, and connect to the server directly through small programs, without going through a third-party server. Pondered for a period of time to do this, you can achieve small programs and server point-to-point connection.

characteristic

  • Directly through the small program and server point-to-point connection, data without a third party transfer
  • Do not require the server domain name record, you can directly use IP, or even LAN address
  • It looks pretty. If it doesn’t conform to your aesthetics, you can customize the display style

principle

It’s a black magic (HHH) joke

The principle is very simple. It is skillfully usedApplet image componentWhen the image is loaded successfully, it will return the width and height of the image. That is to say, an image can return two values. After the front end and back end have agreed to request the API, they can dynamically create an image to obtain a series of values.

Note that this interface does not require the image address to be the domain name for the record, and does not need to be reported in the small program development information. However, the efficiency of this information transmission method is relatively low, only suitable for the transmission of a small amount of information, but it is enough for this demand.

It is a waste of bandwidth to directly transfer large volume binary images. The solution is to dynamically generate SVG images on the back end. In other words, it dynamically returns the following form of text information:

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

Detailed implementation can be seenThis document

Here’s the screenshot

Not everyone has time to open a small program and put a picture here

Node list interface

This server monitors wechat applet, which is a bit interesting

Custom theme style interface

This server monitors wechat applet, which is a bit interesting

Small program QR code and back-end GitHub address

Scan code or wechat search ministatus applet

This server monitors wechat applet, which is a bit interesting

Back end project address:https://github.com/axipo/mini-status

(I’m looking for a star