实时更新数据,无需刷新:a,如何使用Turbolinks clearCache(), b Action Cable
Posted chentianwei
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了实时更新数据,无需刷新:a,如何使用Turbolinks clearCache(), b Action Cable相关的知识,希望对你有一定的参考价值。
https://gorails.com/episodes/how-to-use-turbolinks-clearCache?autoplay=1
用途:
更方便的实时从服务器更新局部网页,在这页更新了一条记录的显示方式,
再打开的之前网页的相同位置或相同的功能模块显示也会同步更新。
把Turbolinks.clearCache(),
Turbolinks.clearCache();
比如放在你写的xx.js.erb的第一行。
如果不加这句话,turbolinks只会reload之前的网页中的数据。并不会取server-side获取新数据。
加上这句话,会强迫浏览器从服务器reload对应的数据,替代trubolinks cash。
如果不使用turbolinks,你就得使用HTTP headers for caching, 告诉它必须总是从服务器上reload这个网页。
敏捷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
以上是关于实时更新数据,无需刷新:a,如何使用Turbolinks clearCache(), b Action Cable的主要内容,如果未能解决你的问题,请参考以下文章
C# MVC5 JavaScript Chart.js 饼图,无需刷新即可从 SQL Server 数据库实时更新