Turbo Streams — เพิ่มคอมเมนต์แล้วเปลี่ยนหลายจุดในหน้าพร้อมกัน

โจทย์ — ส่งครั้งเดียว ต้องเปลี่ยนสามกล่อง

เป้าหมายของบทนี้คือส่วนคอมเมนต์ใต้บทความ หน้าตาแบบนี้ · ตอนกดปุ่ม "ส่งความคิดเห็น" มีสามกล่องในหน้าที่ต้องเปลี่ยน และอยู่คนละที่กัน:

ถ้าใช้ Turbo Frame (บท 131) เราเปลี่ยนได้แค่กรอบเดียว — กรอบที่ฟอร์มอยู่ข้างใน · กล่อง ① กับ ② อยู่นอกกรอบ เลยไม่ขยับ · ถ้าใช้ redirect_to แบบ scaffold ก็ได้ผลถูก แต่ได้ทั้งหน้าใหม่ทั้งที่อยากเปลี่ยนแค่สามจุด · ของที่ตอบโจทย์นี้พอดีชื่อ Turbo Stream · แต่ก่อนจะถึงตรงนั้น ต้องมีคอมเมนต์ให้ส่งก่อน

ทวน Day 2 — สร้าง Comment (พิมพ์ตาม ~5 นาที)

ส่วนนี้ไม่มีเรื่องใหม่ · เป็นท่าเดียวกับที่ทำใน Day 2 ทั้งหมด · คอมเมนต์หนึ่งชิ้นมี ข้อความ (body) · ชื่อคนเขียน (author_name — แอปนี้ยังไม่มีระบบล็อกอิน เลยให้พิมพ์ชื่อเอง ระบบล็อกอินรออยู่ Day 4) · และเป็นของบทความไหน (post)

ขั้น 1 · สร้าง model (คำสั่งตามสไลด์หน้า 52) — รันในโฟลเดอร์โปรเจกต์:

$ bin/rails generate model Comment body:text author_name:string post:references
      invoke  active_record
      create    db/migrate/20261107035534_create_comments.rb
      create    app/models/comment.rb
      invoke    test_unit
      create      test/models/comment_test.rb
      create      test/fixtures/comments.yml

post:references = "คอมเมนต์ชี้ไปหาบทความ" → ได้คอลัมน์ post_id + index + foreign key ให้เอง (บท 115) · เลขยาว ๆ หน้าชื่อไฟล์ migration คือเวลาที่คุณรัน ของคุณจะต่าง · ไฟล์ test สองไฟล์ปล่อยไว้ก่อน (เรื่อง test รออยู่ Day 4)

ขั้น 2 · เติม "ห้ามว่าง" ให้ตู้ — เปิดไฟล์ migration ที่เพิ่งได้ เติม , null: false ท้ายบรรทัด body และ author_name:

      t.text :body
      t.string :author_name
      t.references :post, null: false, foreign_key: true

      t.text :body, null: false
      t.string :author_name, null: false
      t.references :post, null: false, foreign_key: true

ไฟล์ทั้งไฟล์หลังแก้ (ของคุณชื่อไฟล์ต่างแค่เลขเวลา):

class CreateComments < ActiveRecord::Migration[8.1]
  def change
    create_table :comments do |t|
      t.text :body, null: false
      t.string :author_name, null: false
      t.references :post, null: false, foreign_key: true

      t.timestamps
    end
  end
end

ขั้น 3 · สร้างลิ้นชักใหม่ในตู้:

$ bin/rails db:migrate
== 20261107035534 CreateComments: migrating ===================================
-- create_table(:comments)
   -> 0.0030s
== 20261107035534 CreateComments: migrated (0.0044s) ==========================

ขั้น 4 · กฎของคอมเมนต์ + ความสัมพันธ์ — app/models/comment.rb ทั้งไฟล์ (generator เขียน belongs_to ให้แล้ว เราเติม validates สองบรรทัด):

class Comment < ApplicationRecord
  belongs_to :post

  validates :author_name, presence: true, length: { maximum: 50 }
  validates :body, presence: true, length: { maximum: 1000 }
end

แล้วเปิด app/models/post.rb เพิ่มหนึ่งบรรทัดใต้ belongs_to :category:

  has_many :comments, dependent: :destroy

• validates … presence: true, length: { maximum: 50 } = ห้ามว่าง และยาวไม่เกิน 50 ตัวอักษร (ชื่อคนสั้น ๆ) · ข้อความไม่เกิน 1000 (บท 110)
• has_many :comments = "บทความหนึ่งมีหลายคอมเมนต์" → ได้ @post.comments มาใช้ (บท 115)
• dependent: :destroy = ลบบทความแล้วลบคอมเมนต์ของมันตาม · ถ้าไม่ใส่ ตู้จะไม่ยอมให้ลบบทความที่มีคอมเมนต์ (foreign key ฟ้อง — บท 116) · เลือก :destroy เพราะคอมเมนต์ไม่มีความหมายถ้าไม่มีบทความ (ต่างจากหมวดที่ใช้ :restrict_with_error "ห้ามลบถ้ายังมีบทความ")

