使用ActionCable部分错误地呈现

Posted 2021-04-08

我有一个基本的聊天应用程序，通过ActionCable发送消息。我试图将消息分类到左/右，具体取决于谁发送了它，就像Facebook的Messenger应用程序一样。我试图用我发送的部分（_message.html.erb）中的基本逻辑来实现它：

<%if message.user_id == current_user.id %> 
//message is to the right with inline CSS
<% else°%>
// message is to the left with inline CSS
<% end°%>

如果有人重新加载页面，它会正常工作但是当使用该应用程序时，通过ActionCable发送的所有新消息都会发送到右侧。

我检查了发送的部分，似乎是

<%if message.user_id == current_user.id %> 

在用户端运行，然后总是发送部分的第一部分，而不是整个_message.html.erb。有没有办法代替发送整个部分，并确保

<%if message.user_id == current_user.id %>

所有订阅用户收到邮件时运行？

消息控制器：

if @message.save
  RoomChannel.broadcast_to @room.id, message: 
  MessagesController.render(partial: 'messages/message', locals: {message: 
  @message, current_user: current_user})

room.js：

received: function (data) {
    $('.messages').append(data.message);
}

如果需要代码的任何其他部分，请询问或：https://github.com/TTARJAN/chatApp

答案

所以我最终制作了两个部分并用Actioncable广播它们然后让JQuery在接收到的函数中决定渲染哪一个。此外，每个用户的ID都作为数据存储在html中进行比较。代码如下：

 var userId = $('#noBGR').attr('data-user-id');
    if (parseInt(userId) === data.id){
        $('.messages').append(data.msg_user);
    }else{
        $('.messages').append(data.message);
    }


RoomChannel.broadcast_to @room.id, id: @message.user_id, message: 
MessagesController.render(partial: 'messages/message', locals: {message: @message, 
current_user: current_user}), msg_user: MessagesController.render(partial: 
'messages/message_user', locals: {message: @message, current_user: current_user})