# Lab 1: MQTT using a web client
> KIC, June 2019
This lab aims to offer you a hands-on experience with MQTT. You will perform experiments that will allow you to learn how to "publish" data and "subscribe" to get data.
# Block 0: the client
For the experiment you will use a websocket MQTT client that can be easily accessed via almost any web browser. Just click here:
http://www.hivemq.com/demos/websocket-client/
You'll get something like this:
![HiveMQ websocket client](https://i.imgur.com/fhAXVL7.png)
# Block 1: Connecting to a public broker
There are various public websocket based MQTT brokers, for example:
* broker.mqttdashboard.com port: 8000
* test.mosquitto.org port: 8080
* broker.hivemq.com port: 8000
In this session we will use the one offered by HiveMQ (broker.mqttdashboard.com; port: 8000), which is the one show by default when loading the home web page. The value of the "ClientID" field is randomly generated and can be changed, if you want, manually.
As you can see many more details can be entered:
* the frequency of the Keep-alive timer (typically 60 seconds or 120 seconds)
* the username and password
* the Last-will information
we will see their use later in the class.
Now, just click on the ![](https://i.imgur.com/kBMs7M3.png =100x50) button and your client will be connected to the broker.
# Block 2: some basic exercise
Let's start with an easy one. Click on the ![](https://i.imgur.com/Ws581jr.png =200x50) button of the "Subscriptions" section. You'll get:
![](https://i.imgur.com/usz7HWz.png)
In the ``Topic`` field write ``i/LOVE/Python``, select QoS equal to 0 and then click on the ``Subscribe`` button. The broker will register your subscription request.
![](https://i.imgur.com/WTL9SnH.png)
Now, (1) write the same **identical** text for the topic (i.e., ``i/LOVE/Python``) in the ``Topic`` field of the Publish section and (2) write a text in the ``Message`` field. **The text can be whatever you want** (e.g., ``Lecco is a beautiful city in Italy``). When you are done click on the ``Publish`` button.
You'll get something like the image below... **plus all the messages written by all the other clients in the room.** With just one publish action you actually reached various devices!!
![](https://i.imgur.com/BZlYwqk.png)
### Are topics case-sensitive?
Write now in the ``Topic`` field of the Publish section the text: ``i/love/python``, that is all lowercase, and in the ``Message`` field write a text, whatever you want, and click on the ``Publish`` button.
**What happened? Did you receive any message? Why?**
### Retained messages:
Normally, if a publisher publishes a message to a topic, and *no one is subscribed* to that topic the message is simply discarded by the broker. If you want your broker to remember the last published message, you'll have to use the ``Retain`` option ![](https://i.imgur.com/mHeSv2g.png =100x50)
Only one message is retained per topic. The next message published on that topic replaces the retained message for that topic.
So try the tests indicated below, but **remember now to always subscribe, in each case, after** you published the message as indicated.
To unsubscribe from a topic it is as easy as clicking on the "x" in the Subscriptions section of the web page ![](https://i.imgur.com/UXV6DTw.png =75x75)
Try these tests:
1. Publish a message with whatever topic you want and with the ``Retain`` option **not set**, then subscribe to that topic. What do you get?
1. Publish a message with whatever topic you want and with the ``Retain`` option **set**, then subscribe to that topic. What do you get?
1. Publish ++several (different) messages++ with whatever topic you want and with the ``Retain`` option **set**, then subscribe to that topic. What do you get?
1. Publish a message with whatever topic you want and with the ``Retain`` option **not set** again, then subscribe to that topic. What do you get?
Finally, how do I remove or delete a retained message? You have to publish an **empty** message with the ``Retain`` option **set**. Try it.
# Block 3: a final exercise
You have to form groups of two or three devices. Now, using this websocket MQTT client, create a very basic chat application, where all the messages published from any of the members are received **only by the members** of the group.