使用Rails 5- Action Cable进行敏捷Web开发

Question

我正在学习本书中的ActionCable示例。所有代码都按上述方式添加，我可以看到ActionCable服务器日志命中，但更新页面从不更新项目的成本。我遗漏了什么？

下面的日志条目告诉我ActionCable正在触发。代码如下。

  Product Load (0.1ms)  SELECT "products".* FROM "products"
  Rendered store/index.html.erb (6.0ms)
[ActionCable] Broadcasting to products: {:html=>"<p id=\"notice\"></p>\n\n<h1>Your Pragmatic Catalog</h1>\n\n\n\n      <div class=\"entry\">\n\n        <img src=\"/assets/dcbang-28758120ca6616f3f95a4b73dda112a1f8e6ac3175e35b67e78d0ab0bd177566.jpg\" alt=\"Dcbang\" />\n        <h3>Rails, Angular, Postgres, and Bootstrap</h3>\n\n        <p>\r\n      <em>Powerful, Effective, and Efficient Full-Stack Web Development</em>\r\n      As a Rails developer, you care about user experience and performance,\r\n      but you also want simple and maintainable code. Achieve all that by\r\n      embracing the full stack of web development, from styling with\r\n      Bootstrap, building an interactive user interface with AngularJS, to\r\n      storing data quickly and reliably in PostgreSQL. Take a holistic view of\r\n      full-stack development to create usable, high-performing applications,\r\n      and learn to use these technologies effectively in a Ruby on Rails\r\n      environment.\r\n      </p>\n\n        <div class=\"price_line\">\n        <span class=\"price\">$80.00</span>\n\n          <form class=\"button_to\" method=\"post\" action=\"/line_items?product_id=2\" data-remote=\"true\"><input type=\"submit\" value=\"Add to Cart\" /><input type=\"hidden\" name=\"authenticity_token\" value=\"FCedsTsN/GG6cm0VhcmY7SdGjpRzCKuuSyxKJt/Kak1Xdv/gUFVU1UYXr8n7nm2cKgvjwS23zcBorzf5P5lieg==\" /></form>\n\n        </div>\n\n      </div>\n\n\n      <div class=\"entry\">\n\n        <img src=\"/assets/7apps-f67c3d908f537bac34a290206cc1db4c6f4611196c550e49ba836b796a2602bb.jpg\" alt=\"7apps\" />\n        <h3>Seven Mobile Apps in Seven Weeks</h3>\n\n        <p>\r\n      <em>Native Apps, Multiple Platforms</em>\r\n      Answer the question “Can we build this for ALL the devices?” with a\r\n      resounding YES. This book will help you get there with a real-world\r\n      introduction to seven platforms, whether you’re new to mobile or an\r\n      experienced developer needing to expand your options. Plus, you’ll find\r\n      out which cross-platform solution makes the most sense for your needs.\r\n      </p>\n\n        <div class=\"price_line\">\n        <span class=\"price\">$26.00</span>\n\n          <form class=\"button_to\" method=\"post\" action=\"/line_items?product_id=3\" data-remote=\"true\"><input type=\"submit\" value=\"Add to Cart\" /><input type=\"hidden\" name=\"authenticity_token\" value=\"faFaDWHEcOVsP5x1x8s+A3Zd6fpFbVsW4JZzdDgpNOA+8DhcCpzYUZBaXqm5nMtyexCErxvSPXjDFQ6r2Ho81w==\" /></form>\n\n        </div>\n\n      </div>\n\n\n      <div class=\"entry\">\n\n        <img src=\"/assets/adrpo-23a974519e0d4353c6906f82b40bd4cd98b09a2ce748825370c7aa59763f5ac7.jpg\" alt=\"Adrpo\" />\n        <h3>Ruby Performance Optimization</h3>\n\n        <p>\n      <em>Why Ruby Is Slow, and How to Fix It</em>\n      You don’t have to accept slow Ruby or Rails performance. In this\n      comprehensive guide to Ruby optimization, you’ll learn how to write\n      faster Ruby code—but that’s just the beginning. See exactly what makes\n      Ruby and Rails code slow, and how to fix it. Alex Dymo will guide you\n      through perils of memory and CPU optimization, profiling, measuring,\n      performance testing, garbage collection, and tuning. You’ll find that\n      all those “hard” things aren’t so difficult after all, and your code\n      will run orders of magnitude faster.\n      </p>\n\n        <div class=\"price_line\">\n        <span class=\"price\">$46.00</span>\n\n          <form class=\"button_to\" method=\"post\" action=\"/line_items?product_id=4\" data-remote=\"true\"><input type=\"submit\" value=\"Add to Cart\" /><input type=\"hidden\" name=\"authenticity_token\" value=\"tN4iplT2QTAi9zwvn9ZXkNHwKPJouOcXz+zr0Pnytuz3j0D3P67phN6S/vPhgaLh3L1FpzYHgXnsb5YPGaG+2w==\" /></form>\n\n        </div>\n\n      </div>\n\n"}
Redirected to http://localhost:3000/products/2
Completed 302 Found in 23ms (ActiveRecord: 1.8ms)


  **#assets/javascripts/channels/products.coffee**
  App.products = App.cable.subscriptions.create "ProductsChannel",
  connected: ->
    # Called when the subscription is ready for use on the server

  disconnected: ->
    # Called when the subscription has been terminated by the server

  received: (data) ->
    # Called when there's incoming data on the websocket for this channel
  $(".store #main").html(data.html)



 **#app/views/store/index.html.erb**
    <p id="notice"><%= notice %></p>

    <h1>Your Pragmatic Catalog</h1>


    <% cache @products do %>
      <% @products.each do |product| %>
        <% cache product do %>

          <div class="entry">

            <%= image_tag(product.image_url) %>
            <h3><%= product.title %></h3>

            <%= sanitize(product.description) %>

            <div class="price_line">
            <span class="price"><%= number_to_currency(product.price) %></span>

              <%= button_to 'Add to Cart', line_items_path(product_id: product.id), remote:true %>

            </div>

          </div>

        <% end %>
      <% end %>
    <% end %>


#app/channels/products_channel.rb
class ProductsChannel < ApplicationCable::Channel
  def subscribed
    # stream_from "some_channel"
    stream_from "products"
  end

  def unsubscribed
    # Any cleanup needed when channel is unsubscribed

  end
end


#application.html.erb
<!DOCTYPE html>
<html>
  <head>
    <title>Pragprog Books Online Store</title>


    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
    <%= csrf_meta_tags %>
  </head>

  <body class='<%= controller.controller_name %>'>

    <div id="banner">

      <%= image_tag 'logo.svg', alt: 'The Pragmatic Bookshelf' %>
      <span class="title"><%= @page_title %></span>
    </div>

    <div id="columns">
      <div id="side">

        <div id="cart">
          <% if @cart %>
              <%= hidden_div_if(@cart.line_items.empty?, id: 'cart') do %>
                <%= render @cart %>
              <% end %>
          <% end %>


        </div>

        <ul>

          <li><a href="http://www...">Home</a></li>
          <li><a href="http://www.../faq">Questions</a></li>
          <li><a href="http://www.../news">News</a></li>
          <li><a href="http://www.../contact">Contact</a></li>

        </ul>

      </div>

      <div id="main">
        <%= yield %>
      </div>
    </div>


  </body>
</html>