zoukankan      html  css  js  c++  java
  • 实时更新数据,无需刷新: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
  • 相关阅读:
    怎么才能学好php
    MySQL: ON DUPLICATE KEY UPDATE 用法 避免重复插入数据
    RabbitMQ挂掉问题处理
    页面出现假死的问题
    memkeys 安装时遇到的问题及解决办法
    php 中的$argv与$argc
    PHPExcell单元格中某些时间格式的内容不能正确获得的处理办法
    php中的后期静态绑定("Late Static Binding")
    mybatis从零阅读(一)大纲
    windows 命令
  • 原文地址:https://www.cnblogs.com/chentianwei/p/9296887.html
Copyright © 2011-2022 走看看