進行状況の追跡を始めよう
Trailhead のホーム
Trailhead のホーム

プラットフォームイベントへの登録

操作内容

このステップでは、Lightning コンソールアプリケーションを拡張し、 Lightning コンポーネントの lightning:empApi を追加してプラットフォームイベントに登録します。これによって、アプリケーションがインスタント通知を受信できるようになります。その後、Heroku アプリケーションを使用してアプリケーションをテストできます。

次のことを実行します。

  • Lightning コンポーネントの lightning:empApi を追加します。

  • インスタント通知アプリケーションを更新して、動的なものにする。

  • 提供されている Heroku アプリケーションを使用して Lightning コンソールアプリケーションをテストする。

コンポーネントマークアップの更新

  1. 開発者コンソールで、[File (ファイル)] > [Open Lightning Resources (Lightning リソースを開く)] をクリックします。

  2. c:notificationConsole 項目を展開して [Component (コンポーネント)] を選択します。

  3. [Open Selected (選択対象を開く)] をクリックします。

  4. aura:componentルートタグの直下に次のマークアップを追加します。

  <lightning:empApi aura:id="empApi"/>
  <aura:attribute name="channel" type="String" default="/event/Notification__e"/>
  <aura:attribute name="subscription" type="Map"/>

コードのポイント:

  • 最初の行は、Lightning コンポーネントの lightning:empApi を notificationConsole コンポーネントに埋め込みます。empApi コンポーネントは、CometD を使用してプラットフォームイベントへの登録および登録解除を行うメソッドを提供します。

  • チャネル属性は、Notification__e イベントへの登録に使用するチャネルを定義します。

  • 登録属性には、empApi.subscribe() メソッドに必要な登録オブジェクトが保持されています。このオブジェクトは後の登録解除に使用されます。

  1. ファイルを保存します。

コンポーネントヘルパーの更新

  1. 開発者コンソールの右側にある [Helper (ヘルパー)] をクリックします。

  2. すべてのコードを次のコードで置き換えます。

({
  // Client-side function that invokes the subscribe method on the
  // empApi component.
  subscribe: function (component, event, helper) {
    // Get the empApi component.
    const empApi = component.find('empApi');
    // Get the channel from the attribute.
    const channel = component.get('v.channel');
    // Subscription option to get only new events.
    const replayId = -1;
    // Callback function to be passed in the subscribe call.
    // After an event is received, this callback prints the event
    // payload to the console. A helper method displays the message
    // in the console app.
    const callback = function (message) {
      console.log('Event Received : ' + JSON.stringify(message));
      helper.onReceiveNotification(component, message);
    };
    // Subscribe to the channel and save the returned subscription object.
    empApi.subscribe(channel, replayId, $A.getCallback(callback)).then($A.getCallback(function (newSubscription) {
      console.log('Subscribed to channel ' + channel);
      component.set('v.subscription', newSubscription);
    }));
  },
  // Client-side function that invokes the unsubscribe method on the
  // empApi component.
  unsubscribe: function (component, event, helper) {
    // Get the empApi component.
    const empApi = component.find('empApi');
    // Get the channel from the component attribute.
    const channel = component.get('v.subscription').channel;
    // Callback function to be passed in the unsubscribe call.
    const callback = function (message) {
      console.log('Unsubscribed from channel ' + message.channel);
    };
    // Unsubscribe from the channel using the subscription object.        
    empApi.unsubscribe(component.get('v.subscription'), $A.getCallback(callback));
  },
  // Client-side function that displays the platform event message
  // in the console app and displays a toast if not muted.
  onReceiveNotification: function (component, message) {
    // Extract notification from platform event
    const newNotification = {
      time: $A.localizationService.formatDateTime(
        message.data.payload.CreatedDate, 'HH:mm'),
      message: message.data.payload.Message__c
    };
    // Save notification in history
    const notifications = component.get('v.notifications');
    notifications.push(newNotification);
    component.set('v.notifications', notifications);
    // Display notification in a toast
    this.displayToast(component, 'info', newNotification.message);
  },
  // Displays the given toast message.
  displayToast: function (component, type, message) {
    const toastEvent = $A.get('e.force:showToast');
    toastEvent.setParams({
      type: type,
      message: message
    });
    toastEvent.fire();
  }
})

