Styling incoming messages differently from sent messages - pusher

Question

Is there a way to style incoming text separately, i know this may be relatively easily but i have been struggling with it for days so any help would be greatly appreciated.
Here is my code for getting users messages.
<textarea type='text' class='materialize-textarea'
name='user_message' id='user_message' placeholder='Type here...'
style='width: 70%;'
</textarea>
Here is my code for pusher using js
( function( window, Pusher, $) {
Pusher.log = function( msg ) {
if( window.console && window.console.log ) {
window.console.log( msg );
}
};
Pusher.channel_auth_endpoint = "auth.php";
var pusher = new Pusher( CONFIG.PUSHER.APP_KEY );
pusher.connection.bind('state_change', function( change ) {
var el = $('.connection-status');
el.removeClass( change.previous );
el.addClass( change.current );
});
var channel = pusher.subscribe( CONFIG.PUSHER.CHANNEL_NAME );
channel.bind( 'new_message', addMessage );
function addMessage( data ) {
var li = $('<li class="ui-li ui-li-static ui-body-c"></li>');
li.text( data.text );
li.hide();
$('#messages').append(li);
li.slideDown();
}
$(document).keypress(function(e) {
if(e.which == 13) {
var userMessageEl = $('#user_message');
var message = $.trim( userMessageEl.val() );
if( message ) {
$.ajax( {
url: 'new_message',
type: 'post',
data: {
text: message
},
success: function() {
userMessageEl.val('');
}
});
}
return false;
}
});
})( window, window['Pusher'], jQuery );
Here is my code for displaying the message, This only works after I send the information using php, saving it to my database and the user refreshes the page.
// Message sent by the user
if($row2[initiator] === $lgusername){
echo ("<li class='text-right'
style='margin-top: 5px; margin-bottom: 5px; margin-left: 100px; padding: 10px;
background-color: #b2f2ec; border: 1px solid #ccc!important;
border-radius: 4px!important; text-color: #fff;'>" . $row2[msg] . "</li>");
}
Received message
else {
echo ("<li class='text-left'
style='margin-top: 5px; margin-bottom: 5px; margin-right: 100px; padding: 10px;
background-color: #e4ffe1; border: 1px solid #ccc!important;
border-radius: 4px!important;'>" . $row2[msg] . "</li>");
}

Answer 1

What you probably want to do is tag messages with a senderId, and then when you receive a message you can format it differently depending on who sent it. So at the moment you are triggering messages with the data
{
text: "message text"
}
Instead, you can trigger with the data
{
text: "message text",
senderId: "someId"
}
and then when you render the message in your addMessage function, you can check data.senderId and format the li differently depending on its value.