以不同于已发送消息的方式设置传入消息的样式

Question

有没有一种方法可以单独设置传入文本的样式，我知道这可能相对容易，但我已经为此苦苦挣扎了好几天，所以我们将不胜感激。

这是我获取用户消息的代码。

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

这是我使用 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 );

这是我显示消息的代码，这仅在我使用 php 发送信息后有效，将其保存到我的数据库并且用户刷新页面。

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

您可能想要做的是用 senderId 标记邮件，然后当您收到邮件时，您可以根据发件人的不同设置不同的格式。所以目前你正在用数据触发消息

{
  text: "message text"
}

相反，您可以使用数据触发

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

然后当您在 addMessage 函数中呈现消息时，您可以检查 data.senderId 并根据其值设置不同格式的 li。

以不同于已发送消息的方式设置传入消息的样式

Styling incoming messages differently from sent messages

pusher