プラットフォームイベントに登録する

メモ

日本語で受講されている方へ
Challenge は日本語の Trailhead Playground で開始し、かっこ内の翻訳を参照しながら進めていってください。Challenge での評価は英語データを対象に行われるため、英語の値のみをコピーして貼り付けるようにしてください。日本語の組織で Challenge が不合格だった場合は、(1) この手順に従って [Locale (地域)] を [United States (米国)] に切り替え、(2) [Language (言語)] を [English (英語)] に切り替えてから、(3) [Check Challenge (Challenge を確認)] ボタンをクリックしてみることをお勧めします。

翻訳版 Trailhead を活用する方法の詳細は、自分の言語の Trailhead バッジを参照してください。

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

コンポーネントマークアップを更新する

1. VS Code で notificationConsole.js を編集します。
2. ファイルの先頭に次の行を追加して、lightning/empApi モジュールをインポートします。

   import { subscribe, unsubscribe, onError } from "lightning/empApi";

   lightning/empApi モジュールは、プラットフォームイベントと変更データキャプチャイベントへの登録および登録解除を行うメソッドを提供します。
3. 次のコードを使用して新しいクラスメソッドを追加します (最後の閉じ中括弧の前に追加できます)。

   handleNotificationEvent(event) {
     console.dir(event);
     // Parse event data
     const id = event.data.event.replayId;
     const message = event.data.payload.Message__c;
     const utcDate = new Date(event.data.payload.CreatedDate);
     const time = `${utcDate.getMinutes()}:${utcDate.getSeconds()}`;
     // Add notification to view
     const notification = {
       id,
       message,
       time
     };
     this.notifications.push(notification);
     // Show notification message as a toast
     this.dispatchEvent(
       new ShowToastEvent({
         variant: "info",
         title: message
       })
     );
   }

   この handleNotificationEvent メソッドを使用して、カスタム通知プラットフォームイベントを解析し、ユーザーインターフェースを更新します。
4. connectedCallback() の内容を次のコードに置き換えます。

   // Configure default error handler for the EMP API
   onError((error) => {
     this.dispatchEvent(
       new ShowToastEvent({
         variant: "error",
         title: "EMP API Error",
         message: "Check your browser's developer console for more details."
       })
     );
     console.log("EMP API error reported by server: ", JSON.stringify(error));
   });
   // Subscribe to our notification platform event with the EMP API
   // listen to all new events
   // and handle them with handleNotificationEvent
   this.subscription = await subscribe(
     "/event/Notification__e",
     -1,
     (event) => this.handleNotificationEvent(event)
   );
   // Display a toast to inform the user that we're ready to receive notifications
   this.dispatchEvent(
     new ShowToastEvent({
       variant: "success",
       title: "Ready to receive notifications"
     })
   );

   コードのポイント:
   • EMP API のデフォルトエラーハンドラーは、empApi.onError() メソッドを使用して作成されています。そのため、ストリーミングエラーをトースト通知としてだけでなく、ブラウザーの開発者コンソールでもレポートできます。
   • 非同期empApi.subscribe() メソッドをコールして、すべての新しい Notification__e イベントに登録します。
   • subscription クラス属性の登録情報は、後で登録解除に使用できるように保存されます。
5. 次のコードを使用して新しいクラスメソッドを (最後の閉じ中括弧の前に) 追加します。

   disconnectedCallback() {
     // Unsubscribe from EMP API
     unsubscribe(this.subscription);
   }

   コードのポイント:
   • disconnectedCallback() LWC ライフサイクルフックメソッドは、コンポーネントがページから削除されたときに EMP API から登録解除するために使用します。
6. ファイルを保存します。
7. lwc フォルダーを右クリックし、[SFDX: Deploy Source to Org (SFDX: 組織にソースをリリース)] を選択して、更新済みのコンポーネントを組織に再リリースします。
8. セールスアプリケーションに戻り、ブラウザーウィンドウを更新して、通知コンソールで行った更新を読み込みます。エラーが表示されないことを確認します。

インスタント通知アプリケーションをテストする

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

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

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