Question

对于带有Devise的Rails 5.2.2应用程序，我使用以下文件实现了https://guides.rubyonrails.org/action_cable_overview.html#example-1-user-appearances的存在示例：

app / channels / appearance_channel.rb

class AppearanceChannel < ApplicationCable::Channel
  def subscribed
    current_user.appear
  end

  def unsubscribed
    current_user.disappear
  end

  def appear(data)
    current_user.appear(on: data['appearing_on'])
  end

  def away
    current_user.away
  end
end

app / assets / javascripts / cable / subscriptions / appearance.coffee

App.cable.subscriptions.create "AppearanceChannel",
  # Called when the subscription is ready for use on the server.
  connected: ->
    @install()
    @appear()

  # Called when the WebSocket connection is closed.
  disconnected: ->
    @uninstall()

  # Called when the subscription is rejected by the server.
  rejected: ->
    @uninstall()

  appear: ->
    # Calls `AppearanceChannel#appear(data)` on the server.
    @perform("appear", appearing_on: $("main").data("appearing-on"))

  away: ->
    # Calls `AppearanceChannel#away` on the server.
    @perform("away")


  buttonSelector = "[data-behavior~=appear_away]"

  install: ->
    $(document).on "turbolinks:load.appearance", =>
      @appear()

    $(document).on "click.appearance", buttonSelector, =>
      @away()
      false

    $(buttonSelector).show()

  uninstall: ->
    $(document).off(".appearance")
    $(buttonSelector).hide()

然后，我在users模型中添加了以下两种方法，以在无论是否存在用户时都更新is_present属性。

app / models / users.rb

[...]
def appear
  self.update_attributes(is_present: true)
end

def disappear
  self.update_attributes(is_present: false)
end
[...]

在索引页面main#index上，显示所有用户的存在状态列表：

app / controllers / main_controller.rb

[...]
def index
  @users = User.order(:last_name)
end
[...]

app / views / main / index.html.erb

<h1>Users</h1>

<%= render partial: "presence_table", locals: {users: @users} %>

app / views / main / _presence_table.html.erb

<div class="presence-table">
  <table class="table table-striped">
    <thead>
      <tr>
        <th><%= User.human_attribute_name("last_name") %></th>
        <th><%= User.human_attribute_name("is_present") %></th>
      </tr>
    </thead>
    <tbody>
      <% users.each do |user| %>
        <tr>
          <td><%= user.last_name %></td>
          <td><%= user.is_present %></td>
        </tr>
      <% end %>
    </tbody>
  </table>
</div>

问题

当用户的状态发生变化时，如何使用动作电缆自动更新表格？以我的理解，现有零件应该是可行的，但我不知道该怎么做。

我不希望用户必须重新加载main#index页面来获取最新的状态列表，而是在用户状态更改时推送_presence_table.html.erb的内容。

Answer 1

在我看来，当客户端连接或将自己设置为离开时，您实际上只是在更新数据库中的用户状态。

您还需要将这些事件广播到频道，其他客户端需要侦听事件并操纵DOM。

在客户端，您需要在AppearanceChannel中实现received -> (data)方法。每当服务器向该频道的订户发送事件时，就会调用此方法。

以下是纯JS中的代码：

App.presence = App.cable.subscriptions.create("AppearanceChannel", {
  received: (data) => {
    // here you have access to the parameters you send server side, e.g. event and user_id
    let presenceEl = document.getElementById(data.user_id).querySelectorAll("td")[1]
    if (data.event == "disappear") {
      presenceEl.innerHtml = "false"
    } else {
      presenceEl.innerHtml = "true"
    }
  }
})

在app/models/users.rb的服务器上

def appear
  self.update_attributes(is_present: true)

  ActionCable.server.broadcast("appearance_channel", event: "appear", user_id: id)
end

def disappear
  self.update_attributes(is_present: false)

  ActionCable.server.broadcast("appearance_channel", event: "disappear", user_id: id)
end

使用动作电缆更新状态表

问题

1 个答案: