Unable to subscribe to streaming platform event in lightning app using emp api

Question

I am unable to subscribe to events using emp API.

Taking a look at emp api here I have the following:

My HTML:

<template>
    <lightning-card title="StreamingPoc1 Example" icon-name="custom:custom14">
        <div class="slds-m-around_medium">
            <p>
                Subscribe/Unsubscribe
            </p>
            <lightning-input
                label="Channel Name"
                value={channelName}
                onchange={handleChannelName}
            ></lightning-input>
            <lightning-button variant="success" label="Subscribe" title="Subscribe" onclick={handleSubscribe} disabled={isSubscribeDisabled} class="slds-m-left_x-small"></lightning-button>
            <lightning-button variant="destructive" label="Unsubscribe" title="Unsubscribe" onclick={handleUnsubscribe} disabled={isUnsubscribeDisabled} class="slds-m-left_x-small"></lightning-button>
        </div>
    </lightning-card>
</template>

My JS

import { LightningElement } from 'lwc';
import {
    subscribe,
    unsubscribe,
    onError,
    setDebugFlag,
    isEmpEnabled,
} from 'lightning/empApi';

export default class StreamingPoc1 extends LightningElement {
    channelName = '/event/LoginEventStream';
    isSubscribeDisabled = false;
    isUnsubscribeDisabled = !this.isSubscribeDisabled;

    subscription = {};

    // Tracks changes to channelName text field
    handleChannelName(event) {
        console.log('I am in [handle Channel Name]');
        this.channelName = event.target.value;
    }

    // Initializes the component
    connectedCallback() {
        // Register error listener
        this.registerErrorListener();
    }

    // Handles subscribe button click
    handleSubscribe() {
        console.log('I am in [handle Subscribe]');
        // Callback invoked whenever a new event message is received
        const messageCallback = function (response) {
            console.log('New message received: ', JSON.stringify(response));
            // Response contains the payload of the new message received
        };
        console.log('About to subscribe.....');
        // Invoke subscribe method of empApi. Pass reference to messageCallback
        subscribe(this.channelName, -1, messageCallback).then((response) => {
            // Response contains the subscription information on subscribe call
            console.log(
                'Subscription request sent to: ',
                JSON.stringify(response.channel)
            );
            this.subscription = response;
            this.toggleSubscribeButton(true);
        });
        console.log('After subscribe.....');
    }

    // Handles unsubscribe button click
    handleUnsubscribe() {
        this.toggleSubscribeButton(false);

        // Invoke unsubscribe method of empApi
        unsubscribe(this.subscription, (response) => {
            console.log('unsubscribe() response: ', JSON.stringify(response));
            // Response is true for successful unsubscribe
        });
    }

    toggleSubscribeButton(enableSubscribe) {
        this.isSubscribeDisabled = enableSubscribe;
        this.isUnsubscribeDisabled = !enableSubscribe;
    }

    registerErrorListener() {
        // Invoke onError empApi method
        onError((error) => {
            console.log('Received error from server: ', JSON.stringify(error));
            // Error contains the server-side error
        });
    }
}

Meta

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>52.0</apiVersion>
    <isExposed>false</isExposed>
</LightningComponentBundle>

Lightning app (in developer console) that uses the component above

<aura:application >
    <c:streamingPoc1/>
</aura:application>

When I hit the subscribe button, all I see in console is:

About to subscribe.....
After subscribe.....

And it doesn't seem to go in the subscribe block.

What am i doing wrong? I saw Unable to subscribe to platform event using emp api but that seems like a different issue.

Answer 1

The problem here is that you are putting your LWC inside an Aura App. Your subscription is not working because of that. If you use your component outside the Aura Application as a standalone component in a page, for instance, it should work perfectly. I've checked it in my org.