Skip to main content

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

メモ

メモ

日本語で受講されている方へ
このバッジの Trailhead ハンズオン Challenge は英語以外の言語には対応していません。Trailhead Playground の [言語] を [English]、[地域] を [アメリカ合衆国] に切り替えてください。こちらの指示に従ってください。

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

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

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

無料で学習を続けましょう!
続けるにはアカウントにサインアップしてください。
サインアップすると次のような機能が利用できるようになります。
  • 各自のキャリア目標に合わせてパーソナライズされたおすすめが表示される
  • ハンズオン Challenge やテストでスキルを練習できる
  • 進捗状況を追跡して上司と共有できる
  • メンターやキャリアチャンスと繋がることができる