• Roshnit Kaur
  • NEWBIE
  • 0 Points
  • Member since 2017

  • Chatter
    Feed
  • 0
    Best Answers
  • 0
    Likes Received
  • 0
    Likes Given
  • 1
    Questions
  • 1
    Replies
Hello Guys, 
I am unable to complete the step Subscribe to platform event from Build and Instant notification App trailhead. When i click on the Broadcast Bear warning button from the heroku app, no notifications gets displayed on my salesforce page. I have cross checked the code and everything looks the same as described in trailhead. Have any of you faced the same issues? Please do let me know what you did in order to get it running.

Thanks 
Roshnit
Hello,

I am currently going though the trailhead module Build an Instant Notification App at the step Subscribe to a Platform Event

I have Verified this step but when I click Broadcast bear warning button, nothing is diplayed in my Salesforce org.
I have tried to refresh the page and even to clear the cache.

Here is my code :
NotificationConsole.cmp
<aura:component controller="NotificationController" implements="flexipage:availableForAllPageTypes" access="global">
		
    <ltng:require scripts="{!$Resource.cometd}" afterScriptsLoaded="{!c.onCometdLoaded}"/>
    
    <aura:attribute name="sessionId" type="String"/>
    <aura:attribute name="cometd" type="Object"/>
    <aura:attribute name="cometdSubscriptions" type="Object[]"/>
    
  <aura:attribute name="notifications" type="Object[]"/>
  <aura:attribute name="isMuted" type="Boolean" default="false"/>

  <aura:handler name="init" value="{!this}" action="{!c.onInit}"/>

  <aura:registerEvent name="toastEvent" type="force:showToast"/>


  <div class="container">

    <!-- Header -->
    <div class="slds-p-around--x-small slds-border--bottom slds-theme--shade">
      <div class="slds-grid slds-grid--align-spread slds-grid--vertical-align-center">
        <div>
          <span class="slds-badge">{!v.notifications.length}</span>
        </div>
        <div>
          <lightning:buttonIcon onclick="{!c.onClear}" iconName="utility:delete" title="Clear notifications"
            alternativeText="Clear notifications" variant="border-filled"/>
          <lightning:buttonIcon onclick="{!c.onToggleMute}"
            iconName="{!v.isMuted ? 'utility:volume_off' : 'utility:volume_high'}"
            title="{!v.isMuted ? 'Unmute notifications' : 'Mute notifications'}"
            alternativeText="Toggle mute" variant="border-filled"/>
        </div>
      </div>
    </div>

    <!-- Notification list -->
    <div class="slds-container--fluid slds-scrollable--y content">
      <aura:iteration items="{!v.notifications}" var="notification">
        <div class="slds-p-around--small slds-border--top">
          <div class="slds-grid slds-grid--align-spread slds-has-flexi-truncate">
            <p>{!notification.message}</p>
            <p class="slds-text-color--weak slds-p-left--x-small">{!notification.time}</p>
          </div>
        </div>
      </aura:iteration>
    </div>

  </div>

</aura:component>

NotificationConsoleController.js
({
  
  onCometdLoaded : function(component, event, helper) {
  var cometd = new org.cometd.CometD();
  component.set('v.cometd', cometd);
  if (component.get('v.sessionId') != null)
    helper.connectCometd(component);
},  
    
  onInit : function(component, event, helper) {
  component.set('v.cometdSubscriptions', []);
  component.set('v.notifications', []);

  // Disconnect CometD when leaving page
  window.addEventListener('unload', function(event) {
    helper.disconnectCometd(component);
  });

  // Retrieve session id
  var action = component.get('c.getSessionId');
  action.setCallback(this, function(response) {
    if (component.isValid() && response.getState() === 'SUCCESS') {
      component.set('v.sessionId', response.getReturnValue());
      if (component.get('v.cometd') != null)
        helper.connectCometd(component);
    }
    else
      console.error(response);
  });
  $A.enqueueAction(action);

  helper.displayToast(component, 'success', 'Ready to receive notifications.');
},
    
  onClear : function(component, event, helper) {
    component.set('v.notifications', []);
    },

  onToggleMute : function(component, event, helper) {
    var isMuted = component.get('v.isMuted');
    component.set('v.isMuted', !isMuted);
    helper.displayToast(component, 'success', 'Notifications '+ ((!isMuted) ? 'muted' : 'unmuted') +'.');
    }
})

notificationConsoleHelper.js
({
  connectCometd : function(component) {
    var helper = this;

    // Configure CometD
    var cometdUrl = window.location.protocol+'//'+window.location.hostname+'/cometd/40.0/';
    var cometd = component.get('v.cometd');
    cometd.configure({
      url: cometdUrl,
      requestHeaders: { Authorization: 'OAuth '+ component.get('v.sessionId')},
      appendMessageTypeToURL : false
    });
    cometd.websocketEnabled = false;

    // Establish CometD connection
    console.log('Connecting to CometD: '+ cometdUrl);
    cometd.handshake(function(handshakeReply) {
      if (handshakeReply.successful) {
        console.log('Connected to CometD.');
        // Subscribe to platform event
        var newSubscription = cometd.subscribe('/event/Notification__e',
          function(platformEvent) {
            console.log('Platform event received: '+ JSON.stringify(platformEvent));
            helper.onReceiveNotification(component, platformEvent);
          }
        );
        // Save subscription for later
        var subscriptions = component.get('v.cometdSubscriptions');
        subscriptions.push(newSubscription);
        component.set('v.cometdSubscriptions', subscriptions);
      }
      else
        console.error('Failed to connected to CometD.');
    });
      },

  disconnectCometd : function(component) {
    var cometd = component.get('v.cometd');

    // Unsuscribe all CometD subscriptions
    cometd.batch(function() {
      var subscriptions = component.get('v.cometdSubscriptions');
      subscriptions.forEach(function (subscription) {
        cometd.unsubscribe(subscription);
      });
    });
    component.set('v.cometdSubscriptions', []);

    // Disconnect CometD
    cometd.disconnect();
    console.log('CometD disconnected.');
  },

  onReceiveNotification : function(component, platformEvent) {
    var helper = this;
    // Extract notification from platform event
    var newNotification = {
      time : $A.localizationService.formatDateTime(
        platformEvent.data.payload.CreatedDate, 'HH:mm'),
      message : platformEvent.data.payload.Message__c
    };
    // Save notification in history
    var notifications = component.get('v.notifications');
    notifications.push(newNotification);
    component.set('v.notifications', notifications);
    // Display notification in a toast if not muted
    if (!component.get('v.isMuted'))
      helper.displayToast(component, 'info', newNotification.message);
  },

  displayToast : function(component, type, message) {
    var toastEvent = $A.get('e.force:showToast');
    toastEvent.setParams({
      type: type,
      message: message
    });
    toastEvent.fire();
  }
})

Could you please advise ? This is a very nice feature and would very much like to have working.
Thanks for your help.