コードのポイント:

次の 3 つの新しい関数を追加しました。

  • subscribe — 共有 CometD 接続を使用してプラットフォームイベントチャネルに登録します。

  • unsubscribe — プラットフォームイベントチャネルから登録解除します。

  • onReceiveNotification — プラットフォームイベントメッセージが受信されると、この関数がコールされます。この関数は、プラットフォームイベントデータをフォーマットし、それを通知履歴に追加し、通知がミュートになっていなければトーストを表示します。

  1. ファイルを保存します。

コンポーネントコントローラの更新

  1. 開発者コンソールの右側にある [Controller (コントローラ)] をクリックします。

  2. コンテンツ全体を次のコードに置き換えます。

({
  // Called when the component is initialized.
  // Subscribes to the channel and displays a toast message.
  // Specifies an error handler function for empApi   
  onInit: function (component, event, helper) {
    component.set('v.subscription', null);
    component.set('v.notifications', []);
    // Get empApi component.
    const empApi = component.find('empApi');
    // Define an error handler function that prints the error to the console.
    const errorHandler = function (message) {
      console.error('Received error ', JSON.stringify(message));
    };
    // Register empApi error listener and pass in the error handler function.
    empApi.onError($A.getCallback(errorHandler));
    helper.subscribe(component, event, helper);
    helper.displayToast(component, 'success', 'Ready to receive notifications.');
  },

  // Clear notifications in console app.
  onClear: function (component, event, helper) {
    component.set('v.notifications', []);
  },

  // Mute toast messages and unsubscribe/resubscribe to channel.
  onToggleMute: function (component, event, helper) {
    const isMuted = !(component.get('v.isMuted'));
    component.set('v.isMuted', isMuted);
    if (isMuted) {
      helper.unsubscribe(component, event, helper);
    } else {
      helper.subscribe(component, event, helper);
    }
    helper.displayToast(component, 'success', 'Notifications ' +
      ((isMuted) ? 'muted' : 'unmuted') + '.');
  }
})

コードのポイント:

  • onInit 関数は、ヘルパー subscribe() 関数をコールしてプラットフォームイベントチャネルに登録します。次に、この関数は、アプリケーションが通知を受信できる状態になったことを示すトーストメッセージを表示します。

  • アプリケーションがミュートされると onToggleMute() 関数によって登録が停止され、トーストも表示されなくなります。アプリケーションのミュートが解除されると、登録が再開され、コンソールとトーストに新しいメッセージが表示されます。

  1. ファイルを保存して、開発者コンソールを閉じます。
  1. セールスアプリケーションに戻り、ブラウザウィンドウを更新して、通知コンソールで行った更新を読み込みます。

インスタント通知アプリケーションのテスト

インスタント通知アプリケーションをテストするには、外部アプリケーションの Bear Watch Heroku アプリケーションを使用します。

  1. Bear Watch Heroku アプリケーションを開きます。

  2. [Log In (ログイン)] をクリックします。

  3. Bear Watch アプリケーションにアクセスを許可するように促すメッセージが表示されたら、[Allow (許可)] をクリックします。

Bear Watch アプリケーションへのアクセス許可プロンプト

  1. ブラウザウィンドウのサイズと位置を調整して、Salesforce のセールスアプリケーションと Bear Watch アプリケーションが同時に表示されるようにします。新しい通知を受信するには、セールスアプリケーションのホームページを更新する必要がある場合があります。
  2. [Broadcast bear warning (クマに関する警告をブロードキャスト)] をクリックします。

「Watch out, bear spotted! (注意してください。クマが目撃されました!)」という通知が Salesforce ウィンドウに表示されます。

Bear Watch Heroku アプリケーションから通知が送信され、Salesforce の通知コンソールで受信されていることを示す画像

retargeting