Ankommende Nachrichten anders als gesendete Nachrichten ansprechen

Question

Gibt es eine Weise, ankommenden Text separat zu stylen, ich weiß, dass dies verhältnismäßig leicht sein kann, aber ich habe seit Tagen damit gekämpft, so würde jede Hilfe sehr geschätzt werden.

Hier ist mein Code, um Benutzer Nachrichten zu erhalten.

<textarea type='text' class='materialize-textarea' 
     name='user_message' id='user_message' placeholder='Type here...' 
     style='width: 70%;' 
</textarea> 

Hier ist mein Code für Pusher js mit

(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); 

Hier ist mein Code die Nachricht für die Anzeige, Dies funktioniert nur, nachdem ich die Informationen mit PHP senden, um es zu meiner Datenbank und den Benutzer Speichern aktualisiert die Seite.

// 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

Was Sie wahrscheinlich tun möchten, ist Tag Nachrichten mit einem senderId, und dann, wenn Sie eine Nachricht erhalten, können Sie es anders formatiert werden, je nachdem, wer sie geschickt. Also im Moment Sie Nachrichten mit den Daten

{ 
    text: "message text" 
} 

Stattdessen auslösen, können Sie mit den Daten auslösen

{ 
    text: "message text", 
    senderId: "someId" 
} 

und dann, wenn Sie die Nachricht in Ihrer addMessage Funktion machen, können Sie überprüfen, data.senderId und Formatieren Sie die li je nach Wert unterschiedlich.