in src/MQTTDisplay.js [25:162]
function MQTTDisplay(props) {
// ALLOW USER TO SUBSCRIBE TO MQTT TOPICS
const [desiredSubscriptionTopic, setDesiredSubscriptionTopic] = useState("#");
const [desiredPublishTopic, setDesiredPublishTopic] = useState("test");
const [desiredPublishMessage, setDesiredPublishMessage] = useState(`{ "message": "Hello, world!" }`);
const [subscribedTopics, setSubscribedTopics] = useState([]);
// isConnected and mqttClient strictly used for publishing;
// Subscriptions are instead handled in child MQTTSubscription components
const [isConnected, setIsConnected] = useState(false);
const [mqttClient, setMqttClient] = useState();
useEffect(() => {
connectToAwsIot();
},[]); // the empty [] ensures only run once
async function connectToAwsIot() {
// This connection/function is only for publishing messages;
// Subscriptions each get their own child object with separate connections.
// mqtt clients require a unique clientId; we generate one below
var clientId = 'mqtt-explorer-' + (Math.floor((Math.random() * 100000) + 1));
// get credentials and, from them, extract key, secret key, and session token
// Amplify's auth functionality makes this easy for us...
var currentCredentials = await Auth.currentCredentials();
var essentialCredentials = Auth.essentialCredentials(currentCredentials);
// Create an MQTT client
var newMqttClient = AWSIoTData.device({
region: AWSConfiguration.region,
host:AWSConfiguration.host,
clientId: clientId,
protocol: 'wss',
maximumReconnectTimeMs: 8000,
debug: true,
accessKeyId: essentialCredentials.accessKeyId,
secretKey: essentialCredentials.secretAccessKey,
sessionToken: essentialCredentials.sessionToken
});
// On connect, update status
newMqttClient.on('connect', function() {
setIsConnected(true);
console.log('Publisher connected to AWS IoT.');
});
// update state to track mqtt client
setMqttClient(newMqttClient);
}
function removeSubscription(topic) {
// This function is passed to child components
setSubscribedTopics(arrayRemove(subscribedTopics,topic));
}
function handleSubscriptionRequest(e) {
// stop submit button from refreshing entire page
e.preventDefault();
if (subscribedTopics.includes(desiredSubscriptionTopic)) {
console.log(`You are already subscribed to topic '${desiredSubscriptionTopic}'!`);
}
else {
setSubscribedTopics(prevTopics => [...prevTopics, desiredSubscriptionTopic]);
console.log(`Subscribed to topic '${desiredSubscriptionTopic}'!`);
}
}
function handlePublishRequest(e) {
// stop submit button from refreshing entire page
e.preventDefault();
mqttClient.publish(desiredPublishTopic, desiredPublishMessage);
}
return (
<div className="MQTTDisplay">
<div className="thin-border">
<b>Publisher status:</b> {isConnected ? "connected" : "Not connected"}
<br/><br/>
<form onSubmit={handlePublishRequest}>
<b>Publish to Topic:</b>
<br/>
<input
value={desiredPublishTopic}
onChange={e => setDesiredPublishTopic(e.target.value)}
placeholder="IoT Topic"
type="text"
name="desiredPublishTopic"
required
/>
<br/><br/>
<b>Publish Message:</b>
<br/>
<input
value={desiredPublishMessage}
onChange={e => setDesiredPublishMessage(e.target.value)}
placeholder="IoT Topic"
type="text"
name="desiredPublishTopic"
required
/>
<br/><br/>
<button type="submit">Publish</button>
<br/>
</form>
</div>
<br/>
<div className="thin-border">
<form onSubmit={handleSubscriptionRequest}>
<b>Subscribe to Topic:</b>
<br/>
<input
value={desiredSubscriptionTopic}
onChange={e => setDesiredSubscriptionTopic(e.target.value)}
placeholder="IoT Topic"
type="text"
name="desiredSubscriptionTopic"
required
/>
<button type="submit">Subscribe</button>
<br/><br/>
</form>
<b>Subscriptions:</b> <br/>
{subscribedTopics.map(topic => {
return (<MQTTSubscription key={topic} topic={topic} removeSubscription={removeSubscription}/>)
})}
</div>
</div>
);
}