javascript - 如何通过 websockets 在 ruby​​ on rails 和 reactJS 之间发送数据

Question

我正在尝试制作一个应用程序，该应用程序使用 ruby​​ on rails 作为后端，使用 reactjs 作为前端。我希望 tahat 几个人会同时使用这个应用程序，并且该应用程序应该可以在不刷新页面或重定向到一些新路由的情况下运行(除了登录、注销、注册...)。对于后端和前端之间的通信，我正在尝试使用 websockets，但我在终端和浏览器的控制台中遇到错误。这两个错误大约每秒重复一次。

我在终端中得到的错误是:

13:58:00 rails.1   | [ActionCable] [kvesic.mislav@gmail.com] Finished "/cable/" [WebSocket] for 127.0.0.1 at 2017-05-04 13:58:00 +0200
13:58:00 rails.1   | [ActionCable] [kvesic.mislav@gmail.com] There was an exception - NoMethodError(undefined method `fetch' for nil:NilClass)
13:58:00 rails.1   | [ActionCable] [kvesic.mislav@gmail.com] /home/mislav/.rvm/gems/ruby-2.3.0/gems/actioncable-5.0.2/lib/action_cable/server/configuration.rb:25:in `pubsub_adapter'
13:58:00 rails.1   | /home/mislav/.rvm/gems/ruby-2.3.0/gems/actioncable-5.0.2/lib/action_cable/server/base.rb:76:in `block in pubsub'
  ...
# here are now a lot of errors like :
13:58:00 rails.1   | /home/mislav/.rvm/gems/ruby-2.3.0/gems/actioncable-5.0.2/lib/action_cable/channel/streams.rb:106:in `block in stop_all_streams'
13:58:00 rails.1   | /home/mislav/.rvm/gems/ruby-2.3.0/gems/actioncable-5.0.2/lib/action_cable/channel/streams.rb:105:in `each'
13:58:00 rails.1   | /home/mislav/.rvm/gems/ruby-2.3.0/gems/actioncable-5.0.2/lib/action_cable/channel/streams.rb:105:in `stop_all_streams'
  ...
14:01:09 rails.1   | /home/mislav/.rvm/gems/ruby-2.3.0/gems/concurrent-ruby-1.0.5/lib/concurrent/executor/ruby_thread_pool_executor.rb:319:in `block in create_worker'
14:01:10 rails.1   | Started GET "/cable" for 127.0.0.1 at 2017-05-04 14:01:10 +0200
14:01:10 rails.1   | Started GET "/cable/" [WebSocket] for 127.0.0.1 at 2017-05-04 14:01:10 +0200
14:01:10 rails.1   | Successfully upgraded to WebSocket (REQUEST_METHOD: GET, HTTP_CONNECTION: Upgrade, HTTP_UPGRADE: websocket)
14:01:10 rails.1   |   User Load (0.5ms)  SELECT  "users".* FROM "users" WHERE "users"."id" = 2 LIMIT $1  [["LIMIT", 1]]
14:01:10 rails.1   | [ActionCable] [kvesic.mislav@gmail.com] Registered connection (Z2lkOi8vYXV0b2Nvb3JkMy9Vc2VyLzI)
14:01:10 rails.1   | +++++++++++++ subscribed method

最后一行只是 channel 中订阅方法的 puts。它就在那里，所以我可以了解数据的流动方式

我在 chrome 控制台中得到的错误是:

Uncaught TypeError: Cannot read property 'received' of undefined
    at t.notify (eval at <anonymous> (application.js:1187), <anonymous>:1:1715)
    at t.message (eval at <anonymous> (application.js:1169), <anonymous>:1:1778)

app/channels/users_channel.rb 看起来像这样:

class UsersChannel < ApplicationCable::Channel  
  def subscribed
    puts "+++++++++++++ subscribed method"
    stream_from 'users_channel'
  end

  def speak(data)
    puts "+++++++++++++++ speak method: #{data}"
    ActionCable.server.broadcast 'users_channel', message: data['message']
  end
end 

react 组件(组件名称为 )获取数据并将数据发送到后端的部分如下所示:

...
  componentDidMount() {
    console.log("component did mount") //I see this in the console

    this.props.cable.subscriptions.create('UsersChannel', {
      message: "messsage",
      connected: function () {
        setTimeout(() => this.perform('speak',
          {data: "some dataaaa"}),
          1000);
      },

      received: function(data) {
        console.log(data);
      }
    });
  }
...

在我的 react 根文件中我有:

...
import ActionCable from 'action-cable-react'

var actionCable = ActionCable.ActionCable
var cable = actionCable.createConsumer('ws://localhost:5000/cable');
console.log(cable)
/*
console.log(cable) outpust:

n {url: "ws://localhost:5000/cable", subscriptions: t, connection: t, connectionMonitor: t}
> connection: t
> connectionMonitor: t
> subscriptions: t
> url: "ws://localhost:5000/cable"
*/

  ...

  ReactDOM.render(
    <Application cable={cable} />,
    document.getElementById('application')
  );

这是我第一次尝试使用 websockets，我不知道发生了什么。我在 stackoverflow 上搜索了一些关于这个主题的博文和问题，但我找不到 这行得通。如果您能帮我从 rails cabel 和 console.log 中放入一些数据，我将非常感激。在浏览器中记录一些数据。

谢谢!

Answer 1

请参阅我上面的评论。由于需要进行大量调试，因此很难回答您的问题。但是，如果您不能使用 http://ruby-hyperloop.io那么我的建议是使用 pusher-faker 作为您的 websocket 传输。 (请参阅 pusher-faker gem)它易于设置，而且我发现诊断系统问题要容易得多。一切正常后，您可以切换回 Action 电缆。

我知道这不是一个很好的答案，但这是我会做的:-)