Rails中如何使用Turbostreams進(jìn)行實(shí)時(shí)頁(yè)面更新

Turbostreams 是 Rails 7 中引入的一種實(shí)時(shí)頁(yè)面更新技術(shù)，類似于 WebSocket。通過(guò) Turbostreams，可以在不刷新整個(gè)頁(yè)面的情況下，實(shí)時(shí)更新頁(yè)面的部分內(nèi)容。

要在 Rails 中使用 Turbostreams 進(jìn)行實(shí)時(shí)頁(yè)面更新，首先需要在控制器中使用 turbo_stream 方法生成實(shí)時(shí)更新的片段，然后在視圖中使用 turbo_stream 標(biāo)簽來(lái)渲染這些實(shí)時(shí)更新的片段。

下面是一個(gè)簡(jiǎn)單的示例，演示如何在 Rails 中使用 Turbostreams 進(jìn)行實(shí)時(shí)頁(yè)面更新：

1. 在控制器中使用 turbo_stream 方法生成實(shí)時(shí)更新的片段：

class MessagesController < ApplicationController
  def create
    @message = Message.new(message_params)

    if @message.save
      turbo_stream.append "messages", partial: "message", locals: { message: @message }
    else
      render :new
    end
  end

  private

  def message_params
    params.require(:message).permit(:content)
  end
end

2. 在視圖中使用 turbo_stream 標(biāo)簽來(lái)渲染實(shí)時(shí)更新的片段：

<%= form_with model: @message, url: messages_path, id: "new_message" do |form| %>
  <%= form.text_field :content %>
  <%= form.submit %>
<% end %>

<div id="messages">
  <%= render @messages %>
</div>

<turbo_stream action="append" target="messages">
  <%= render partial: "message", collection: @messages %>
</turbo_stream>

在上面的示例中，當(dāng)用戶提交表單創(chuàng)建新消息時(shí)，控制器會(huì)使用 turbo_stream.append 方法生成實(shí)時(shí)更新的片段，然后在視圖中使用 turbo_stream 標(biāo)簽來(lái)渲染這個(gè)實(shí)時(shí)更新的片段。

通過(guò)這種方式，可以在不刷新整個(gè)頁(yè)面的情況下，實(shí)時(shí)更新頁(yè)面的內(nèi)容。Turbo Streams 提供了多種不同的操作類型，如 append、prepend、replace 等，可以根據(jù)具體的需求來(lái)選擇合適的操作類型。