Hello, world! (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):

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. Then the name of the button will change to "NOW SUBSCRIBING" when ready to subscrube. And also, type the following command on your UNIX terminal.
$ mosquitto_sub -h localhost -t "TOPIC"
"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.

4) Publish a message

Let's try to send messages between the web browser and thr UNIX terminal each other, by the following ways.

UNIX to Web

Type the following command on your UNIX terminal.
$ echo "Hello, world!" | mosquitto_pub -l -h localhost -t "TOPIC"
("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.) You must be able to see the "Hello, world!" message in the "RECV" section.

Web to UNIX

Write the topic name you already decided on into the "topicname" field in the "SEND" section. And also, write the "Hello, world!" message into the message field under the "topicname." Then, push the "Publish" button. So, you must be able to see the same message on your UNIX terminal!