ทางเข้าของคอมเมนต์ — route ซ้อน และ controller

คอมเมนต์ต้องรู้ว่าเป็นของบทความไหน · เราเลยให้ URL บอกเลขบทความไว้ในตัว: POST /posts/30/comments = "ส่งคอมเมนต์ให้บทความเลข 30" · เปิด config/routes.rb เปลี่ยน resources :posts บรรทัดเดียว ให้เป็นสามบรรทัดนี้ (ท่า "ซ้อนกัน" ของบท 117):

  resources :posts do
    resources :comments, only: :create
  end

$ bin/rails routes -c comments
       Prefix Verb URI Pattern                        Controller#Action
post_comments POST /posts/:post_id/comments(.:format) comments#create

only: :create = เปิดแค่ประตูเดียว คือ "สร้างคอมเมนต์" (ยังไม่ต้องมีหน้ารวมคอมเมนต์ หน้าแก้ หน้าลบ) · :post_id = ช่องในใบสั่งที่บอกเลขบทความ · ได้ชื่อเล่น post_comments → ใช้เป็น post_comments_path(@post) ได้

ต่อไปคือหัวหน้าเชฟแผนกคอมเมนต์ · ไม่มี generator ให้ — สร้างไฟล์ใหม่ app/controllers/comments_controller.rb แล้วพิมพ์ทั้งไฟล์:

class CommentsController < ApplicationController
  before_action :set_post

  # POST /posts/1/comments
  def create
    @comment = @post.comments.build(comment_params)

    respond_to do |format|
      if @comment.save
        format.turbo_stream # ใช้ create.turbo_stream.erb
        format.html { redirect_to @post, notice: "เพิ่มความคิดเห็นแล้ว" }
      else
        format.turbo_stream do
          render turbo_stream: turbo_stream.replace("comment_form", partial: "comments/form", locals: { post: @post, comment: @comment }),
                 status: :unprocessable_content
        end
        format.html do
          @comments = @post.comments.order(:created_at)
          render "posts/show", status: :unprocessable_content
        end
      end
    end
  end

  private
    def set_post
      @post = Post.find(params.expect(:post_id))
    end

    def comment_params
      params.expect(comment: [ :author_name, :body ])
    end
end

• before_action :set_post + set_post = ก่อนทำอะไร หาบทความจากเลขใน URL ก่อน · params.expect(:post_id) = "ต้องมีเลขบทความ" · ไม่มีบทความเลขนั้นได้ 404
• @post.comments.build(comment_params) = สร้างคอมเมนต์ใหม่ที่ผูกกับบทความนี้ให้แล้ว (เติม post_id เอง) แต่ยังไม่บันทึก
• comment_params = รับเฉพาะช่อง author_name กับ body · ใครแอบส่ง post_id มาในฟอร์มก็ถูกทิ้ง (strong parameters — บท 117)
• respond_to do |format| = "ลูกค้าอยากได้คำตอบแบบไหน ก็เตรียมแบบนั้น" · format.html คือแบบหน้าเว็บเต็ม (เหมือน scaffold) · format.turbo_stream คือของใหม่ของบทนี้ — อธิบายละเอียดในสองหัวข้อถัดไป
• ทางที่ไม่ผ่าน (else) = ส่งฟอร์มเดิมที่มี error กลับไปพร้อมรหัส 422 (รหัส "ข้อมูลไม่ผ่าน" แบบเดียวกับ scaffold ในบท 118) — ดูหัวข้อ "ส่งว่าง" ข้างล่าง
• format.html do … end ในทาง else = ทางสำรองตอนไม่มี Turbo (เช่นเบราว์เซอร์ปิด JavaScript — ลองในหัวข้อ Accept) · วาดหน้า show เดิมพร้อม error · ต้องเตรียม @comments เองตรงนี้ เพราะหน้า show ใช้ตัวแปรนี้ แต่คำขอนี้ไม่ได้ผ่าน PostsController#show ที่ปกติเตรียมให้
• # POST /posts/1/comments = คอมเมนต์บอกว่า action นี้รับคำขอแบบไหน (ตามสไตล์ scaffold) · private = method ข้างล่างใช้กันเองในไฟล์นี้ route เรียกตรง ๆ ไม่ได้

หน้าจอ — หน้า show และแม่พิมพ์สองตัว

ถาดหน้าครัวของหน้า show — เปิด app/controllers/posts_controller.rb เติมสองบรรทัดใน def show (เดิมว่าง):

  def show
    @comments = @post.comments.order(:created_at)
    @comment = Comment.new
  end

@comments = คอมเมนต์ของบทความนี้ เรียงเก่า → ใหม่ (ของใหม่อยู่ล่างสุด ตรงกับ "ต่อท้าย") · @comment = คอมเมนต์เปล่าไว้วาดฟอร์ม

หน้า show — เปิด app/views/posts/show.html.erb เลื่อนไปท้ายไฟล์ · ตอนนี้ท้ายไฟล์หน้าตาแบบนี้ (แถวปุ่ม แก้ไข / กลับ / ลบ แล้วปิดด้วย </div> สองตัว):

    <%= button_to "ลบบทความ", @post, … %>
  </div>      ← ปิดแถวปุ่ม
                ← ★ วางก้อนใหม่ตรงนี้ (เว้นบรรทัดว่างหนึ่งบรรทัดก่อน)
