Realtime Chart (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):

Chart (Pick up from the subscriber):

Data will be plotted on the chart when the above subscriber receives it if the data is formatted like the following.

plot n1 n2

n1

for Dataset A (real-number, -10<n1<10)

n2

for Dataset B (real-number, -10<n2<10)

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 a data plotting command

Publish a data plotting command on your UNIX terminal like this:
$ echo "plot 3.14 -2.718" | mosquitto_pub -l -h HOSTNAME -t "TOPICNAME"
("TOPIC" is the topic name you already decided on. And you have to specify the same MQTT broker instead of "localhost" if you are connecting to a different broker from what you specified on this HTML control panel.) Then you can see new blue and pink plots on the chart, which are drawn by the command you published.

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