So verwenden Sie AWS IoT zum Senden/Empfangen von Nachrichten an/von Webbrowser

Question

Wir versuchen Amazon Web Services Internet der Dinge (AWS IoT) zu verwenden, um Nachrichten von/zu einem Webbrowser zu senden (z. B .: IoT unterstützt JavaScript wir erwarten, dass dies möglich ...

wir haben bei der AWS IoT Dokumentation gesucht, aber fand nur serverseitige Beispiele(die AWS Geheimnisse/Schlüssel aussetzen ...)

Gibt es gute funktionierende Beispiele oder Lernprogramme für die Verwendung von AWS IoT zum Senden/Empfangen von Nachrichten über WebSockets/MQTT im Browser (z. B .: Authentifizierung mit AWS Cognito)? Vielen Dank!

Answer 1

Hier ist ein Beispiel, das einen Cognito-Identitätspool in JS verwendet, um eine Verbindung herzustellen, zu veröffentlichen und auf ein Abonnement zu reagieren.

// Configure Cognito identity pool 
AWS.config.region = 'us-east-1'; 
var credentials = new AWS.CognitoIdentityCredentials({ 
    IdentityPoolId: 'us-east-1:your identity pool guid', 
}); 

// Getting AWS creds from Cognito is async, so we need to drive the rest of the mqtt client initialization in a callback 
credentials.get(function(err) { 
    if(err) { 
     console.log(err); 
     return; 
    } 
    var requestUrl = SigV4Utils.getSignedUrl('wss', 'data.iot.us-east-1.amazonaws.com', '/mqtt', 
     'iotdevicegateway', 'us-east-1', 
     credentials.accessKeyId, credentials.secretAccessKey, credentials.sessionToken); 
    initClient(requestUrl); 
}); 

function init() { 
    // do setup stuff 
} 

// Connect the client, subscribe to the drawing topic, and publish a "hey I connected" message 
function initClient(requestUrl) { 
    var clientId = String(Math.random()).replace('.', ''); 
    var client = new Paho.MQTT.Client(requestUrl, clientId); 
    var connectOptions = { 
     onSuccess: function() { 
      console.log('connected'); 

      // subscribe to the drawing 
      client.subscribe("your/mqtt/topic"); 

      // publish a lifecycle event 
      message = new Paho.MQTT.Message('{"id":"' + credentials.identityId + '"}'); 
      message.destinationName = 'your/mqtt/topic'; 
      console.log(message); 
      client.send(message); 
     }, 
     useSSL: true, 
     timeout: 3, 
     mqttVersion: 4, 
     onFailure: function() { 
      console.error('connect failed'); 
     } 
    }; 
    client.connect(connectOptions); 

    client.onMessageArrived = function (message) { 

     try { 
      console.log("msg arrived: " + message.payloadString); 
     } catch (e) { 
      console.log("error! " + e); 
     } 

    }; 
} 

Documentation for the credentials.get call, here

Denken Sie daran, Ihre IAM Rolle für Ihre Anmeldung/Publishing als auch zu genehmigen. Hier ist ein Beispiel:

{ 
    "Version": "2012-10-17", 
    "Statement": [ 
     { 
      "Effect": "Allow", 
      "Action": [ 
       "iot:Connect" 
      ], 
      "Resource": "*" 
     }, 
     { 
      "Effect": "Allow", 
      "Action": "iot:Receive", 
      "Resource": "*" 
     }, 
     { 
      "Effect": "Allow", 
      "Action": "iot:Subscribe", 
      "Resource": [ 
       "arn:aws:iot:us-east-1::your/mqtt/topic" 
      ] 
     }, 
     { 
      "Effect": "Allow", 
      "Action": "iot:Publish", 
      "Resource": [ 
       "arn:aws:iot:us-east-1::your/mqtt/topic" 
      ] 
     } 
    ] 
} 

Answer 2

Falls jemand anderes nach einer Lösung gesucht: here's a tutorial, die über eine einfache Chat-Anwendung zeigt, wie Echtzeit-Updates in ein ReactJS Front-End auf AWS IOT mit Serverless und Websockets zu bekommen. Der Quellcode des Tutorials ist verfügbar on Github.