当用户a在Rails中使用faye添加新注释时，如何为用户B提供自定义布局

Question

我使用faye构建了一个讨论栏应用程序。它有效，但有一个问题。

预期结果：如果用户A评论，那么在他的屏幕上，他的图像应该在右手边。当用户B在他的聊天窗口中实时看到消息时，用户A的图像应该出现在左手边。

获得的结果：

用户A的消息显示在用户B的聊天窗口中，但用户A的图像位于右侧。

Faye向每个用户推送相同的消息，而不考虑我写的if conditions。

这是我的代码：

create.js.erb:

<% publish_to "/chats/index" do %>
    $('.discBox .userPost').removeClass('new');
    $('.discBox').append("<%=escape_javascript(render :partial => '/chats/user_message', :locals=>{:chat => @chat}, :object=> current_user) %>").find('.userPost:last').addClass('new');
<% end %>

user_message partial中的if-else条件对用户的图像进行不同的定位：

<% if current_user.id == chat.user.id %>
  <div class="userPost col-lg-12 col-md-12">
    <div class="col-lg-10 col-md-6 paddingReset">
      <div class="userBubble clearfix"> 
        <i class="fa fa-caret-left fa-4x white"></i>
        <div class="col-lg-12 col-md-12 paddingReset">
            <img class="media-object media-object-right img-circle" src="http://api.randomuser.me/portraits/med/women/64.jpg" alt="user pic">
            <div>
              <a href="#"> <h4 style="margin-bottom:5px; display:inline-block;"> <span> <strong> <%= chat.user.email %> </strong> </span> </h4></a>
              <a style="text-decoration:none;" href="#"> <span class="text-muted small"> • <%= time_ago_in_words(chat.created_at).capitalize %> Ago </span> </a>
            </div>
        </div>
        <div class="col-lg-12 col-md-12 paddingReset margin-top-xs message"> 
          <%= chat.message %>
        </div>
      </div>
    </div>
  </div>
<% elsif current_user.id != chat.user.id %>
  <div class="userPost col-lg-12 col-md-12">
    <div class="col-md-offset-2 col-lg-offset-2 col-lg-10 col-md-6 paddingReset">
      <div class="userBubble clearfix"> 
        <i class="fa fa-caret-left fa-4x white"></i>
        <div class="col-lg-12 col-md-12 paddingReset">
            <img class="media-object media-object-left img-circle" src="<%= asset_path('7.jpg') %>" alt="user pic">
            <div>
              <a href="#"> <h4 style="margin-bottom:5px; display:inline-block;"> <span> <strong> <%= chat.user.email %> </strong> </span> </h4></a>
              <a style="text-decoration:none;" href="#"> <span class="text-muted small"> • <%= time_ago_in_words(chat.created_at).capitalize %> Ago </span> </a>
            </div>
        </div>
        <div class="col-lg-12 col-md-12 paddingReset margin-top-xs message"> 
          <%= chat.message %>
        </div>
      </div>
    </div>
  </div>
<% end %>

index.html.erb：

<div class="col-lg-3 col-md-10 col-sm-12 margin-top-md">
    <div class="h3 margin-top-xs raleway uppercase contentTitle active"> Back </div>
</div>
<div class="col-lg-8 col-md-11 col-sm-12 margin-top-md">
    <div class="col-lg-9 col-md-12 col-sm-12 col-xs-12 paddingReset commentContainer"> 
      <div class="commentWrapper disc-about">
        <div class="media roboto">
          <div class="media-body">
          </div>
        </div>
      </div>
      <div class="discBox col-lg-12 col-md-12 paddingReset">
        <% if @chat %>
            <% @chat.each do |chat| %>
                <%= render partial: 'user_message', locals: {:chat => chat } %>
            <% end %>
        <% end %>   
      </div>

      <div class="messageBox col-lg-12 col-md-12 paddingReset">
        <%= form_tag "/chats",:method=> 'post', remote: true do %>
            <%= hidden_field_tag 'login',current_user.email %>
            <div class="form-group">
                <label for="message_box"> Comment:</label>
                <textarea class="form-control" value="" id="message_box" name="chat[message]" ></textarea>
            </div>
            <button class="btn btn-sm btn-info">Submit</button>
        <% end %>
      </div>
    </div>
</div>
<%#= javascript_include_tag 'private_pub.js' %>
<%#= javascript_include_tag 'chats.js' %>
<%= subscribe_to "/chats/index" %>
<style type="text/css">
.discBox {
    border: 1px solid #666;
    height: 500px;
    margin-bottom: 15px;
    overflow: auto;
    background-color: #CE3;
}
.message{
    margin-bottom: 10px;
}
.new > div{
    border-top: 1px solid dodgerblue;
    margin-top: 14px;
}
.paddingReset{
  padding-right: 0;
  padding-left: 0;
}
</style>

我在heroku上托管了这个应用程序，完整的源代码在github上。

Answer 1

通过将publish_to方法从create.js.erb文件移动到index.html.erb来解决问题，在那里我可以跟踪当前用户。所以现在publish_to方法是这样的：

$(function() {
        PrivatePub.subscribe("/chats/index", function(data, channel) {
         $('.discBox .userPost').removeClass('new');
         $('#message_box').val('');
         var current_user = $('#user').val();
        if (current_user == data.user){ 
            $('.discBox').append(msg("myMsg",data.message,'right')).find('.userPost:last').addClass('new');
        }           
        else{
            $('.discBox').append(msg("memberMsg",data.message,'left')).find('.userPost:last').addClass('new');
        }
    });