与 Rails REST api 反应 - actioncable

Question

我有一个 react 前端（不使用 react-rails gem），我想使用 Rails api 进行实时交互。我的rails 中有这个post.coffee 代码已经在为ActionCable 工作了：

App.post = App.cable.subscriptions.create "PostChannel",
connected: ->

disconnected: ->

received: (data) ->
console.log(data)
document.getElementById('test').innerHTML = data['message']

notify: (message) ->
@perform 'notify', message: message

还有这个 post_channel.rb

class PostChannel < ApplicationCable::Channel
  def subscribed
    stream_from "post_channel"
  end

  def unsubscribed
    # Any cleanup needed when channel is unsubscribed
  end

  def notify(data)
    ActionCable.server.broadcast 'post_channel', message: data['message']
  end
end

工作示例：

现在在我的反应应用程序中，假设在页面加载 [componentWillMount()] 时，我想从 post_channel.rb 中“调用”通知方法。我将如何做？我搜索了一些方法，看到这篇文章的接受答案：How to use ActionCable as API

所以在我的 react 应用程序的 componentWillMount() 生命周期中，我有以下代码：

  componentWillMount() {
     var cable = ActionCable.createConsumer('ws://localhost:8000/cable');
     cable.server.broadcast 'post_channel', { message: 'ji'}
  }

我从 development.rb 获得了ws url：

componentWillMount 中的代码甚至不调用我的 rails 应用程序中的 websocket。这个怎么做？我没有看到太多资源。或者你能推荐任何最适合 react-rails 堆栈的 websocket 库吗？

Answer 1

解决方案

应该类似于您的 Rails .coffee 代码

componentWillMount() {
  var cable = ActionCable.createConsumer('ws://localhost:8000/cable');

  var subscription = cable.subscriptions.create('PostChannel',
    {
      connected: function() {
        // this is where it calls the `notify` method in your `post_channel` immediately once this subscription has successfully connected
        this.notify({ message: 'ji'});

        // it seems to me that this `notify` code above is just a once-off action and that you won't be using this subscription anymore;
        // if that's the case then, uncomment the line below to immediately unsubscribe immediately after performing the `notify` above
        // this.unsubscribe();
      },
      received: function(data) {
        // there is a new message; do something about it here...
        console.log(data.message);
      },
      notify: function(message) {
        this.perform('notify', message: message)
      }
    }
  )
}

推荐

• 您应该只有一个 consumer 对象（仅使用一次 ActionCable.createConsumer('ws://localhost:8000/cable');），并在您的应用程序中使其全局化以加快速度（并减少代码），因为您将始终只无论如何都有一个 websocket 端点（Rails 服务器），除非您当然有不同的多个 websocket URL（在不同的 Rails 服务器或应用程序上？）。然后，您可能还希望将上面的 subscription 变量设置为全局变量，这样您就可以在任何地方执行 .notify(...)，而不是每次都实例化另一个订阅。

• 我刚刚构建了一个 gem live_record，它将记录同步到 JS 客户端。虽然它并不特意支持将“消息”推送到 Rails 服务器，但以防万一您发现它有用，请随意尝试！ :)