</div>        ← บรรทัดสุดท้ายของไฟล์ ปิดกล่องใหญ่ทั้งหน้า

ก้อนที่วาง:

  <section class="mt-10 space-y-4">
    <h2 class="text-xl font-bold">
      ความคิดเห็น (<span id="comment_count"><%= @post.comments.count %></span>)
    </h2>

    <div id="comments" class="space-y-3">
      <%= render @comments %>
    </div>

    <%= render "comments/form", post: @post, comment: @comment %>
  </section>

• สาม id ที่ตัวหนา = ป้ายบนกล่องที่จะถูกสั่งเปลี่ยนทีหลัง (comment_count · comments · และ comment_form ซึ่งอยู่ในแม่พิมพ์ฟอร์ม) · จำสามชื่อนี้ไว้ ใช้ทั้งบท
• <span> = กล่องเล็กที่ครอบเฉพาะตัวเลข · มีไว้ให้เปลี่ยนแค่ตัวเลขได้โดยไม่แตะคำว่า "ความคิดเห็น"
• <%= render @comments %> = "ใช้แม่พิมพ์ comments/_comment กับทุกชิ้น" (Rails เดาชื่อแม่พิมพ์จากชนิดของแฟ้ม — บท 123) · ยังไม่มีคอมเมนต์ก็ไม่วาดอะไร
• <%= render "comments/form", post: @post, comment: @comment %> = ใช้แม่พิมพ์ฟอร์ม (สร้างข้างล่าง) และยื่นของใส่มือสองอย่าง
• คลาส Tailwind (บท 72): mt-10 = เว้นที่ว่างด้านบน · space-y-4 / space-y-3 = เว้นระยะแนวตั้งระหว่างของข้างใน · text-xl font-bold = ตัวใหญ่ หนา

แม่พิมพ์คอมเมนต์หนึ่งชิ้น — สร้างโฟลเดอร์ app/views/comments/ แล้วสร้างไฟล์ _comment.html.erb:

<%# locals: (comment:) -%>
<article id="<%= dom_id comment %>" class="card bg-base-100 shadow-sm">
  <div class="card-body p-4 gap-1">
    <p class="text-sm text-base-content/70">
      <span class="font-semibold text-base-content"><%= comment.author_name %></span>
      · <%= time_ago_in_words(comment.created_at) %> ago
    </p>
    <p class="whitespace-pre-line break-words"><%= comment.body %></p>
  </div>
</article>

• บรรทัด 1 strict locals: แม่พิมพ์นี้รับ comment อย่างเดียว (แบบเดียวกับ _post ในบท 126) · -%> ที่มีขีด = ไม่ทิ้งบรรทัดว่างไว้ใน HTML
• id="<%= dom_id comment %>" → ได้ comment_1 · comment_2 … ป้ายเลขถ้วยของแต่ละชิ้น (เจอแล้วในบท 131)
• <%= time_ago_in_words(comment.created_at) %> ago = helper "ผ่านมานานแค่ไหน" ได้แค่ less than a minute ไม่มีคำว่า ago · เลยพิมพ์ ago ต่อท้ายเอง (บท 124)
• <%= comment.author_name %> · <%= comment.body %> = ของที่ลูกค้าพิมพ์มา · <%= %> ใส่ซองใสให้เอง (escape) ใครพิมพ์ <script> มาก็ขึ้นเป็นตัวหนังสือ ไม่ทำงาน (บท 125)
• whitespace-pre-line = คลาส Tailwind "ขึ้นบรรทัดใหม่ตามที่คนพิมพ์" · break-words = คำยาวไม่มีเว้นวรรคให้ตัดลงบรรทัดใหม่ ไม่ล้นจอมือถือ
• คลาสหน้าตา: card card-body = การ์ดของ daisyUI · bg-base-100 = สีพื้นการ์ดตามธีม · shadow-sm = เงาบาง ๆ · p-4 gap-1 = ขอบในและช่องไฟ · text-base-content/70 = สีตัวหนังสือหลักของธีม แต่จางลงเหลือ 70% (ตัวเลขหลัง / คือความเข้ม) · text-sm = ตัวเล็ก · font-semibold = ค่อนข้างหนา (บท 128)

แม่พิมพ์ฟอร์ม — สร้าง app/views/comments/_form.html.erb · หน้าตาเกือบเหมือน posts/_form.html.erb ที่ Lab Vibe 2 แต่งไว้ (กล่อง error สีแดง · กรอบแดงรอบช่องที่ผิด):

