无法从 React 前端的 ActionCable 访问数据 [英] Cannot access data from ActionCable on React front-end

问题描述

我正在尝试使用 actioncable 从 rails 后端广播属于某个游戏的消息.

I am trying to broadcast Messages that belong to a certain Game from a rails backend using actioncable.

在我的消息控制器中:

  def create
@game = Game.find(message_params[:game_id])
@message = Message.new(message_params)
if @message.save
  serialized_data = ActiveModelSerializers::Adapter::Json.new(
    MessageSerializer.new(@message)
  ).serializable_hash
  MessagesChannel.broadcast_to @game, serialized_data
  head :ok
end
end

在我的消息频道中:

  def subscribed
    @game = Game.find(params[:id][:game_id])
    stream_from @game
  end

在前端，我正在使用这个文件:

On the frontend, I am using this file:

import ActionCable from 'actioncable';
import { CABLE } from "../constants";

export default function MessagesSubscription(
  game_id,
  { onUpdate = () => {} } = {}
) {
  // 2. Define our constructor
  this.cable = ActionCable.createConsumer(CABLE);
  // this.channel;
  this.game_id = game_id;
  this.onUpdate = onUpdate;

  // 3. Define the function we will call to subscribe to our channel
  this.subscribe = () => {
    console.log("subscribed")
    this.channel = this.cable.subscriptions.create(
      { channel: 'MessagesChannel', id: this.game_id },
      {
        connected: this.connected,
        disconnected: this.disconnected,
        received: this.received,
        rejected: this.rejected,
      }
    );
  };

  // 4. Define our default ActionCable callbacks.
  this.received = (data) => {
    console.log(`Received Data: ${data}`);

    this.onUpdate(data);
  };

  this.connected = () => {
    console.log(`this.connected`);
  };

  this.disconnected = () => {
    console.warn(`this.disconnected.`);
  };

  this.rejected = () => {
    console.warn('I was rejected! :(');
  };
}

问题是在客户端我可以点击连接、断开连接和拒绝，但我无法点击接收.

The problem is that on the client side I can hit connected, disconnected, and rejected, but I can't hit received.

在运行服务器和客户端时，如果我查看终端中的 rails 后端，我会看到以下内容:

While running the server and the client, if I look at the rails backend in the terminal I see the following:

MessagesChannel 正在传输订阅确认MessagesChannel 正在从 # 开始流式传输GET "/api/v1/cable" for 127.0.0.1 at 2019-03-21 10:29:09 -0400 StartedGET "/api/v1/cable/" [WebSocket] for 127.0.0.1 at 2019-03-21 10:29:09-0400 成功升级到 WebSocket (REQUEST_METHOD: GET, HTTP_CONNECTION: Upgrade, HTTP_UPGRADE: websocket) 无法执行命令来自({命令"=>订阅"，"标识符"=>"{\"频道\":\"MessagesChannel\",\"game_id\":\"15\"}"})[NoMethodError - 未定义的方法 []' for nil:NilClass]:/Users/flatironschool/Development/code/Flatiron/mod5/project/deep_forest_api/app/channels/messages_channel.rb:3:in订阅' |/Users/flatironschool/.rvm/gems/ruby-2.6.1/gems/actioncable-5.2.2.1/lib/action_cable/channel/base.rb:179:in block in subscribe_to_channel' |/Users/flatironschool/.rvm/gems/ruby-2.6.1/gems/activesupport-5.2.2.1/lib/active_support/callbacks.rb:109:in 阻塞在 run_callbacks' |/Users/flatironschool/.rvm/gems/ruby-2.6.1/gems/activesupport-5.2.2.1/lib/active_support/execution_wrapper.rb:83:inwrap' |/Users/flatironschool/.rvm/gems/ruby-2.6.1/gems/actioncable-5.2.2.1/lib/action_cable/engine.rb:68:in '

MessagesChannel is transmitting the subscription confirmation MessagesChannel is streaming from # Started GET "/api/v1/cable" for 127.0.0.1 at 2019-03-21 10:29:09 -0400 Started GET "/api/v1/cable/" [WebSocket] for 127.0.0.1 at 2019-03-21 10:29:09 -0400 Successfully upgraded to WebSocket (REQUEST_METHOD: GET, HTTP_CONNECTION: Upgrade, HTTP_UPGRADE: websocket) Could not execute command from ({"command"=>"subscribe", "identifier"=>"{\"channel\":\"MessagesChannel\",\"game_id\":\"15\"}"}) [NoMethodError - undefined method []' for nil:NilClass]: /Users/flatironschool/Development/code/Flatiron/mod5/project/deep_forest_api/app/channels/messages_channel.rb:3:in subscribed' | /Users/flatironschool/.rvm/gems/ruby-2.6.1/gems/actioncable-5.2.2.1/lib/action_cable/channel/base.rb:179:in block in subscribe_to_channel' | /Users/flatironschool/.rvm/gems/ruby-2.6.1/gems/activesupport-5.2.2.1/lib/active_support/callbacks.rb:109:in block in run_callbacks' | /Users/flatironschool/.rvm/gems/ruby-2.6.1/gems/activesupport-5.2.2.1/lib/active_support/execution_wrapper.rb:83:in wrap' | /Users/flatironschool/.rvm/gems/ruby-2.6.1/gems/actioncable-5.2.2.1/lib/action_cable/engine.rb:68:in block (3 levels) in '

推荐答案

我从学校的 TCF 那里得到了帮助.

I got help from a TCF at my school.

在我的消息频道中，我将其更改为:

In my messages channel I changed it to:

  def subscribed
    @game = Game.find(params[:id][:game_id])
    stream_for @game
  end

因此，使用 stream_for 而不是 stream_from.

So, stream_for instead of stream_from.

此外，我还改用 npm 包 react-actioncable-provider.

Additionally, I also switched to using the npm package react-actioncable-provider.

我的客户端 JavaScript 在 React 中，如下所示:

My client side javascript is in React and looks like this:

import { ActionCable } from 'react-actioncable-provider';
import React, { Component, Fragment } from 'react';
import { CABLE, AUTH_HEADERS } from '../constants';
import { connect } from 'react-redux';
import Message from '../components/Message';

class Cable extends Component {

  render () {
    console.log("Cable.js")
    return (
      <Fragment>
        <ActionCable
          key={this.props.game_id}
          channel={{ channel: "MessagesChannel", game_id: this.props.game_id }}
          onReceived={(data) => console.log("handleReceived: ", data)}
        />
    </Fragment>
    )
  }
}

const mapStateToProps = state => {
  return { state }
}

const mapDispatchToProps = dispatch => {
  return {
    getMessages: data => dispatch({ type: "LOAD_MSGS", payload: data })
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(Cable);

我现在可以接收 ActionCable 的回复.

I am now able to receive and responses from ActionCable.

这篇关于无法从 React 前端的 ActionCable 访问数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！