行动电缆：如何在 Rails 5 中仅广播特定聊天室的聊天消息？

Question

我目前有一个 Rails 5 应用程序作为我的后端，我们可以称之为“核心”。我还有另一个 Angular 1.6.4 应用程序作为我的前端，它为 Angular 客户端提供服务，并通过 angular-actionable 与后端应用程序集成，我们可以称之为“前端”。这是两个完全不同的应用程序，具有完全不同的域。

基本上，我正在尝试通过 Core 集成 Action Cable 并让它与 Front 对话。我在这里为 Front 使用此服务：enter link description here。至于核心，这只是基本的动作电缆设置。

我在管理员端有一个聊天室列表。

问题：我从客户端发送消息，但它向管理端的所有聊天室广播消息。我尝试在流中提供聊天室的特定路径，但它仍然向所有聊天室广播消息。

我想将消息广播到特定的聊天室

核心

chat_channel.rb

class ChatChannel < ApplicationCable::Channel
   def subscribed
      stream_from stream_name
   end
   def unsubscribed
     stop_all_streams
   end

   def receive(data)
       ActionCable.server.broadcast stream_name,  data.fetch('message')
   end

   private

   def stream_name
      "chat_channel_#{chat_id}"
   end

   def chat_id
      params.fetch('data').fetch('chat')
   end
end

堡垒

chatCtrl.js

app.run(function (ActionCableConfig){
   ActionCableConfig.debug = true;
   ActionCableConfig.wsUri= "ws://localhost:3000/cable";
});
app.controller('chatCtrl', ['$scope', 'ActionCableChannel',
function($scope, ActionCableChannel) {

  var consumer = new ActionCableChannel("ChatChannel", { chat: 'localhost:3000/#!/chat/1'});
  var callback = function(message) {
    $scope.myData.push(message);
  };
  consumer.subscribe(callback).then(function(){
    $scope.sendToMyChannel = function(message){
      consumer.send(message);
    };
    $scope.$on("$destroy", function(){
      consumer.unsubscribe().then(function(){ $scope.sendToMyChannel = undefined; });
    });
  });
}
]);

Answer 1

这是我的问题的解决方案，与您的问题非常相似，但我没有使用 cofeescript，只是使用 javascript.. 所以如果您需要它，我还会附上我的代码.. 我只是检查属性 data-chat-room-id 来自DOM 等于我通过消息传递的那个：

消息控制器创建消息，然后使用ActionCable.server.broadcast 调用这些参数（消息、用户、聊天室_id、lastuser）我在messages.js 中的js 代码

class MessagesController < ApplicationController
  def create
    message = Message.new(message_params)
    message.user = current_user
    chatroom = message.chatroom
    if message.save
        ActionCable.server.broadcast 'messages',
        message: message.content,
        user: message.user.name,
        chatroom_id: message.chatroom_id,
        lastuser: chatroom.messages.last(2)[0].user.name
      head :ok
    end
  end
end

在app/assets/javascrips/channels/messages.js 内部，我检查data.chatroom_id（来自DOM 的元素）是否等于chat_room_id（从控制器发送的元素，刚刚保存的对象消息）

App.messages = App.cable.subscriptions.create('MessagesChannel', {      
  received: function(data) {
    messages = $('#chatroom_id');
    chat_room_id = messages.data('chat-room-id');
    if (data.chatroom_id == chat_room_id) {
      $('#messages').append(this.renderMessage(data));
      };
  },
  renderMessage: function(data) {
      return "<br><p> <strong>" + data.user + ": </strong>" + data.message + "</p>";
  }
});

这篇文章给了我这个答案

Action Cable chat Ilya Bodrov-Krukowski

Ilya Bodrov-Krukowski on Github

这里要解决的另一个问题是为我们的脚本提供房间的 ID。让我们借助 HTML data- 属性来解决它：

views/chat_rooms/show.html.erb

<div id="messages" data-chat-room-id="<%= @chat_room.id %>">
  <%= render @chat_room.messages %>
</div>

有了这个，我们可以在脚本中使用房间的 id：

javascripts/channels/rooms.coffee

jQuery(document).on 'turbolinks:load', ->
  messages = $('#messages')
  if $('#messages').length > 0

    App.global_chat = App.cable.subscriptions.create {
        channel: "ChatRoomsChannel"
        chat_room_id: messages.data('chat-room-id')
      },
      connected: ->
        # Called when the subscription is ready for use on the server

      disconnected: ->
        # Called when the subscription has been terminated by the server

      received: (data) ->
        # Data received

      send_message: (message, chat_room_id) ->
        @perform 'send_message', message: message, chat_room_id: chat_room_id