<%# locals: (post:, comment:) -%>
<%= form_with model: [ post, comment ], id: "comment_form", class: "card bg-base-100 shadow-sm" do |form| %>
  <div class="card-body gap-4">
    <h3 class="card-title text-lg">เขียนความคิดเห็น</h3>

    <% if comment.errors.any? %>
      <div role="alert" class="alert alert-error">
        <div>
          <p class="font-bold">ส่งไม่ได้ มี <%= comment.errors.count %> จุดที่ต้องแก้:</p>
          <ul class="list-disc ml-6">
            <% comment.errors.each do |error| %>
              <li><%= error.full_message %></li>
            <% end %>
          </ul>
        </div>
      </div>
    <% end %>

    <div>
      <%= form.label :author_name, "ชื่อ", class: "block font-medium" %>
      <%= form.text_field :author_name, class: ["input w-full mt-2", { "input-error": comment.errors[:author_name].any? }] %>
    </div>

    <div>
      <%= form.label :body, "ความคิดเห็น", class: "block font-medium" %>
      <%= form.textarea :body, rows: 3, class: ["textarea w-full mt-2", { "textarea-error": comment.errors[:body].any? }] %>
    </div>

    <div class="card-actions justify-end">
      <%= form.submit "ส่งความคิดเห็น", class: "btn btn-primary" %>
    </div>
  </div>
<% end %>

มีแค่สามจุดที่ต่างจากฟอร์มบทความ:

• locals: (post:, comment:) = แม่พิมพ์นี้ต้องยื่นของสองอย่าง — ต้องรู้บทความ เพราะ URL ที่ส่งไปมีเลขบทความ
• form_with model: [ post, comment ] = ใส่สองแฟ้มเป็นรายการ → Rails ต่อ URL ให้แบบซ้อน · ผลจริงที่ได้คือ action="/posts/30/comments" method="post" ตรงกับ route ที่เพิ่งเพิ่มพอดี
• id: "comment_form" = ติดป้าย id บนแท็ก <form> เอง — สำคัญมากในหัวข้อ replace / update

ที่เหลือคือของเดิมจากฟอร์มบทความ ทวนเร็ว ๆ:

• <% if comment.errors.any? %> … <% end %> = วาดกล่องแดงเฉพาะตอน save ไม่ผ่าน · comment.errors.each วนทีละข้อ · error.full_message = ประโยค error เต็ม ๆ (บท 110) · ฟอร์มเปล่าตอนเปิดหน้าครั้งแรกไม่มี error เลยไม่มีกล่องนี้
• role="alert" class="alert alert-error" = กล่องแจ้งเตือนสีแดงของ daisyUI · list-disc ml-6 = รายการมีจุดนำหน้า เยื้องเข้า
• form.label :author_name, "ชื่อ" = ป้ายช่องที่เขียนว่า "ชื่อ" · form.text_field = ช่องพิมพ์บรรทัดเดียว · form.textarea :body, rows: 3 = ช่องพิมพ์หลายบรรทัด สูง 3 บรรทัด (บท 124)
• class: ["input w-full mt-2", { "input-error": … }] = "คลาสพวกนี้ใส่เสมอ ส่วน input-error (กรอบแดง) ใส่เฉพาะตอนช่องนี้มี error"
• card-title = หัวข้อการ์ด · card-actions justify-end = แถวปุ่มชิดขวา · btn btn-primary = ปุ่มสีหลักของธีม (บท 128)

Started POST "/posts/30/comments" for ::1 at 2026-11-07 11:00:23 +0700
Processing by CommentsController#create as TURBO_STREAM
  Parameters: {"authenticity_token" => "[FILTERED]", "comment" => {"author_name" => "ทดลอง", "body" => "ส่งก่อนมีไฟล์ stream"}, "commit" => "ส่งความคิดเห็น", "post_id" => "30"}
  Post Load (1.3ms)  SELECT "posts".* FROM "posts" WHERE "posts"."id" = 30 LIMIT 1
  TRANSACTION (1.1ms)  BEGIN
  Comment Create (2.7ms)  INSERT INTO "comments" ("body", "author_name", "post_id", "created_at", "updated_at") VALUES ('ส่งก่อนมีไฟล์ stream', 'ทดลอง', 30, '2026-11-07 04:00:23.752225', '2026-11-07 04:00:23.752225') RETURNING "id"
  TRANSACTION (1.1ms)  COMMIT
No template found for CommentsController#create, rendering head :no_content
Completed 204 No Content in 12ms (ActiveRecord: 4.6ms (2 queries, 0 cached) | GC: 0.2ms)

Turbo Stream คืออะไร — ใบสั่งงานหลายข้อ

ปกติ server ตอบกลับมาเป็นหน้าเว็บ · Turbo Stream คือคำตอบอีกแบบที่ไม่ใช่หน้าเว็บ แต่เป็นรายการคำสั่ง · แต่ละข้อบอกสามอย่าง: ทำอะไร (ต่อท้าย / แทน / ลบ…) · กับกล่อง id ไหน · ด้วย HTML ชิ้นไหน · Turbo ในเบราว์เซอร์อ่านทีละข้อแล้วทำตาม — ข้อเดียวก็ได้ สิบข้อก็ได้ กล่องอยู่ตรงไหนของหน้าก็ได้

