Writing in the front

Want to write a server monitoring web page for their own use, whim can use small procedures to achieve. However, there are some problems. It is well known that applets requesting addresses must be reported manually in the development information and require domain name registration. What I want to achieve is to be able to add nodes dynamically and connect directly to the server through a small program, without going through a third party server. Pondering over a period of time to do this, you can achieve a small program and server point-to-point connection.

The characteristics of

  • Directly through the applets and server point-to-point connection, data does not go through a third party
  • Do not require server domain name registration, can directly use IP, or even LAN address
  • It looks good, but if it doesn’t suit your taste, you can customize the display style

The principle of

This is a black magic (HHH kidding

The principle is very simple, is the clever use of the small program image component of the Bindload interface, when the image is loaded successfully will return the width and height of the image. In other words, an image can return two values. After the request API is agreed at the front and back end, the image can be dynamically created to obtain a series of values.

Note that this interface does not require the image address to be a registered domain name, not reported in the applets development information. However, this way of information transmission is inefficient and only suitable for transmitting a small amount of information, but it is sufficient for this requirement.

Passing large binary images directly is a waste of bandwidth; the solution is to dynamically generate SVG images at the back end. That is, dynamically return the following form of text information:

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

A detailed implementation can be found in this file

Screenshots to give you

Not all of you have time to open the mini program. Here’s a screenshot that looks like this:

Node List interface

Custom theme style interface

Small program QR code and back-end Github address

Scan or search for miniStatus on wechat

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

Get a star