the first io.emit is never getting sent

Question

io.on('connection',function(socket){
console.log('connected');
socket.on('disconnect',()=>{
    console.log('a user disconnected');
});
socket.on('sendMessage',function(data){
    const message = data.text;
    const cookieList = socket.handshake.headers.cookie;
    const parsedCookies = myModule.parseCookies(cookieList);
    if(parsedCookies.nickName!==undefined){
        socket.nickName = parsedCookies.nickName;
    }
    io.emit('showMessage',{
        'message':message,
        'nickName':socket.nickName
    });
});
});

this is my server code

'use strict';
 let socket = io();
 window.addEventListener('load',function(){
const button = document.querySelector('.btn');
button.addEventListener('click',function(event){
    const inputText = document.getElementById('msg').value;
    try{
        event.preventDefault();
        if(inputText.length<2){
            throw "some error";
        }else{
            const errorMessage = document.querySelector('.row p');
            if(errorMessage){
                errorMessage.remove();
            }
            socket.emit('sendMessage',{
                'text':inputText
            });
            showMessage();
        }
    }catch(error){
        const div  = document.querySelector('.row');
        console.log('error');
        if(!div.querySelector('p')){
            const errorP = document.createElement('p');
            errorP.setAttribute('style','color:red;');
            const errorMessage = document.createTextNode(error);
            errorP.appendChild(errorMessage);
            div.appendChild(errorP);
        }
    }
});
});
function showMessage(){
socket.on('showMessage',function(data){
    console.log("nickname :"+data.nickName + " message :"+data.message);
});
}

this is my client side code

Problem is the first message is never getting sent. Tried it both on chrome and firefox

From second messages communication works fine.. I cannot understand why the first message is not working

Answer 1

socket.on('showMessage',function(data) shouldn't be wrapped in a function or be called every time you send a message. Because of this, your socket never knows how to handle an incoming "showMessage" event until after it has already received one. Replace your client code with this and it should work:

'use strict';
let socket = io();
window.addEventListener('load', function () {
    const button = document.querySelector('.btn');


    socket.on('showMessage', function (data) {
        console.log("nickname :" + data.nickName + " message :" + data.message);
    });

    button.addEventListener('click', function (event) {
        const inputText = document.getElementById('msg').value;
        try {
            event.preventDefault();
            if (inputText.length < 2) {
                throw "some error";
            } else {
                const errorMessage = document.querySelector('.row p');
                if (errorMessage) {
                    errorMessage.remove();
                }
                socket.emit('sendMessage', {
                    'text': inputText
                });
            }
        } catch (error) {
            const div = document.querySelector('.row');
            console.log('error');
            if (!div.querySelector('p')) {
                const errorP = document.createElement('p');
                errorP.setAttribute('style', 'color:red;');
                const errorMessage = document.createTextNode(error);
                errorP.appendChild(errorMessage);
                div.appendChild(errorP);
            }
        }
    });
});

Answer 2

Well, that was a really simple mistake. The problem was that I placed socket.on('showMessage') inside in a function and ran the function in a try catch. Removed function and it solved the problem.