เทียบกับ React ที่เพิ่งเรียน (บท 73): ถ้าทำหน้านี้ด้วย React เราจะได้ข้อมูลคอมเมนต์ใหม่มาเป็น JSON แล้วต้องเขียนเองในเบราว์เซอร์ว่า "เติมเข้า state รายการ · บวกตัวนับ 1 · ล้าง state ของฟอร์ม" — สามบรรทัด setXxx(…) และเบราว์เซอร์ต้องจำข้อมูลชุดที่สอง (สมุดจดบนโต๊ะลูกค้า) · แบบ Turbo Stream เบราว์เซอร์ไม่ได้จำอะไรเลย · ตัวเลข 2 มาจาก server นับในตู้ใหม่ทุกครั้ง · นี่คือประโยคหลักข้อ ① ของวัน: ถ้า server เป็นเจ้าของข้อมูลชุดเดียว บั๊ก "ตัวเลขไม่ตรงกัน" ก็ไม่มี

เขียน create.turbo_stream.erb — ใบสั่งงานสามข้อ

สร้างไฟล์ app/views/comments/create.turbo_stream.erb — ทั้งไฟล์มีแค่นี้:

<%# 1) ต่อท้ายรายการ  2) อัปเดตตัวนับ  3) แทนฟอร์มด้วยฟอร์มว่าง %>
<%= turbo_stream.append "comments", @comment %>
<%= turbo_stream.update "comment_count", @post.comments.count %>
<%= turbo_stream.replace "comment_form", partial: "comments/form", locals: { post: @post, comment: Comment.new } %>

ชื่อไฟล์อ่านเป็นสามท่อน: create = ใช้กับ action create · turbo_stream = ใช้ตอนลูกค้าขอคำตอบแบบใบสั่งงาน · erb = แม่แบบที่มีช่องให้เติมเหมือนไฟล์ view ทุกไฟล์ (บท 122)

• บรรทัด 1 <%# … %> = คอมเมนต์ ไม่ขึ้นจาน
• บรรทัด 2 turbo_stream.append "comments", @comment = "ข้อ ①: ต่อท้ายในกล่อง id="comments" ด้วยคอมเมนต์นี้" · ส่ง @comment (แฟ้ม) ไปเฉย ๆ Rails เดาแม่พิมพ์ comments/_comment ให้ แบบเดียวกับ render @comment
• บรรทัด 3 turbo_stream.update "comment_count", @post.comments.count = "ข้อ ②: เปลี่ยนของข้างใน <span id="comment_count"> เป็นตัวเลขนี้" · count = ถามตู้นับใหม่ (SELECT COUNT(*)) ได้เลขจริงเสมอ
• บรรทัด 4 turbo_stream.replace "comment_form", partial: "comments/form", locals: { post: @post, comment: Comment.new } = "ข้อ ③: เอาฟอร์มใบเก่าออกทั้งใบ แล้ววางฟอร์มใหม่จากแม่พิมพ์ _form ที่ใส่คอมเมนต์เปล่า" → ช่องว่างทั้งหมด

ทำไม controller แทบไม่ต้องแก้: บรรทัด format.turbo_stream ใน controller ไม่มีบล็อก { … } ต่อท้าย แปลว่า "ทำตามแม่แบบชื่อเดียวกับ action" → Rails ไปหา create.turbo_stream.erb เอง · ตอนที่ยังไม่มีไฟล์ก็เลยได้ 204 อย่างที่เห็นข้างบน

Rails รู้ได้ยังไงว่าต้องตอบเป็นใบสั่งงาน

ใบสั่ง (request) ทุกใบมีบรรทัดข้อมูลแนบหัวกระดาษที่คนใช้เว็บมองไม่เห็น เรียกว่า header · หนึ่งในนั้นชื่อ Accept = "รับคำตอบแบบไหนได้บ้าง เรียงตามที่อยากได้" · ตอนกดส่งฟอร์ม Turbo เป็นคนส่งแทนเบราว์เซอร์ (บท 130) และเขียน Accept ให้เอง · ค่าที่ดักได้จริงใน Chrome:

Accept: text/vnd.turbo-stream.html, text/html, application/xhtml+xml

ตัวแรก text/vnd.turbo-stream.html = "ขอเป็นใบสั่งงานก่อนนะ" · ถ้าไม่มีค่อยเอาหน้าเว็บ (text/html) · Rails อ่านแล้วจดใน log ว่า Processing by CommentsController#create as TURBO_STREAM → respond_to จึงเลือกทาง format.turbo_stream

เคยเจอแล้วฝั่ง Go: header Accept: application/json ในบท 35 คือของชิ้นเดียวกัน — ตอนนั้น client ขอ JSON · ตอนนี้ Turbo ขอ "ใบสั่งงาน" · ส่วน respond_to ก็คือ "อ่าน Accept แล้วเลือกวิธีตอบ" ที่ Rails ทำให้ แทนที่เราจะต้องเขียน if ดู header เอง

ของจริงที่ server ส่งกลับ — ใบสั่งงานหน้าตาแบบนี้

