I recently started working with React Native and AWS IoT for a new project. Being a hardcore iOS developer, this change was a little hard to take on. Luckily I had a team of solid React Native developers to guide me.
My part of the project was not building the UI/UX or API integration, but baking real time communication using MQTT! for the app.
The concept of MQTT may seem familiar to you if you’ve already worked with Firebase Cloud Messaging.
If not, no worries … this post isn’t going to help you much either … just kidding :)
Publisher: There are one or more publisher.Subscriber: There are one or more subscribers.
A publisher can create and publish to multiple Channels (also called Topics).
A Subscriber can listen to multiple channels and fetch the real time published message. The message that is published is not stored anywhere unless you design your own MQTT broker.
Consider the MQTT broker as a box. Publisher pushes message into the box. Subscriber can connect to the box with the corresponding Channel name(Topic) and receive the message.
The most common convention to name a channel is using the pattern : “Topic/Subtopic”.
Step 1: You need an AWS account.
Step 2: Create a Cognito pool. This is for authentication purpose. If you don’t know how to create a Cognito pool check here.
Step 3: When you are in your AWS home page search for “IoT Core” and visit the AWS IOT dashboard. If I were you I’d bookmark this page :)
Step 4: To setup MQTT you will need the following:
1. The AWS Cognito pool Id2. A Policy3. Your AWS IoT Specific IoT endpoint url.
You already have a Cognito pool id from where you created the Cognito pool. If not create one. This one is Generic and can be used for all kinds of AWS Authentication (I believe … but hey, I’m no AWS wizard).
The detailed instructions for creating a policy can be found here. AWS IoT policies are JSON documents. They follow the same conventions as IAM policies. AWS IoT supports named policies so many identities can reference the same policy document. Named policies are versioned so they can be easily rolled back. To know more click check here. After creating the policy, click on it, inside your policy’s overview tap on the “Edit policy document” button. and replace the JSON with:
{
"Version": "2012-10-17",
"Statement": [
{
"Effect": "Allow",
"Action": "iot:Connect",
"Resource": "*"
},
{
"Effect": "Allow",
"Action": [
"iot:Publish",
"iot:Subscribe",
"iot:Receive"
],
"Resource": "*"
}
]
}
Find your custom endpoint in the AWS IoT console. (From the dashboard, in the left navigation pane, choose Manage, and then choose Things. Select the box representing your button to show its details page. On the details page, in the left navigation pane, choose Interact and look for the HTTPS section, near the top.) Your endpoint will look something like the following:
ABCDEFG1234567.iot.us-east-2.amazonaws.com
where ABCDEFG1234567
is the subdomain and us-east-2
is the region.
React Native has no native components available for our purpose through their regular packages. So I had to look for third party packages out there on the wild wild internet.
One such package that I came across was react-native-mqtt. In this repo they recommend us to use paho.mqtt.javascript due to reasons that are not solved for a very long time! Nevertheless both packages where useless to me (as I am new to React Native and desperate to make MQTT work quickly), these packages didn’t run well with our AWS IoT usage.
Then came the good times when I found some packages which uses AWS. The packages I came across are:
I also found some interesting reading here.
I was testing all these packages on my iPhone 6+ … and all of them failed! But they did give me good knowledge of how AWS IoT and MQTT works.
A product development and growth expert, helping founders and startups build and grow their products at lightning speed with a track record of success. Apart from work, I love to network & Travel.
How To Choose The Best Rendering Strategy in Next.js
Over the years, the way we build and deliver websites has changed a lot. We started with simple static pages that were easy to load but not very interactive. Then came dynamic rendering, where servers built pages on the fly, ...
A Guide To User Behavior Testing using RTL (React Testing Library)
React Testing Library (RTL) derives from best practices in software testing and builds on top of them. While Writing a good test case is crucial for any testing framework, RTL emphasizes a particular approach: it tests behavi...
Redirection Loops: A Beginner’s Guide
Ever clicked a link only to find your browser stuck in an endless loop? Welcome to the world of redirection loops. These pesky web gremlins can frustrate users and harm your site's performance. In this beginner's guide, we'll...