0

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

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

获得的结果：

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

Faye 在不考虑我写的if 条件的情况下向每个用户推送相同的消息。

这是我的代码：

创建.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 部分中的 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 上。

4

1 回答 1

0

通过将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');
        }

    });
于 2015-12-10T11:15:09.630 回答