Handle response value in UI from Callback function in LWC

Question

I am trying to show the returned response value from a callback function in the below LWC code. But nothing is printed. Could you please help me out how to achieve this. Below is the code.

<template>
    <lightning-card title="EmpApi Example" icon-name="custom:custom14">
        <div class="slds-m-around_medium">
            <p>Use the buttons below to subscribe and unsubscribe to a streaming channel!</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>
        <div class="slds-m-around_medium">
                Change Opportunity Details : {opportunityValue} **<!--nothing is printed here-->**
        </div>
    </lightning-card>
</template>

JS code:

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

export default class opportunityEventHandler extends LightningElement {
    @track channelName = '/event/Opportunity_Closed_Won__e';
    @track isSubscribeDisabled = false;
    @track isUnsubscribeDisabled = !this.isSubscribeDisabled;
    @track changedOpportunity = null;
    @track opportunityValue;
    @track changevalue;

    subscription = {};

    // Tracks changes to channelName text field
    handleChannelName(event) {
        this.channelName = event.target.value;
    }
    // Handles subscribe button click
    handleSubscribe() {
        // 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
            this.changedOpportunity = JSON.stringify(response);
            this.opportunityValue = JSON.stringify(response.data.payload.Opportunity_Number__c);
            console.log(this.opportunityValue); **// this prints the value from the callback response**

            const event = new ShowToastEvent({
                title: 'Opportunity Changed',
                message: this.opportunityValue +'has been changed to Closed Won',
                variant: 'Success'
            });
            dispatchEvent(event);
        };
        // Invoke subscribe method of empApi. Pass reference to messageCallback
        subscribe(this.channelName, -1 , messageCallback).then(response => {
            // Response contains the subscription information on successful subscribe call
            console.log('Successfully subscribed to : ', JSON.stringify(response.channel));
            this.subscription = response;
            this.toggleSubscribeButton(true);
        });
    }
    // 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
        });
    }
    get uppercasedFullName() {
        return `${this.firstName} ${this.lastName}`.trim().toUpperCase();
    }
}

Answer 1

Resolved the issue by using Arrow function in the callback. Arrow function refers to this variable correctly.

const messageCallback = response=> this.opportunityValue = response.data.payload.Opportunity_Number__c;