OnMessage is not working on javascript clients

[Ebin Roy]

Hi, I am having issues in receiving the message from FCM. I can see the send message from dashboard but the application is not receiving

I am using ASP.Net Core application. I am getting the token but after entering the token at cloud messaging --> Compose message --> Enter the token --> click send test message button --> I am not receiving any message on application side. Is there anything wrong I have done. pls help on this. Thanks

Code

<div class="container">
        <main role="main" class="pb-3">
            <div id="notificationMessage" class="align-text-top">
            </div>
        </main>
    </div>

<script type="module">
        // Import the functions you need from the SDKs you need
        import { initializeApp } from "https://www.gstatic.com/firebasejs/9.22.1/firebase-app.js";
        import { getAnalytics } from "https://www.gstatic.com/firebasejs/9.22.1/firebase-analytics.js";
        import { getMessaging, getToken, onMessage } from "https://www.gstatic.com/firebasejs/9.22.1/firebase-messaging.js";
        //import { getMessaging,onBackgroundMessage } from "https://www.gstatic.com/firebasejs/9.22.1/firebase-messaging-sw.js";
       
       

        // Your web app's Firebase configuration
        // For Firebase JS SDK v7.20.0 and later, measurementId is optional
        const firebaseConfig = {
            apiKey: "XXXXXXXXXXXXXXXXXXXXXXXX",
            authDomain: "XXXXXXXXXXXXXXXXXXXXXXXX.firebaseapp.com",
            projectId: "XXXXXXXXXXXXXXXXXXXXXXXX.appspot.com",
            messagingSenderId: "99999999",
            appId: "1:89023408234:web:g23jslasmddf8923434",
            measurementId: "H-hklsdf23134"
        };

// Initialize Firebase
        const app = initializeApp(firebaseConfig);
        //const analytics = getAnalytics(app);


        const messaging = getMessaging(app);

       
        function requestPermission() {
            console.log('Requesting permission...');
            Notification.requestPermission().then((permission) => {
                if (permission === 'granted') {
                    console.log('Notification permission granted.');
                }
            })
        };
       
        getToken(messaging, { vapidKey: 'ghvdsdljsljdljj.nsldfjkjkfgfg' }).then((currentToken) => {
            if (currentToken) {
                // Send the token to your server and update the UI if necessary
                // ...
                console.log("currentToken", currentToken);
            } else {
                // Show permission request UI
                console.log('No registration token available. Request permission to generate one.');
                // ...
            }
        }).catch((err) => {
            console.log('An error occurred while retrieving token. ', err);
            // ...
        });

        onMessage(messaging, (payload) => {
            console.log('Message received. ', payload);
            $('#notificationMessage').append('<div><h4>' + payload.notification.title + '</h4><p>' + payload.notification.body + '</p></div>');
        });
</script>