Send MQTT Messages in 10 Minutes Using HiveMQ Cloud Web Client

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 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.

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.

* *​​​​​​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.

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.

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.

Next, select the quality of service (QoS) 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.

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.

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.

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.

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.

Were you able to successfully follow these steps to connect your web client to your HiveMQ Cloud cluster? Did you face any problems along the way? Did you make/take any alternate steps? Let us know your thoughts in the comments or using the in-product feedback.

About Shashank Sharma

Shashank Sharma is a product marketing manager at HiveMQ. He is passionate about technology and enabling developer-centric workflows. He has previous experience in application software tooling, autonomous driving, and numerical computing.

Contact Shashank

About Andrej Schujkow

Andrej is Senior Frontend Engineer at HiveMQ.

Contact Andrej