เปิดดูใบสั่งด้วยตาตัวเองไปพร้อมกัน: ใน Chrome คลิกขวาที่หน้า → Inspect (ตรวจสอบ) → แท็บ Network เปิดค้างไว้ก่อนกดส่ง (แท็บนี้จดเฉพาะคำขอที่เกิดหลังเปิด — บท 130) · แล้วพิมพ์ชื่อ ต้นกล้า ข้อความ ชาเย็นร้านนี้หวานกำลังดี กดส่ง · ผลที่ตรวจใน Chrome จริง:

• ✅ คอมเมนต์ของต้นกล้าต่อท้ายใต้คอมเมนต์ "ทดลอง" (id comment_2)
• ✅ หัวข้อเปลี่ยนเป็น ความคิดเห็น (2)
• ✅ ช่องชื่อและช่องข้อความว่าง
• ✅ แถบที่อยู่ยังเป็น /posts/30 และหน้าไม่ได้โหลดใหม่ (วิธีที่เราตรวจ: ฝากค่าไว้ในหน้าผ่าน Console ก่อนกด หลังกดค่านั้นยังอยู่ — ถ้าหน้าโหลดใหม่ ค่าที่ฝากไว้จะหายหมด)

ในแท็บ Network คลิกแถวชื่อ comments → แท็บ Response · นี่คือของที่ server ส่งมาจริง (ตัด token ยาว ๆ และไส้ฟอร์มบางส่วนออก):

<turbo-stream action="append" target="comments"><template><!-- BEGIN app/views/comments/_comment.html.erb
--><article id="comment_2" class="card bg-base-100 shadow-sm">
  <div class="card-body p-4 gap-1">
    <p class="text-sm text-base-content/70">
      <span class="font-semibold text-base-content">ต้นกล้า</span>
      · less than a minute ago
    </p>
    <p class="whitespace-pre-line break-words">ชาเย็นร้านนี้หวานกำลังดี</p>
  </div>
</article>
<!-- END app/views/comments/_comment.html.erb --></template></turbo-stream>
<turbo-stream action="update" target="comment_count"><template>2</template></turbo-stream>
<turbo-stream action="replace" target="comment_form"><template><!-- BEGIN app/views/comments/_form.html.erb
--><form id="comment_form" class="card bg-base-100 shadow-sm" action="/posts/30/comments" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="(ตัด)" />
  <div class="card-body gap-4">
    <h3 class="card-title text-lg">เขียนความคิดเห็น</h3>
    …(ช่องชื่อ · ช่องความคิดเห็น · ปุ่มส่ง — ว่างทั้งหมด)…
  </div>
</form><!-- END app/views/comments/_form.html.erb --></template></turbo-stream>

อ่านทีละก้อน:

• สามแท็ก <turbo-stream> = สามบรรทัดใน create.turbo_stream.erb ตรงตัว · action="append" target="comments" มาจากบรรทัด 2 · update / comment_count จากบรรทัด 3 · replace / comment_form จากบรรทัด 4
• ใน <template> ของข้อ ① = HTML ที่แม่พิมพ์ _comment วาดเสร็จแล้ว (การ์ด id="comment_2")
• ข้อ ② มีแค่ 2 — server นับมาให้แล้ว เบราว์เซอร์ไม่ได้บวกเอง
• ข้อ ③ = ฟอร์มใหม่ทั้งใบ มี id="comment_form" ติดมาด้วย และมี authenticity_token ใหม่ฝังมา (CSRF — บท 124) จึงส่งครั้งต่อไปได้เลย
• <!-- BEGIN app/views/… --> / <!-- END … --> = ป้ายบอกว่า HTML ก้อนนี้มาจากไฟล์ไหน · Rails ใส่ให้เฉพาะตอน development ช่วยไล่หาไฟล์ · production ไม่มี

log ของใบสั่งเดียวกัน:

Processing by CommentsController#create as TURBO_STREAM
  Parameters: {"authenticity_token" => "[FILTERED]", "comment" => {"author_name" => "ต้นกล้า", "body" => "ชาเย็นร้านนี้หวานกำลังดี"}, "commit" => "ส่งความคิดเห็น", "post_id" => "30"}
  Post Load (1.3ms)  SELECT "posts".* FROM "posts" WHERE "posts"."id" = 30 LIMIT 1
  TRANSACTION (0.9ms)  BEGIN
  Comment Create (2.6ms)  INSERT INTO "comments" ("body", "author_name", "post_id", "created_at", "updated_at") VALUES (…) RETURNING "id"
  TRANSACTION (1.2ms)  COMMIT
  Rendering comments/create.turbo_stream.erb
  Rendered comments/_comment.html.erb (Duration: 0.2ms | GC: 0.0ms)
  Comment Count (1.0ms)  SELECT COUNT(*) FROM "comments" WHERE "comments"."post_id" = 30
  Rendered comments/_form.html.erb (Duration: 0.4ms | GC: 0.0ms)
  Rendered comments/create.turbo_stream.erb (Duration: 3.3ms | GC: 0.0ms)
Completed 200 OK in 13ms (Views: 3.6ms | ActiveRecord: 4.6ms (3 queries, 0 cached) | GC: 0.0ms)

เทียบกับตอนยังไม่มีไฟล์: คราวนี้มี Rendering comments/create.turbo_stream.erb และได้ 200 OK แทน 204 · Comment Count คือบรรทัด 3 ของไฟล์ stream ไปถามตู้นับ

