如何通過 websockets 在 ruby​​ on rails 和 reactJS 之間發送數據

Question

我正在嘗試制作一個應用程序，它使用 ruby​​ on rails 作為 backedn 和 reactjs 作為前端。 我希望有幾個人同時使用這個應用程序，該應用程序應該可以在不刷新頁面或重定向到一些新路由的情況下工作（除了登錄、注銷、注冊......）。 對於后端和前端之間的通信，我嘗試使用 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

最后一行只是頻道中訂閱方法的放置。 它在那里，所以我可以跟蹤數據流

我在 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 

而反應組件（組件名稱是 ）的一部分，它獲取和發送數據到后端看起來像這樣：

...
  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);
      }
    });
  }
...

在我的反應根文件中，我有：

...
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）它易於設置，而且我發現診斷系統問題要容易得多。 一旦你開始工作，你就可以切換回動作電纜。

我知道這不是一個很好的答案，但這是我會做的:-)