Calling LWC Javascript function from subscribe () method of cometd result in function undefined

Question

Calling the LWC Javascript function from the subscribe() method of CometD results in function undefined.

Here is the code:

<code>

import { LightningElement, api, track, wire } from 'lwc'; import getMessageRecords from "@salesforce/apex/PCMMessageController.fetchMessageRecordsComUser"; import insertMessage from "@salesforce/apex/PCMMessageController.insertMessageComUser"; import updateReadInMsgRecord from "@salesforce/apex/PCMMessageController.updateReadInMsgRecForComUser"; import getUserDetails from "@salesforce/apex/PCMMessageController.getUserDetails"; import cometdlwc from "@salesforce/resourceUrl/cometd"; import { loadScript } from "lightning/platformResourceLoader"; import getSessionId from '@salesforce/apex/SessionUtil.getSessionId'; import welcomeToChat from '@salesforce/label/c.Welcome_to_Chat'; import messageSentTime from '@salesforce/label/c.Message_Sent_Time'; import messageSender from '@salesforce/label/c.Message_Sender';

export default class CustomMessage extends LightningElement {

@api flexipageRegionWidth = 'CLASSIC'; 
@track messageRecords;
@track inputMessage = '';
libInitialized = false;
@track sessionId;
@track showWelcomeMsg=false;
@track loggedInUserWrapper;
welcomeToChat=welcomeToChat;
messageSentTime=messageSentTime;
messageSender=messageSender;

@wire(getSessionId)
    wiredSessionId({ error, data }) {
    if (data) {
        console.log(data);
        this.sessionId = data;
        this.error = undefined;
        loadScript(this, cometdlwc)
        .then(() => {
                                    console.log('######In SessionmessageRecords:'+this.messageRecords);
                this.initializecometd()
        });
    } else if (error) {
            console.log(error);
            this.error = error;
            this.sessionId = undefined;
        }
}

initializecometd() {
    if (this.libInitialized) {
        return;
    }
    this.libInitialized = true;
    //inintializing cometD object/class
    var cometdlib = new window.org.cometd.CometD();
    //Calling configure method of cometD class, to setup authentication which will be used in handshaking
    cometdlib.configure({
        url: window.location.protocol + '//' + window.location.hostname + '/cometd/47.0/',
        requestHeaders: { Authorization: 'OAuth ' + this.sessionId},
        appendMessageTypeToURL : false,
        logLevel: 'debug'
    });
    console.log('#####SessionID:'+this.sessionId);
    cometdlib.websocketEnabled = false;

    cometdlib.handshake(function(status) {
        if(status.successful) {
            // Successfully connected to the server.
            // Now it is possible to subscribe or send messages
            console.log('#####Successfully connected to server');
            // Callback invoked whenever a new event message is received
            /*const messageCallback = (response) => {
                console.log('#####Platform Event received : ', JSON.stringify(response,null,' '));     
            };*/
             /*  cometdlib.subscribe('/event/PCM_Chat_Internal_COMM__e',function(msg) {
                console.log("this.messageRecords:::"+this.messageRecords);
               });*/
                            /*cometdlib.subscribe('/event/PCM_Chat_Internal_COMM__e', (msg) => {
                                    console.log("this.Event msg:::"+JSON.stringify(msg));
                                    console.log("this.messageRecords:::"+this.messageRecords);
                                    this.invokeLWCApexMethod();
                            });*/
                            let self = this;
                            cometdlib.subscribe('/event/PCM_Chat_Internal_COMM__e',function(msg) {
                                    console.log("this.Event msg:::"+JSON.stringify(msg));
                                    self.invokeLWCApexMethod();
                            });
        } else {
            /// Cannot handshake with the server, alert user.
            console.error("#####Error in handshaking:" + JSON.stringify(status));
        }
    });
}
    invokeLWCApexMethod(){
        //Calling Apex Method
    console.log('#####Calling Apex Method');
    }
checkForNewMessages=function(perAccRecId) {
    console.log("checkForNewMessages^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^");
    /*for(var msg=0;msg<this.messageRecords.length;msg++) {
        if(perAccRecId===this.messageRecords[msg].Person__c) {
            toRefreshMessages=true;
            break;
        }
    }
    if(toRefreshMessages) {
        //get the latest messages from Apex.
        console.log("********************Same Person Account***********************");
        this.invokeApexForMessageRecords();
    } else {
        console.log("********************Different Person Account***********************");
    }*/
}

connectedCallback() {  
    this.invokeApexForMessageRecords();
}

invokeApexForMessageRecords() {
    getMessageRecords()
        .then(result => {
            this.messageRecords = result;
            if(this.messageRecords.length==0) {
                this.getLoggedInUserDetails();
            }
        })
        .catch(error => {
            console.error("error:"+JSON.stringify(error));
        });
}

getLoggedInUserDetails() {
    getUserDetails()
        .then(result => {
            this.loggedInUserWrapper = result;
            this.showWelcomeMsg = true;
        })
        .catch(error => {
            console.error("error:"+JSON.stringify(error));
        });
}

handleMessageChange(event) {        
    this.inputMessage = event.target.value;     
}

sendChatMessage() {
    if(this.inputMessage) {
        insertMessage({ newMessage: this.inputMessage})
        .then(result => {
            this.messageRecords = result; 
            this.inputMessage = "";      
        })
        .catch(error => {
            console.error("error:"+JSON.stringify(error));
            this.inputMessage = "";
        });
    }
}

checkSendChatMsgOnEnter(event) {
    if(event.keyCode==13) {
        this.sendChatMessage();
    }
}

updateReadInMessage(event) {
    var msgId = event.target.dataset.messageid;
    updateReadInMsgRecord({ messageId: msgId }) 
    .then(result => {
        this.messageRecords = result; 
    })
    .catch(error => {
        console.error("error:"+JSON.stringify(error));
    });
}

}

Answer 1

As you are using an anonymous function, it will not have access to the this of your component. A this inside that function will refer to the function itself.

To overcome this, you have two options.

1 Use an arrow function

cometdlib.subscribe('/event/MSG_Internal_COMM__e', (msg) => {
    this.invokeLWCApexMethod();
});

2 Pass this as another variable i.e. self

// ...
let self = this;
cometdlib.subscribe('/event/MSG_Internal_COMM__e',function(msg) {
    self.invokeLWCApexMethod();
});

Change that to an arrow function like below as this remains unchanged in arrow functions.