2017-02-28 86 views
1

有沒有一種方法來分別設計傳入文本的樣式,我知道這可能相對容易,但我一直在掙扎幾天,所以任何幫助將不勝感激。設計傳入的消息不同於發送的消息

這是我獲取用戶消息的代碼。

<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>"); 
     } 

回答

0

什麼你可能想要做的就是用senderId標籤的消息,然後當你收到一條消息,您可以在不同取決於誰送的格式。所以,此刻的你與數據觸發消息

{ 
    text: "message text" 
} 

相反,您可以用數據

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

,然後當你在addMessage功能渲染消息,您可以檢查data.senderId並觸發根據其值將其格式設置爲li