实时更新数据，无需刷新：a,如何使用Turbolinks clearCache(), b Action Cable

视频：

https://gorails.com/episodes/how-to-use-turbolinks-clearCache?autoplay=1

用途：

更方便的实时从服务器更新局部网页，在这页更新了一条记录的显示方式，

再打开的之前网页的相同位置或相同的功能模块显示也会同步更新。

把Turbolinks.clearCache()，比如放在你写的create.js.erb的第一行。

理解：

原代码写在gem中，它清除了JS behavior of a 302 redirect通过增加一行代码：

第一行是清除

script << "Turbolinks.clearCache()"

第二行是告诉Turbolinks下一步显示什么页面：

script << "Turbolinks.visit(#{location.to_json}, #{visit_options.to_json})"

现在Turbolinks生效了。无论何时一个redirect发送同时请求是一个JS请求，这2行代码会加入的response

提示：

1.如果不加这句话，turbolinks只会reload之前的网页中的数据。并不会取server-side获取新数据。

加上这句话，会强迫浏览器从服务器reload对应的数据，替代trubolinks cash。

2.如果不使用turbolinks，你就得使用HTTP headers for caching, 告诉它必须总是从服务器上reload这个网页。

⚠️：

302 redirect: 302 代表暂时性转移(Temporarily Moved )

301 redirect: 301 代表永久性转移(Permanently Moved)

---

敏捷rails5.1同步更新的知识点：

rails5有了使用web Sockets的action cable库，更强的实现实时更新。

http://www.cnblogs.com/chentianwei/p/8690304.html

同时，简化了推数据到所有连接的browsers。

比如：

打开了2个浏览器窗口，其中一个窗口的数据显示更新了，另一个窗口无需刷新也会同步更新。

三步走：

1.创建一个频道

2.广播数据

3.接收数据。

例子：建立products的频道：

第一步：

rails g channel products

　　create app/channels/products_channel.rb

　　identical app/assets/javascripts/cable.js

　　create app/assets/javascripts/channels/products.coffee

在开发模式下，Channels有安全机制，默认Rails只允许从localhost存取。如果需要多个技巧同时开发，需要设置：config/environments/development.rb:

config.action_cable.disable_request_forgery_protection = true

然后在app/channels/products_channel.rb中设置，订阅的频道名字是"products"

class ProductsChannel < ApplicationCable::Channel

def subscribed

stream_from "products"

end

def unsubscribed

# Any cleanup needed when channel is unsubscribed

end

end

第二步：广播数据：

在products_controller.rb:

def update

respond_to do |format|

if @product.update(product_params)

format.html { redirect_to @product,

notice: 'Product was successfully updated.' }

format.json { render :show, status: :ok, location: @product }

@products = Product.all

ActionCable.server.broadcast 'products',

　　　　　　html: render_to_string('store/index', layout: false)

else

format.html { render :edit }

format.json { render json: @product.errors,

status: :unprocessable_entity }

end

end

end

因为使用store/index,上面显示了所有products。所以设置了@products实例变量。

'products' 是stream名字

使用，render_to_string(*args), 只会返回一个string。不会设置respond_body。

layout: false，只要view，不要整个page。

Broadcast messages是由Ruby hashes组成的, 会转化为JSON，穿越wire，然后以一个JavaScript object结束。

本案例使用html作为hash key.

这是格式：具体一个格式案例见api文档： ActionCable::Server::Broadcasting

broadcast(broadcasting, message, coder: ActiveSupport::JSON)

broadcasting是一个命名的stream名字。

第三步：在客户端接受数据

涉及订阅频道和定义当数据收到后做什么。

在products.coffee中，生成了一个类，和三个方法：connected, disconnected, received。

本案例关心的是received: 因为他called送到channel的数据。这个数据是一个html属性，由更新的HTML组成。

你可以使用getElementByTagName来定位所有main elements。

  received: (data) ->
    document.getElementsByTagName("main")[0].innerHTML = data.html