2017-06-18 69 views
2

我目前有一个Rails 5应用程序作为我的后端,我们可以称之为“Core”。我还有另一个作为我的前端的Angular 1.6.4应用程序,它服务于Angular客户端,并通过角度可操作的方式与后端应用程序集成,我们可以称之为“Front”。这是两个完全独立的应用程序,具有完全不同的域Action cable:如何在Rails 5中只播放特定聊天室的聊天消息?

基本上,我正在尝试通过Core集成Action Cable,并将其与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 

Fornt

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; }); 
    }); 
    }); 
} 
]); 
+0

我编辑这篇文章,请看到它,如果你想进一步的信息告诉我。基本上我想要如何在广播消息期间发送** chatroom_id **,以便它将广播消息到特定的聊天室? –

回答

0

这是我的问题的解决方案,你的差不多,但我没有用cofeescript,只是JavaScript的..所以我也附上我的代码,如果你需要它。我只是检查从DOM属性data-chat-room-id等于一个我与消息传递:

消息控制器创建消息,然后用这些参数ActionCable.server.broadcast电话(信息,用户,chatroom_id,lastuser)我的js代码in messages.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元素)等于

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

这是给我的文章(刚才保存的对象消息从控制器发送的元素)chat_room_id这个答案

Action Cable chat Ilya Bodrov-Krukowski

伊利亚·博德罗夫-Krukowski上Github

要解决的另一个问题是提供我们的脚本与房间的ID。让我们借助HTML数据来解决它 - 属性:

views/chat_rooms/show.html。ERB

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

有了这个的地方,我们可以利用房间的ID在脚本:

的JavaScript /渠道/ 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