The Map Worm (MQTT via HTTP/2 Demo)

Go back to example list / Go to the repository of this example on GitHub

HOST (Where is the broker):

URL:
://:/

Preset ...

SEND (Behave as a publisher):

topic =

RECV (Behave as a subscriber):

topic =

Map (Pick up from the subscriber):

control:

The coordinate points will be pinned and drawn lines when the above subscriber receives them if the coordinate is formatted like the following.

plot lat lng name
lat
Latitude (real-number, -90≦lat≦90)
lng
Longitude (real-number, -180≦lng≦180)
name
the name of the point (option)

Or you can erase all pins and lines by the following message.

erase all

README (What is this?):

This is a control panel for testing the EventSource class, which is for the "Server-Sent Event (SSE)." This class is helpful for your web browser to work as an MQTT subscriber, as it enables server-push data transmission within HTTP regulations. And HTTP/2 is necessary to make the class truly practical. HTTP/2 can make HTTP data transmission both upstream and downstream more efficiently with a single connection.

This control panel runs the mosquitto_pub/mosquitto_sub command in a CGI script on the web server by using the EventSource class and the fetch() method. The Mosquitto commands encapsulate/decapsulate MQTT data, instead of the web client, so that this page can work as not only an MQTT subscriber but also an MQTT publisher.

Try to use me by the following steps.

How to Use Me:

0-1) [PREP.] Install a HTTP/2 web server

Typically, I recommend Apache or nginx.

0-2) [PREP.] Install Mosquitto

The installation instructions are on this page.Then, Copy and save the following text as the file "mosquitto.local.conf" in your favor directory.

0-3) [PREP.] Git clone this repository into a public web space on your web server

1) Start an MQTT broker

Type the following command on your UNIX terminal.

2) Select the MQTT broker

In the "HOST" section, fill in the URL form (Specify "mqtt://localhost:1883/" to use the above MQTT broker, of course, it's OK to use another broker. If you do so, replace "localhost" in the latter explanations with the other host you specified.)

3) Start subscribing

Move to the "RECV" section. And decide on the MQTT topic name for this trial. Next, type the topic name into the "topicname" field in this section and push the "Start" button in the same section.

4) Run "mapworm.sh" to get the sample

Run the "../../../sh_for_example/mapworm.sh" on a UNIX terminal. Note that you have to use the same MQTT broker and the same topic name as what you specified in this HTML. (See the "mapworm.sh" usage to do it.)

Finally, you can see the "Map worm" growing on the map.