2016-10-07 19 views
4

私は現在、私のバックエンドとして動作するRails 5アプリケーションを持っています。これを「コア」と呼ぶことができます。また、別のRails 5アプリケーションをフロントエンドとして機能させています。このアプリケーションはAngularJSクライアント側に提供しています。私たちはこれを「フロント」と呼ぶことができます。これらは完全に異なるドメインを持つ2つの完全に別々のRails 5アプリケーションです。アクションケーブルとAngularJSクロスドメインインテグレーション

基本的に、私はコアを介してアクションケーブルを統合しようとしており、フロントと話をしています。私はフロント:https://www.npmjs.com/package/angular-actioncableのためにここにこのサービスを使用しています。コアまでは、基本的なアクションケーブルのセットアップです。

問題:2つの別々のドメインでハンドシェイクを動作させるのに問題があります。私はオンラインで見つけることができるすべてを読んだことがあります。残念ながら、あまり情報はありません。これまでにこれをやったことがあれば、助けてください!

注:私はRedisサーバーを実行していますが、別のポートを使用して開発中の別のドメインを模倣しています。

コア:

chat_channel.rb

class ChatChannel < ApplicationCable::Channel 
    def subscribed 
    stream_from 'http://localhost:2000/#/chat' 
    end 

    def unsubscribed 
    stop_all_streams 
    end 

    def receive(data) 
    ActionCable.server.broadcast('http://localhost:2000/#/chat', data) 
    end 

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

route.js

mount ActionCable.server => '/cable' 

cable.yml

ChatCtrl.js

app.controller('ChatCtrl', ['$scope', 'ActionCableChannel', 
function($scope, ActionCableChannel) { 

    $scope.inputText; 
    $scope.chatData = []; 

    var consumer = new ActionCableChannel("ChatChannel"); 
    var callback = function(message) { 
    $scope.chatData.push(message); 
    }; 

    consumer.subscribe(callback).then(function() { 
    $scope.sendToMyChannel = function(message) { 
     consumer.send(message, 'speak'); 
    }; 
    $scope.$on("$destroy", function() { 
     consumer.unsubscribe().then(function() { 
     $scope.sendToMyChannel = undefined; 
     }); 
    }); 
    }); 

} 
]); 


// Action Cable Configuration 
app.run(function (ActionCableConfig) { 
    ActionCableConfig.wsUri = 'localhost:4000'; 
}); 

エラーメッセージ:/ environments.rb

config.action_cable.disable_request_forgery_protection = true 

フロント

development: adapter: redis url: redis://localhost:6379 test: adapter: async production: adapter: redis url: redis://localhost:6379 

設定nはコンソール:

enter image description here

答えて

1

ActionCableConfig.wsUri = 'ws://localhost:4000'; 
+0

おかげで、それが対応するので、時間がかかった申し訳ありませんが試してみてください。これはうまくいった! – CarlsBad505

関連する問題