MQTTメッセージでLambdaからブラウザを更新する 〜Vue+Amplify編

1 はじめに

CX事業本部の平内（SIN）です。

以前、下記のような記事を書きました。 こちらは、ブラウザ上で、aws-iot-device-sdkを使用して、AWS IoT Coreのメッセージブローカーをsubscribeし、特定のTopicが到着した時点で、ブラウザを更新するものでした。

やってることは、全く同じなのですが、今回は、これをAWS Amplify（以下、Amplify）で作成してみました。使用したウェブフレームワークは、Veu.jsです。

Amplifyでは、ライブラリAWSIoTProviderを使用することで、簡単にPub/Subが可能です。
Amplify Libraries AWSIoTProvider

また、権限については、AmplifyにAuthカテゴリを追加することで、CognitoのFederated Identitiesが利用可能なので、未認証IDを許可して、特定のトピックをSubscribeするだけのポリシーを追加しています。

「データ更新等に伴い表示を書き換える」というような要件だと、Amplify+AppSyncでGraphQLのSubscriptionで書くと、綺麗に仕上がりそうですが、今回は、あくまでMQTTと飛ばすことを目的として作業していることを、ご了承ください。

2 Vue.js

使用したVue CLIは、Ver 4.5.12 でした。

% vue --version
@vue/cli 4.5.12

プリセットにデフォルトの Default ([Vue 2] babel, eslint) を指定してプロジェクト()を生成しています。

% vue create browser_refresh_sample
? Please pick a preset: (Use arrow keys)
❯ Default ([Vue 2] babel, eslint)
  Default (Vue 3 Preview) ([Vue 3] babel, eslint)
  Manually select features

・・・略・・・

?  Successfully created project browser_refresh_sample.
?  Get started with the following commands:

 $ cd browser_refresh_sample
 $ yarn serve

この後、プロジェクトのフォルダ内で作業進めます。

% cd browser_refresh_sample

3 Amplify

amplifyの方は、4.50.0となっています。

% amplify --version
4.50.0

amplifyの初期化の方も、全てデフォルト設定です。

% amplify init
? Enter a name for the project browserrefreshsample
? Initialize the project with the above configuration? Yes
Using default provider  awscloudformation
? Please choose the profile you want to use developer

・・・略・・・

Your project has been successfully initialized and connected to the cloud!

・・・略・・・

続いて、authカテゴリを追加してpushしました。

% amplify add auth
❯ Default configuration
❯ Username
❯ No, I am done.

% amplify push

・・・略・・・

✔ All resources are updated in the cloud

% amplify status

Current Environment: dev

| Category | Resource name                | Operation | Provider plugin   |
| -------- | ---------------------------- | --------- | ----------------- |
| Auth     | browserrefreshsample0ec00635 | No Change | awscloudformation |

Cloud Formationのコンソールを確認するとベースのスタックと、Authカテゴリのスタックが作成されていることを確認できます。

4 ポリシー

Authカテゴリで追加されたスタックのリソース情報からIdentittyPoolのリンクを辿り、CognitoのIDプールの画面を開きます。

「認証されていないIDに対してアクセスを有効にする」にチェックを入れます。

未認証時に適用されるロールに、必要最小限の権限付与ということで、クライアントID、browser_refresh_sample_idからの接続と、トピックbrowser_refresh_sample_topicのサブスクライブと受信だけを許可しています。

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Action": [
                "iot:Connect"
            ],
            "Resource": [
                "arn:aws:iot:ap-northeast-1:*:client/browser_refresh_sample_id"
            ]
        },
        {
            "Effect": "Allow",
            "Action": [
                "iot:Subscribe"
            ],
            "Resource": [
                "arn:aws:iot:ap-northeast-1:*:topicfilter/browser_refresh_sample_topic"
            ]
        },
        {
            "Effect": "Allow",
            "Action": [
                "iot:Receive"
            ],
            "Resource": [
                "arn:aws:iot:ap-northeast-1:*:topic/browser_refresh_sample_topic"
            ]
        }
    ]
}

5 コード

最初に、ライブラリAWSIoTProviderを使用できるように、モジュールをインストールしています。

npm i aws-amplify @aws-amplify/pubsub
npm i core-js@latest

Vue.jsのApp.vueは、下記のように書き換えました。mounted: でMQTTをサブスクライブしています。

<template>
  <div id="app">
      {{ time }}
  </div>
</template>

<script>

import awsconfig from './aws-exports'
Amplify.configure(awsconfig)
import Amplify, { PubSub } from 'aws-amplify';
import { AWSIoTProvider } from '@aws-amplify/pubsub/lib/Providers';

Amplify.addPluggable(new AWSIoTProvider({
  aws_pubsub_region: 'ap-northeast-1',
  aws_pubsub_endpoint: 'wss://xxxxxxxxxxxx-ats.iot.ap-northeast-1.amazonaws.com/mqtt',
  clientId: 'browser_refresh_sample_id'
}));

export default {
  name: 'App',
  data: () => {
    return {
      time: "" 
    }
  },
  mounted: async function () {
    PubSub.subscribe('browser_refresh_sample_topic').subscribe({
      next: data => {
        console.log('Message received', data)
        //location.reload()
      },
      error: error => console.error(error),
      close: () => console.log('Done'),
    });
  },
  created : function(){
    let currentdate = new Date()
    this.time = currentdate.getHours() + ':' + currentdate.getMinutes() + ':' + currentdate.getSeconds() + ' update.'
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Topicにメッセージを送ってみると、ブラウザ側で反応していることが確認できます。

Topicが受信できていることを確認できたら、location.reload()を有効にして、トピック到着で、ブラウザをリロードします。

mounted: async function () {
    PubSub.subscribe('browser_refresh_sample_topic').subscribe({
      next: data => {
        console.log('Message received', data)
        // ↓この行を有効にする
        location.reload()
      },
      error: error => console.error(error),
      close: () => console.log('Done'),
    });
  },

6 Lambda

Topicを送信するために作成したLambdaは、以下の通りです。Lambdaの権限に、IoT CoreへのPublishの権限追加が必要です。

exports.handler = async (event) => {
    // TODO implement
    const endpoint = 'xxxxxxxxxxxx-ats.iot.ap-northeast-1.amazonaws.com';
    const topic = "browser_refresh_sample_topic"
    const aws = require('aws-sdk');
    const region = 'ap-northeast-1';

    var iotdata = new aws.IotData({
        endpoint: endpoint,
        region: region
    });
    var params = {
        topic: topic,
        payload: '{"action":"refresh"}',
        qos: 0
    };
    let result = await iotdata.publish(params).promise();
    console.log(result);
};

7 最後に

今回は、MQTTのPub/SubでLambdaとブラウザの連携を確認してみました。最初に、話した通り、情報の更新に伴う、画面の更新であれば、MQTTをわざわざ利用する必要なありませんが、MQTTでも、色々連携できれば、応用範囲が広がるように感じています。