Javascript 如何通过WebSocket在RubyonRails和reactJS之间发送数据

我正在尝试制作一个应用程序，在backedn中使用ruby-on-rails，在front中使用reactjs。我预计tahat会有几个人同时使用此应用程序，并且该应用程序应该在不刷新页面或重定向到某些新路线的情况下工作（除了登录、注销、注册…）。对于后端和前端之间的通信，我尝试使用WebSocket，但在终端和浏览器控制台中出现错误。这两个错误大约每秒钟重复一次

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

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

最后一行只是来自通道中subscribed方法的put。它在那里，所以我可以跟踪数据流

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

在我的根文件中，我有：

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

。。。
从“action cable react”导入ActionCable
var actionCable=actionCable.actionCable
var cable=actionCable.createConsumer（'ws://localhost:5000/cable'）；
控制台日志（电缆）
/*
控制台日志（电缆）输出：
n{url:“ws://localhost:5000/cable”，订阅：t，连接：t，连接监视器：t}
>连接：t
>连接监视器：t
>订阅：t
>url:“ws://localhost:5000/电缆”
*/
...
ReactDOM.render(
,
document.getElementById（'应用程序'）
);

这是我第一次尝试WebSocket，我不知道发生了什么。我在谷歌上搜索了一些关于stackoverflow的博客帖子和问题，但是我找不到 它起作用了。如果您能帮助我从rails cabel和console中输入一些数据，我将不胜感激。请在浏览器中记录一些数据

---

谢谢大家!

见我上面的评论。由于需要大量的调试，很难回答您的问题。然而，如果您不能使用，那么我的建议是使用pusher-faker作为您的websocket传输工具。（参见pusher faker gem）它易于设置，并且我发现诊断系统问题要容易得多。一旦你把事情做好，你可以切换回动作线

---

我知道这不是一个很好的答案，但我会这么做：-）

这不是一个真正的答案，只是一个建议：检查所有你想做的事情，然后用ruby（客户端和服务器）编写所有东西如果您需要帮助，我建议您研究一下RubyonRails ActionCable客户端。ActionCable与

socket.io

非常相似，它通过Websocket连接实现通信协议，与原始web套接字不同。您可以使用中间件（如）或其他解决方案将原始web套接字与RoR结合使用。

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