CODEWITHSUNDEEP
javascriptnode.jssocketssocket.io
baddeveloper22
baddeveloper22

Reputation: 55

Problems with multiple variable socket.io emits

So I followed a couple questions about a similar question, however, the questions and their appropriate solutions were from multiple years ago, and since then socket.io has seen several updates which make their code unusable. I've tried adapting it to fit v2.3.0 but it does not work.

I'm trying to make a chat application which has several variables that I'm trying to emit with each io.emit event (picture, name, tag, message, etc.)

At the moment, my server-side code looks as such:

    socket.on('chatMessage', function(msg){
        io.emit('chatMessage', { sendmessage: msg, sendname: username, sendertag: tag, postpiclink: userpiclink });
        console.log('message: ' + sendmessage + sendname + sendertag + postpiclink);
    });

There is obviously more than just this but this is the only relevant code and the rest of it functions as it should. On my client side, each event sends all the variables (I believe) along with the event. It looks as such:

    var userName = "<?=$_SESSION['userName'];?>"
    var userTag = "<?php if($userRank == 7) { echo "[Owner]";} elseif ($userRank == 3) { echo "[Mod]";} elseif ($userRank == 5) { echo "[Admin]";} else {}?>"
    var userPicture = "<?=$userPicture?>"
            $('.chatMessageSubmitForm').submit(function(e){
                e.preventDefault();
                e.stopPropagation();
                socket.emit('chatMessage', { message: $('#messageField').val(), username: userName, tag: userTag, userpiclink: userPicture});
                $('#messageField').val('');
                return false;
            });
            socket.on('chatMessage', function(msg){
                $('.chatMessageList').append($('<li><img src="'+ postpiclink + '"class="chatMessageUserPicture"><h2 class="chatUserName">' + sendertag + sendname + '</h2>').text(sendmessage));
            });

As far as I'm aware this should be formatted correctly, however when I try to send a chat message the following message appears on my server terminal:

io.emit('chatMessage', { sendmessage: msg, sendname: username, sendertag: tag, postpiclink: userpiclink });

ReferenceError: username is not defined

I'm not entirely braindead so obviously it isn't receiving the username variable when the socket emits it, but I have no clue why. Any help would be greatly appreciated.

Upvotes: 0

Views: 1327

Answers (1)

jfriend00
jfriend00

Reputation: 707816

When you do this in the client:

socket.emit('chatMessage', { message: $('#messageField').val(), username: userName, tag: userTag, userpiclink: userPicture});

That means that when you receive it in the server here:

 socket.on('chatMessage', function(msg){
    io.emit('chatMessage', { sendmessage: msg, sendname: username, sendertag: tag, postpiclink: userpiclink });
    console.log('message: ' + sendmessage + sendname + sendertag + postpiclink);
 });

That means that msg will be the entire object you sent. So, if you want the username from that object, you need to refer to:

msg.username

not just

username

So, you would change to this:

socket.on('chatMessage', function(msg){
    io.emit('chatMessage', { sendmessage: msg, sendname: msg.username, sendertag: msg.tag, postpiclink: msg.userpiclink });
    console.log('message: ' + sendmessage + sendname + sendertag + postpiclink);
});

FYI, it's redundant to be sending the entire msg object and then also be sending three individual properties again all in the same message. You're essentially sending those three properties twice.

Upvotes: 1

Related Questions