ส่งว่าง — error โผล่ในฟอร์ม ที่เดิม

กดส่งโดยไม่พิมพ์อะไรเลย · ผลใน Chrome: กล่องแดง "ส่งไม่ได้ มี 2 จุดที่ต้องแก้: Author name can't be blank · Body can't be blank" ขึ้นในฟอร์ม · ช่องทั้งสองมีกรอบแดง · รายการยัง 2 ชิ้น ตัวนับยัง (2) · URL ไม่เปลี่ยน · ถ้าพิมพ์ข้อความไว้แต่ลืมชื่อ ข้อความที่พิมพ์ไม่หาย (ฟอร์มใหม่วาดจาก @comment ตัวที่มีค่าเดิม)

ทางนี้มาจาก else ใน controller:

        format.turbo_stream do
          render turbo_stream: turbo_stream.replace("comment_form", partial: "comments/form", locals: { post: @post, comment: @comment }),
                 status: :unprocessable_content
        end

เป็นใบสั่งข้อเดียวเขียนตรงใน controller (ไม่ต้องมีไฟล์แยก) — "แทนฟอร์มด้วยฟอร์มที่มี error" · @comment ตัวนี้ save ไม่ผ่าน เลยมี errors ติดอยู่ให้แม่พิมพ์วาดกล่องแดง · คำตอบจริงจาก server (ตัดบางส่วน):

<turbo-stream action="replace" target="comment_form"><template><!-- BEGIN app/views/comments/_form.html.erb
--><form id="comment_form" class="card bg-base-100 shadow-sm" action="/posts/30/comments" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="(ตัด)" />
  <div class="card-body gap-4">
    <h3 class="card-title text-lg">เขียนความคิดเห็น</h3>

      <div role="alert" class="alert alert-error">
        <div>
          <p class="font-bold">ส่งไม่ได้ มี 2 จุดที่ต้องแก้:</p>
          <ul class="list-disc ml-6">
              <li>Author name can&#39;t be blank</li>
              <li>Body can&#39;t be blank</li>
          </ul>
        </div>
      </div>

    <div>
      <div class="field_with_errors"><label class="block font-medium" for="comment_author_name">ชื่อ</label></div>
      <div class="field_with_errors"><input class="input w-full mt-2 input-error" type="text" value="" name="comment[author_name]" id="comment_author_name" /></div>
    </div>

    …(ช่องความคิดเห็นหน้าตาแบบเดียวกัน · ปุ่มส่ง)…
  </div>
</form><!-- END app/views/comments/_form.html.erb --></template></turbo-stream>

• แท็กเดียว replace → รายการกับตัวนับไม่ถูกแตะ
• <div class="field_with_errors"> = Rails ห่อช่องที่ผิดให้เองอัตโนมัติ (ไม่ได้เขียนเอง ไม่มีผลกับหน้าตาในแอปนี้)
• ข้อความ error เป็นภาษาอังกฤษ (Author name แปลงมาจากชื่อคอลัมน์ author_name) เพราะแอปยังไม่ได้ตั้งภาษาไทย — ปกติ ไม่ใช่บั๊กของคุณ
• ใน Console ของ Chrome จะมีบรรทัดแดง Failed to load resource: the server responded with a status of 422 (Unprocessable Content) = ปกติ เบราว์เซอร์แค่รายงานว่าได้รหัส 422

คำสั่งทั้ง 8 ของ Turbo Stream

ในไฟล์เราใช้แค่สามคำสั่ง · ของจริงมีแปด (สไลด์หน้า 44 นับ before/after เป็นข้อเดียวเลยได้ 7 แถว) · ทุกตัวในตารางนี้ลองแล้วใน Chromeกับหน้าคอมเมนต์ของเรา:

ลองเล่นเองได้โดยไม่แก้ไฟล์ (ไม่บังคับ ข้ามได้): เปิดแท็บ Console ของ Chrome ที่หน้าบทความ แล้วพิมพ์บรรทัดนี้ กด Enter — คือการยื่นใบสั่งงานที่เราเขียนเองให้ Turbo ทำตาม:

Turbo.renderStreamMessage('<turbo-stream action="remove" target="comment_1"></turbo-stream>')

• Turbo = ตัว Turbo ที่โหลดอยู่ในหน้าแล้ว · .renderStreamMessage(…) = "ทำตามใบสั่งนี้" · ข้อความในเครื่องหมาย ' ' คือใบสั่งหนึ่งข้อ หน้าตาเดียวกับที่ server ส่งมา
• comment_1 = id ของคอมเมนต์ "ทดลอง" ในเครื่องที่ตรวจ · ของคุณอาจเป็นเลขอื่น — คลิกขวาที่การ์ดคอมเมนต์ → Inspect ดู id="comment_…" แล้วเปลี่ยนตาม
• ถ้าวางแล้ว Chrome ขึ้นข้อความเตือนเรื่องการวางโค้ดและไม่ยอมให้วาง ให้ทำตามที่ข้อความบอก หรือพิมพ์เองทีละตัวอักษร

