ActionCableを別のホストに接続する

Question

私は、バックエンドサーバーとしてrails 5アプリを、フロントエンドアプリケーションにemberアプリケーションを実行しています。彼らは、2個の異なるドメインでホストされている二つの別々のアプリケーションです - たとえば、backend.devとfrontend.dev

Railsアプリケーションは、次のようになりますapp/channels/application_cable/connection.rbで発見シンプルな接続クラスを持っています

module ApplicationCable 
    class Connection < ActionCable::Connection::Base 
    def connect 
     Rails.logger.debug("env: #{env.inspect}") 
     Rails.logger.info("cookies.signed: #{cookies.signed.inspect}") 
    end 
    end 
end 

私はシンプルなベースチャンネルを持っています以下でapp/channels/application_cable/channel.rbのクラス：

module ApplicationCable 
    class Channel < ActionCable::Channel::Base 
    end 
end 

そしてapp/channels/events_channel.rbで、そのクラスの単一の実装：

class EventsChannel < ApplicationCable::Channel 
    def subscribed 
    Rails.logger.debug("env: #{env.inspect}") 
    Rails.logger.info("cookies.signed: #{cookies.signed.inspect}") 
    stream_from 'events' 
    end 
end 

私は物事のember側で、私はemberケーブルパッケージを使用しています。私が得るとき、私は一部デバッグ出力を見ているように私は、私の消費者が正しくセットアップされていることをかなり確信している

cableService: Ember.inject.service('cable'), 

setupConsumer: Ember.on('init', function() { 
    let service = this.get('cableService'); 
    let consumer = service.createConsumer(`ws://backend.dev`); 
    let channel = 'EventsChannel'; 

    consumer.subscriptions.create(channel, { 
    disconnected() { 
     Ember.debug(`${channel}#disconnected`); 
    }, 

    connected() { 
     Ember.debug(`${channel}#connected`); 
    }, 

：私は次のようにコントローラクラスを拡張して、私のフロントエンドでのセットアップの私の消費者をしました私のJSコンソールに次のような出力：しかし

DEBUG: EventsChannel#disconnected 

は、私も同様に、コンソールに奇妙なエラーを見ている：

WebSocket connection to 'ws://backend.dev/' failed: Error during WebSocket handshake: Unexpected response code: 200 

私はSじゃありませんここでレスポンスコードのエラーをどうすればいいのですか？そして、私のレールアプリには何も記録されていません。ドメイン間でactioncableを動作させるためにセットアップが必要なことは何ですか？ここで200応答コードが意味することは何ですか？

Answer 1

この試してみてください：あなたのアプリに続いて

# routes.rb 
Rails.application.routes.draw do 
    # your code 
    mount ActionCable.server => '/cable' 
end 

を：

let consumer = service.createConsumer(`ws://backend.dev/cable`); 

---

あなたが握手問題に直面した場合、いくつかのソリューションがあります

1. チェックあなたの場合フロントエンドアプリはと互換性があります10以上。あなたのウェブサイトがあなたのENVのcofigファイルにconfig.web_socket_server_url = 'ws://backend.dev/cable'を追加config.action_cable.allowed_request_origins

2. である場合

3. チェック。

4. 高速の「汚れた」ハックを使用できます。ちょうどあなたのENVのcofigファイルに次の行を追加します。

   config.action_cable.disable_request_forgery_protection = true