实时更新数据,无需刷新: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 数据库实时更新

无需刷新页面如何使用 ajax/jQuery 显示数据库中的值

Ajax无刷新

DataGrid 刷新选中问题

每秒异步更新 UI,无需从服务器刷新页面