คอมเมนต์นั้นหายจากหน้าทันที · กดรีเฟรชแล้วมันกลับมา เพราะ Turbo Stream เปลี่ยนแค่ HTML บนจอ ไม่ได้แตะตู้ — การลบจริงต้องผ่าน controller เสมอ

replace กับ update — ต่างกันคำเดียว แต่พังคนละแบบ

สองคำนี้คนสับสนมากที่สุด · กติกาจำง่าย: ป้าย id ติดอยู่ที่ตัวกล่อง · update เก็บกล่อง (และป้าย) ไว้ เปลี่ยนแค่ของข้างใน · replace ยกกล่องพร้อมป้ายทิ้ง → ของใหม่ต้องมีป้ายเดิมติดมาเอง ไม่งั้นครั้งหน้าหาไม่เจอ

<%= turbo_stream.replace "comment_count", @post.comments.count %>

ก่อนส่ง          ความคิดเห็น (2)    รายการ 2 ชิ้น    <span id="comment_count">2</span>
ส่งครั้งที่ 1      ความคิดเห็น (3)    รายการ 3 ชิ้น    (ไม่มี span แล้ว เหลือแค่ตัวหนังสือ 3)
ส่งครั้งที่ 2      ความคิดเห็น (3)    รายการ 4 ชิ้น    ← ตัวเลขค้าง
Console: ว่าง ไม่มี error

Frame หรือ Stream — เลือกยังไง

กฎง่าย ๆ: ถามตัวเองว่า "กดแล้วต้องเปลี่ยนกี่กล่อง" · หนึ่งกล่องและเป็นกล่องที่กดอยู่ข้างใน → Frame · มากกว่าหนึ่ง หรืออยู่คนละที่ → Stream · และถามต่ออีกข้อว่า "ต้องเปลี่ยนแค่แท็บของคนกด หรือทุกคนที่เปิดหน้านี้" · แท็บคนกด = Stream ตอบฟอร์ม (บทนี้) · ทุกคน = Stream แบบ broadcast (บท 133) — สองแบบนี้คือข้อที่สไลด์หน้า 51 บอกว่าคนตอบผิดเยอะที่สุด

เก็บงาน — commit

ก่อน commit ดูว่ามีไฟล์ครบไหม (ผลจริง · เลขในชื่อ migration ของคุณจะต่าง):

$ git status --short
 M app/controllers/posts_controller.rb
 M app/models/post.rb
 M app/views/posts/show.html.erb
 M config/routes.rb
 M db/schema.rb
?? app/controllers/comments_controller.rb
?? app/models/comment.rb
?? app/views/comments/
?? db/migrate/20261107035534_create_comments.rb
?? test/fixtures/comments.yml
?? test/models/comment_test.rb

app/views/comments/ ข้างในต้องมีสามไฟล์ (_comment.html.erb · _form.html.erb · create.turbo_stream.erb) · ตรวจว่าบรรทัด 3 ของไฟล์ stream กลับเป็น update แล้ว · จากนั้น:

$ git add . && git commit -m "Comment + ฟอร์มคอมเมนต์ตอบด้วย Turbo Stream"

โค้ดของคุณตอนนี้คือจุดเริ่มต้นของบท 133

ทดสอบความเข้าใจ

ถามกลับได้เลย

ติดตรงไหนถามได้ทุกเรื่อง เช่น "ทำไมต้องมี <template> ห่อ" · "ถ้าอยากให้คอมเมนต์ใหม่อยู่บนสุดต้องแก้กี่ที่" (ใบ้: คำสั่งในไฟล์ stream และการเรียงใน controller) · หรือวาง log / Response ของคุณมาให้ดูด้วยกัน

ถ้าเปิดสไลด์ดูประกอบ

อ้างอิง

• Turbo Handbook — Come Alive with Turbo Streams — อ่านหัวข้อ "Stream Messages and Actions" กับ "Streaming From HTTP Responses" · ยืนยันเรื่อง Accept header และรูปแบบ <turbo-stream><template> · ส่วน WebSocket ข้ามไปก่อน (บท 133)
• Turbo Reference — Streams § The Eight Actions — ตัวอย่าง HTML ของทั้ง 8 คำสั่ง · อ่านคู่กับตารางในบทนี้ · ดูความต่างของ replace กับ update ให้ชัด
• turbo-rails — tag_builder.rb — ที่มาของ turbo_stream.append / update / replace ในไฟล์ .erb · อ่านแค่คอมเมนต์เหนือแต่ละ method พอ (มีตัวอย่างการเรียกทุกแบบ)
• Rails Guides — Routing § Nested Resources — ทวน route ซ้อน /posts/:post_id/comments · อ่านถึงหัวข้อ "Limits to Nesting" แล้วหยุด
• Rails API — respond_to — อ่านตัวอย่างแรก (format.html / format.xml) และประโยคในวงเล็บที่บอกว่า Rails ดูชนิดคำตอบจาก Accept header
• MDN — <template> — ย่อหน้าแรกพอ: ทำไมเนื้อใน <template> ไม่โชว์บนจอ