MQTT – ConnectsIoT Devices &Mobile App

Marvin HengTwitter : @hmhengBlog : http://hmheng.pinsland.comGithub: https://github.com/hmheng

Pre-requisites• Created a Xamarin mobile app

Mobile App that Connects IoT Device via MQTT1. First, we need to create a Xamarin Cross Platform Mobile App. Don’t have one yet? Click to learn how to create one!

Mobile App that Connects IoT Device via MQTT2. Secondly, we need to add a NuGet Packages - MQTTnet, right click Solution in the Solution Explorer -> Manage NuGet Packages for Solution…

2b

2a

Mobile App that Connects IoT Device via MQTT3. Let’s search MQTTnet and install it to all the projects.

3b3a

3c

Mobile App that Connects IoT Device via MQTT4. Now, we need to add some components to MainPage.xaml as specified below.

4b4a

4c

4

Mobile App that Connects IoT Device via MQTT5. After that, click the code behind – MainPage.xaml.cs and add the following usings.

4b4a

4c

Mobile App that Connects IoT Device via MQTT6. Now, replace the constructor as below and declare a mqttClient.

4b4a

4c

Mobile App that Connects IoT Device via MQTT7. Create an Async function for handling BtnConnect’s click event with the following code.

4b4a

4c

Mobile App that Connects IoT Device via MQTT8. Create an Async function to send the message to MQTT Broker/Server whenBtnSend is being clicked.

4b4a

4c

Mobile App that Connects IoT Device via MQTT9. Create an Async function for handling connected event when MqttClient is successfully connected with MQTT Server.

4b4a

4c

Mobile App that Connects IoT Device via MQTT10. Lastly, let’s create a function to handle the message it received from Broker.

4b4a

4c

Mobile App that Connects IoT Device via MQTT11. Finally, let’s compile and run it on your mobile device. Your MQTT Broker should be able to receive the message for the topic it subscribed to.

Desktop MQTT BrokerClick to Get Source Code for Testing

Awesome!Your Mobile App is Now Able to Connect IoT Devices via the Most Popular Protocol - MQTT

MQTT – ConnectsIoT Devices &Mobile App

Marvin HengTwitter : @hmhengBlog : http://hmheng.pinsland.comGithub: https://github.com/hmheng