Japanese Nostalgic Message Board (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):

Message Board (Pick up from the subscriber):

This HTML program (re)writes the message into the message board after the above subscriber has received the following command.

write xy msg

x

Column Code: For instance, "a" means the date column because the column is at the leftmost and has the code "a." You have to specify with a row number in practice, like that "a1."

y

Row Number: For instance, "1" means the head line of the table because the head line is numbered one. You have to specify with a column code in practice, like that "a1."

msg

Message Text: You can contain space characters in the body of the text. And if you omit the whole part of the message text, the content in the corresponding cell will be erased.

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 message rewriting command

Publish a message rewriting command on your UNIX terminal with the same topic name and to the same MQTT broker as what you specified in this HTML, like this:
$ echo "write c3 I'll be back soon." | mosquitto_pub -l -h HOSTNAME -t "TOPICNAME"
Then you can see the message you published on the message board.

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