Where Are We At? (MQTT via HTTP/2 Demo)

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

HOST (Where is the broker):

SEND (Behave as a publisher):

RECV (Behave as a subscriber):

Map (Pick up from the subscriber):

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 your pin by the following message.

erase name

"name" is the name of your pin. But the word "all" is the special one to erase all pins.

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.

• Requirements for Apache:
  • Apache 2.4.17 or later
  • Built with OpenSSL 1.0.2 or later
  • Built with --enable-ssl, --enable-http2, and --with-mpm=event
  • LoadModule mod_ssl, mod_http2, and mod_mpm_event in httpd.conf
  • Add "SSLEngine on" and "Protocol h2 http/1.1" in your <VirtualHost> directive
• Requirements for nginx:
  • nginx 1.9.5 or later
  • Built with OpenSSL 1.0.2 or later
  • Built with --with-http_ssl_module and --with-http_v2_module
  • Add "listen 443 ssl http2" in the server block for your host

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.
allow_anonymous true #=== Plain MQTT listener 1883 protocol mqtt

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

$ https://github.com/ShellShoccar-jpn/MQTTwrapper.git

1) Start an MQTT broker

Type the following command on your UNIX terminal.
$ mosquitto -c mosquitto.local.conf

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) Publish your location

Write the same topic name as the one in the "RECV" section. Next, decide on the name of your pin and type it into the "myname" field. Finally, push the "Publish my location" button in the same section. Then you can see your pin on the map.

Or you can also publish the same plotting command from the publisher in the "SEND" section on this HTML. See the "Map" section for the command usage.