Update data in real time without refreshing: A, how to use Turbolinks ClearCache (), B Action Cable

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

Use:

More convenient to update the local page from the server in real time, on this page to update the display of a record,

The same location or the same function module that was opened before the page is also updated synchronously.

Put Turbolinks.clearcache (),

Turbolinks.  ClearCache();  

For example, put in the first line of Xx.js.erb you wrote.

If this is not the case, Turbolinks will only reload the data in the previous page. Does not take server-side to get new data.

Add this sentence, will force the browser from the server reload corresponding data, instead of trubolinks cash.

If you don't use turbolinks, you'll have to use HTTP headers for caching, telling it to always reload this page from the server.

Agile rails5.1 Knowledge points for synchronizing updates:

RAILS5 has an action cable library that uses web sockets to make real-time updates more robust.

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

At the same time, it simplifies the browsers of pushing data to all connections.

Like what:

Open 2 Browser windows, one of the window's data display is updated, the other window does not need to refresh also synchronize updates.

Three-step walk:

1. Create a Channel

2. Broadcast data

3. Receive data.

Example: Creating a channel for products:

The first step:

Rails G Channel Products

Create App/channels/products_channel.rb

Identical app/assets/javascripts/cable.js

Create App/assets/javascripts/channels/products.coffee

In development mode, channels has a security mechanism, and the default rails only allows access from localhost. If you need multiple techniques to develop at the same time, you need to set: config/environments/development.rb:

Config.action_cable.disable_request_forgery_protection = True

Then set in the APP/CHANNELS/PRODUCTS_CHANNEL.RB, the subscribed channel name is "Products"

Class Productschannel < Applicationcable::channel

def subscribed

stream_from "Products"

End

def unsubscribed

# Any cleanup needed if channel is unsubscribed

End

End

The second step: Broadcast data:

In 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

Because of the use of Store/index, all products are shown above. So the @products instance variable is set.

' Products ' is the stream name

With,render_to_string (*args), only one string is returned. Respond_body is not set.

Layout:false, as long as the view, not the entire page.

Broadcast messages is made up of Ruby hashes, which translates to JSON, crosses the wire, and ends with a JavaScript object.

This case uses HTML as the hash key.

This is the format: a specific format case See API Documentation: actioncable::server::broadcasting

Broadcast (Broadcasting, message, Coder:activesupport::json)

Broadcasting is a named stream name.

Step three: Accept data on the client

involves subscribing to channels and defining what to do when the data is received.

In Products.coffee , a class, and three methods are generated:connected, disconnected, received.

This case is concerned with received: because he called the data sent to the channel. This data is an HTML attribute, made up of updated HTML.

You can use Getelementbytagname to locate all main elements.

  Received: (data),    document.getelementsbytagname ("main") [0].innerhtml = data.html

Update data in real time without refreshing: A, how to use Turbolinks ClearCache (), B Action Cable