React - Rails 5动作电缆

时间:2018-02-18 22:38:49

标签: reactjs ruby-on-rails-5 actioncable

我现在尝试了很多东西,但我似乎无法将消息传播给客户。

在这个应用程序中,我得到了一个执行频道订阅的react组件。我连接的应用程序的控制台输出显示在我的日志中,但收到的只是没有被调用。

My React组件:

  # app/assets/javascripts/components/records.js.coffee
  App.record = null
  @Records = React.createClass
    getInitialState: ->
      @setupSubscription()
      records: @props.data
    getDefaultProps: ->
      records: []
    setupSubscription: ->
      App.record = App.cable.subscriptions.create "RecordChannel",
        connected: ->
          console.log "connected to RecordChannel"
          # Timeout here is needed to make sure Subscription
          # is setup properly, before we do any actions.
          #setTimeout: ->
          #  this.perform 'follow',
          #               {message_id: this.message_id}
          #  ,1000
        received: (data) ->
          console.log "data received"
          @addRecord(data)
      #record_subs = App.record
    addRecord: (record) ->
      records = React.addons.update(@state.records, { $push: [record] })
      @setState records: records
    deleteRecord: (record) ->
      index = @state.records.indexOf record
      records = React.addons.update(@state.records, { $splice: [[index,1]] })
      @replaceState records: records
    updateRecord: (record,data) ->
      index = @state.records.indexOf record
      records = React.addons.update(@state.records, { $splice: [[index,1,data]] })
      @replaceState records: records
    credits: ->
      credits = @state.records.filter (val) -> val.amount >= 0
      credits.reduce ((prev, curr) ->
        prev + parseFloat(curr.amount)
      ), 0
    debits: ->
      debits = @state.records.filter (val) -> val.amount < 0
      debits.reduce ((prev, curr) ->
        prev + parseFloat(curr.amount)
      ), 0
    balance: ->
      @debits() + @credits()
    render: ->
      React.DOM.div
        className: 'records'
        React.DOM.h2
          className: 'title'
          'Records'
        React.DOM.div
          className: 'row'
          React.createElement AmountBox, type: 'success', amount: @credits(), text: 'Credit'
          React.createElement AmountBox, type: 'danger', amount: @debits(), text: 'Debit'
          React.createElement AmountBox, type: 'info', amount: @balance(), text: 'Balance'
        React.createElement RecordForm, handleNewRecord: @addRecord
        React.DOM.hr null
        React.DOM.table
          className: 'table table-bordered'
          React.DOM.thead null,
            React.DOM.tr null,
              React.DOM.th null, 'Date'
              React.DOM.th null, 'Title'
              React.DOM.th null, 'Amount'
              React.DOM.th null, 'Actions'
          React.DOM.tbody null,
            for record in @state.records
              React.createElement Record, key: record._id["$oid"], record: record, handleDeleteRecord: @deleteRecord, handleEditRecord: @updateRecord

不确定您需要查看哪一段代码,请告诉我,我会发布

1 个答案:

答案 0 :(得分:0)

我终于弄清楚我的申请中出了什么问题。我的订阅方法在堆栈中是错误的。事实证明我在订阅中使用的是stream_for而不是stream_for

class RecordChannel < ApplicationCable::Channel
  def subscribed
    # stream_from "some_channel"
    stream_for ("record_#{current_user['info']['nickname']}_channel")
  end

class RecordChannel < ApplicationCable::Channel
  def subscribed
    # stream_from "some_channel"
    stream_from ("record_#{current_user['info']['nickname']}_channel")
  end