Send MQTT Messages in 10 Minutes Using HiveMQ Cloud Web Client
Tags: mqtt, iot
Published: 2023-02-14 23:00:00

** In 2022, we introduced a web client to help you easily connect to the HiveMQ Cloud broker. This blog will show you how to get started with MQTT project using this functionality and send messages in less than 10 minutes.**

## The HiveMQ Web Client

An [MQTT client](https://www.hivemq.com/blog/mqtt-essentials-part-3-client-broker-connection-establishment/) is any device (from a microcontroller to a full-fledged server) that runs an MQTT library and connects to an MQTT broker over a network. The HiveMQ Cloud web client is a ready-to-use client within the HiveMQ Cloud user interface that helps you connect to your devices easily with the HiveMQ Cloud Broker.

## How to Access the Web Client?

Once you log-in to your HiveMQ cloud and select the cluster of your choice, you can view the Web Client option on the top menu bar, as seen in the image below. You can access it by simply clicking on the navigation item.


![Menu bar showing the Web Client option](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hr29ypd8jzf8evjat2wj.png)

## Connecting to MQTT Broker / Cluster

To securely connect to the client, you must use your credentials, i.e., a username and a password. These credentials are used to allows MQTT clients access to your MQTT broker. Manage your credentials inside the HiveMQ Cloud console under the, “Access Management.”

If you already have credentials, simply enter them and click on the “Connect Client” button.

![Client connection settings GUI](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/89qy6n2lud4zkjjqc6kn.png)

If you don’t have credentials, no worries; you can create your credentials in a single click using the “Connect With Generated Credentials” button. Once you click it, you will get a pop-up sharing the credentials. Copy and save this for later use.

![Auto connect Web Client GUI Pop-up](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5my6w8d16acb0ilsrt52.png)


Clicking on the create and connect button, automatically creates credentials and connects the client to the broker.

Once connected, you will see “Web-Client Connected” displayed in green below the connection setting, as seen in the image below.

![Web Client connected as shown in the GUI](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e8mmkj7j2rso3hdsn40d.png)

## Send Your First Message

Now that you have successfully connected the web client to the HiveMQ Cloud broker, you are ready to send your first message.

First, subscribe to a topic you want to receive messages from. You can use a specific topic name as displayed in the screenshot, or you can subscribe to all topics, using the wildcard “#”.

You can learn more about [MQTT Topics, wildcards, and some best practices here](https://www.hivemq.com/blog/mqtt-essentials-part-5-mqtt-topics-best-practices/).

Next, select the [quality of service (QoS)](https://www.hivemq.com/blog/mqtt-essentials-part-6-mqtt-quality-of-service-levels/) you want to receive messages with. If you do not have a specific use case where you need a higher QoS, you can keep the default QoS 0 setting.

As you can see in the image, we create a topic subscription:

```
my/test/topic
```
Once we hit the subscribe button, we can view the subscribed topic below as a list.

![Subscribing to a topic using the Web Client GUI](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oh8ehy9sfha5gwxhh35l.png)


To receive messages, we need to publish a message with this topic. Make sure to use a topic that matches the subscription you defined earlier.

```
my/test/topic
```

Your message can contain any information you like. In our case, we wrote a simple “Hello,” as seen in the image below. But you can also send a JSON payload, or any other format that suits your needs.

![Publishing messages using the Web Client GUI](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/njhc9dxq6xlx9aqb8ka1.png)

Once complete, press the publish button. The message will be published to any client connected to your broker that has subscribed to this topic.

You can view this message inside the web client with the corresponding topic, QoS, and timestamp below the publish button.

![Publish button publishes any message contained in the topic](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h824u53dvji9q4h4nnow.png)


You can also connect from any other device to your HiveMQ Cloud cluster using the same credentials and use it to subscribe to topics from the Web Client. In our case, we can use MQTT CLI (Command Line Interface) to receive messages sent using GUI. To learn more about MQTT CLI, please check out [HiveMQ Cloud getting started with MQTT CLI section](https://console.hivemq.cloud/clients/mqtt-cli?uuid=97a20e736c554f6e8fdd15840f235a76&__hstc=184124345.9ec222da250c0a2391a8f1d5693d4452.1616495678251.1676450556558.1676452777609.2350&__hssc=184124345.2.1676452777609&__hsfp=920285691).

![The screenshot shows MQTT CLI on a local device subscribing to same topic as the web client](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iy4ivax97gyq13vdsfb3.png)

If you’ve followed these steps, you should now be able to connect your web client to your HiveMQ Cloud cluster and use it to publish and receive messages.

## Get Started

To access the HiveMQ Cloud Web Client, all you need to do is sign up for HiveMQ Cloud.

[Sign-up for HiveMQ Cloud](https://console.hivemq.cloud/?utm_source=HiveMQ+Cloud+Web+Client+Blog+on Dev+to&utm_medium=CTA+Button&utm_campaign=HiveMQ+Cloud&__hstc=184124345.9ec222da250c0a2391a8f1d5693d4452.1616495678251.1676450556558.1676452777609.2350&__hssc=184124345.2.1676452777609&__hsfp=920285691)

Were you able to successful follow these steps to connect your web client to your HiveMQ Cloud cluster? Did you have any problems along the way? Did you make/take any alternate steps?
Let us know your thoughts in the comments.