Tutorial: How to use MQTT by adding one block to your application

Summary. This tutorial shows how to use MQTT, a machine-to-machine connectivity protocol, for an existing application by adding the library block Robust MQTT. We will be using the Selfie Basic application as an example and publish a picture via MQTT.

Prerequisite: You must have downloaded the block Selfie Basic.

Step 1: Create your own project

As you are going to extend an imported system, first make your own project and duplicate the System block Selfie Basic:

  • Create a new project, by clicking this icon:

New Project Icon

  • Choose a name, e.g. org.bitreactive.selfie.with.mqtt

Choose Project Name

  • Right click the block Selfie Basic and choose Duplicate, then select your new project as target project

Duplicate Selfie Basic

Now you have your own block within your own project to play with.

Step 2: Add the block Robust MQTT to your application

  • If you do not have the MQTT library, you need to import this first. You will find it in team Reference Systems:

Import MQTT Library

  • Now you are ready to use blocks from the MQTT library. Drag and drop the Robust MQTT from the library MQTT into your application. You may adjust its size and position as well as the orientation and position of its pin to fit your application. The block is now in your application, however it is not connected yet.

Step 3: Integrate the block into the existing application

  • When using a block it is useful to first have a look at its contract. The contract of Robust MQTT looks like this:

Contract Robust MQTT

  • The pin init requires data of type Parameters. Add an operation providing Parameters to specify the MQTT broker which will be used to initialise Robust MQTT. The pin publish requires data of type MQTTMessage Add another operation to transform the BufferedImage into a MQTTMessage.

The java file of your block would then look like this:

package com.bitreactive.tutorial.selfie.mqtt.selfiewithmqtt.component;

import java.awt.image.BufferedImage;
import java.io.ByteArrayOutputStream;
import java.io.IOException;

import javax.imageio.ImageIO;

import com.bitreactive.library.mqtt.MQTTConfigParam;
import com.bitreactive.library.mqtt.MQTTMessage;
import com.bitreactive.library.mqtt.robustmqtt.RobustMQTT.Parameters;

import no.ntnu.item.arctis.runtime.Block;

public class Component extends Block {

	public String getReady() {
		return "Get ready! Check your hair! The picture will be taken after the next beep.";

	public String beep() {

	public Parameters init() {
		MQTTConfigParam p = new MQTTConfigParam("blocks2.bitreactive.com");    
		return new Parameters(p, 2);

	public MQTTMessage convertImage(BufferedImage bimage) {
		ByteArrayOutputStream outputStream = new ByteArrayOutputStream();
		try {
			ImageIO.write(bimage, "jpg", outputStream);
			byte[] imageBytes = outputStream.toByteArray();
			logDebug("sending bytes: " + imageBytes.length);
			MQTTMessage m = new MQTTMessage(imageBytes, "image");
			return m;
		} catch(IOException e) {
			return null;
  • Connect everything. Use analysis to make sure that your new system does not contain any issues. It will look something like this:

Alt text

  • Robust MQTT is initialised, when block Photo emits a BufferedImage via pin photo. When Robust MQTT is ready, the Buffered Image is converted into a MQTTMessage, which is published to the MQTT broker. The zero timer is added because Robust MQTT can handle data via pin publish after it has emitted ready, not at the same time.

  • As the contract of Robust MQTT shows that it has to be stopped to terminate, we do so before terminating the application traversing the pins stop / stopped.

Step 4: Build and Run the Application

Before you can start the application, you need to build it's code, which generates an executable project ready to run.

Step 5: Receiving data from the MQTT broker

  • You have added Robust MQTT to publish the image to an MQTT broker.

  • The image can be received from any other machine having subscribed to the “image” messages. To do this it just requires a small application running on that machine. In Reactive Blocks this small application would look like this:

Alt text

Here as well Robust MQTT hast to be initialised to provide the broker. In addition we are going to subscribe to the topic we have published the image to:

public com.bitreactive.library.mqtt.robustmqtt.RobustMQTT.Parameters init() {
	MQTTConfigParam p = new MQTTConfigParam("blocks2.bitreactive.com");
	return new Parameters(p, 2);

The arriving MQTTMessage contains the image taken, which is easy to extract:

public BufferedImage getImage(MQTTMessage m) {
	BufferedImage image;
	try {
		image = ImageIO.read(new ByteArrayInputStream(m.getPayload()));
		return image;	
	} catch (IOException e) {
		return null;

In this example application the image is displayed once it has been received.