สายเคเบิล Master Rails Action พร้อมสายเคเบิลแบบ Solid:สร้างแอปแบบเรียลไทม์โดยไม่ต้อง Redis

คุณลักษณะแบบเรียลไทม์กำลังมีความสำคัญมากขึ้นเรื่อยๆ ในเว็บแอปพลิเคชัน แต่ไม่ใช่นักพัฒนา Rails ทุกคนจะคุ้นเคยกับ Action Cable ซึ่งเป็นไลบรารี่ WebSocket ในตัวของเฟรมเวิร์ก

Rails Action Cable รองรับเว็บซ็อกเก็ตมายาวนาน แต่มาพร้อมกับความซับซ้อนเพิ่มเติมบางประการ Rails 8 ขอแนะนำ สายเคเบิลแข็ง ซึ่งเป็นอะแดปเตอร์ที่สำรองฐานข้อมูลใหม่สำหรับ Action Cable ซึ่งไม่จำเป็นต้องใช้ Redis ในคู่มือนี้ ฉันจะแนะนำ Action Cable ให้คุณทราบโดยใช้ Solid Cable และแสดงวิธีสร้างฟีเจอร์แบบเรียลไทม์ คุณจะเห็นว่าการเพิ่มฟังก์ชันการทำงานแบบเรียลไทม์ให้กับแอป Rails 8 นั้นง่ายดายเพียงใดโดยไม่ต้องกังวลกับ Redis

ฉันขอแนะนำให้คุณติดตามและสร้างแอปร่วมกับฉัน แต่คุณสามารถดูโปรเจ็กต์ที่เสร็จสิ้นแล้วบน GitHub ได้

เหตุใดจึงต้องใช้สายเคเบิล Rails Action

เว็บแอปสมัยใหม่มักจำเป็นต้องส่งการอัปเดตไปยังไคลเอนต์แบบเรียลไทม์ ตัวอย่างที่ชัดเจนได้แก่ ข้อความแชทที่ปรากฏขึ้นทันทีหรือการแจ้งเตือนบนแดชบอร์ดสด สายแอคชั่น เป็นโซลูชันในตัวของ Rails สำหรับการรวม WebSockets เข้ากับแอปของคุณ ช่วยให้สามารถสื่อสารสองทางอย่างต่อเนื่องระหว่างเซิร์ฟเวอร์และไคลเอนต์ ฉันรู้สึกขอบคุณเป็นการส่วนตัวสำหรับ Action Cable ซึ่งเป็นส่วนหนึ่งของเฟรมเวิร์ก Rails เนื่องจากรองรับธีมโดยรวมในการมอบทุกสิ่งที่คุณต้องการสำหรับเว็บแอปที่มีประโยชน์อย่างแท้จริง การใช้ Action Cable หมายความว่าเซิร์ฟเวอร์สามารถส่งข้อมูลไปยังเบราว์เซอร์โดยไม่ต้องให้เบราว์เซอร์ร้องขออย่างชัดเจน (ไม่มีการรีเฟรชที่ผู้ใช้แจ้ง!)

ด้วย Action Cable และ WebSockets แอป Rails ของคุณสามารถนำเสนอคุณสมบัติแบบโต้ตอบสดซึ่งในอดีตยากที่จะนำไปใช้ในแอปที่แสดงผลโดยเซิร์ฟเวอร์ กรณีการใช้งานประจำวันบางประการสำหรับสิ่งนี้คือ:

• แอปพลิเคชันแชทสด
• การแจ้งเตือนและฟีด
• แอปการทำงานร่วมกันพร้อมการอัปเดตสด
• กีฬาสดหรือหุ้น

กล่าวโดยสรุป Action Cable เชื่อมช่องว่างระหว่างวงจรการตอบกลับคำขอแบบดั้งเดิมและการอัปเดตที่ขับเคลื่อนด้วยเหตุการณ์แบบเรียลไทม์ ในฝั่งไคลเอ็นต์ Rails ให้ผู้ใช้ JavaScript เพื่อสมัครรับช่องและรับการออกอากาศ ในฐานะนักพัฒนา คุณจะโต้ตอบกับ Action Cable โดยกำหนดช่องทางแบ็กเอนด์ (คล้ายกับคอนโทรลเลอร์ แต่สำหรับการสตรีมแบบเรียลไทม์) ที่ไคลเอนต์ส่วนหน้าสามารถสมัครรับข้อมูลได้

แล้ว Solid Cable คืออะไร

หากคุณเคยใช้ Action Cable ใน Rails เวอร์ชันก่อนหน้า คุณอาจทราบว่าในการใช้งานจริงมักจะอาศัย Redis (หรือ 05 ของ PostgreSQL ) เพื่อเผยแพร่ข้อความผ่านกระบวนการต่างๆ ของเซิร์ฟเวอร์ บริการผับ/ย่อย (มักจะเป็น Redis) ช่วยให้มั่นใจได้ว่าข้อความจากกระบวนการ Rails หนึ่งจะถูกส่งไปยังกระบวนการอื่นๆ ทั้งหมด เพื่อให้สามารถส่งต่อไปยังไคลเอนต์ WebSocket ที่เชื่อมต่อได้ ในอดีตโครงสร้างพื้นฐานที่เพิ่มเข้ามานี้เป็นข้อกำหนดในการใช้ Action Cable เลย

Solid Cable ซึ่งเปิดตัวใน Rails 8 แทนที่ความต้องการบริการผับ/ย่อยภายนอก เช่น Redis โดยใช้ฐานข้อมูลที่มีอยู่ของคุณเป็นแบ็กเอนด์ Solid Cable เป็นอะแดปเตอร์ที่สำรองฐานข้อมูลสำหรับ Action Cable เหมือนกับ Solid Queue สำหรับงาน Active และ Solid Cache สำหรับ Active Cache ข้อความ WebSocket ขาเข้าแต่ละข้อความจะถูกเขียนลงในตารางฐานข้อมูล และอินสแตนซ์ Action Cable ทั้งหมดจะสำรวจตารางนั้นเพื่อหาข้อความใหม่ที่จะเผยแพร่ไปยังไคลเอนต์ สิ่งนี้เกิดขึ้นเร็วมาก (โดยค่าเริ่มต้นทุกๆ 100 มิลลิวินาที) ทำให้ประสิทธิภาพใกล้เคียงกับเรียลไทม์ ข้อความจะถูกเก็บไว้เพียงช่วงเวลาสั้นๆ (24 ชั่วโมงตามค่าเริ่มต้น) ก่อนที่จะถูกตัดออก ดังนั้นคุณจึงสามารถแก้ไขปัญหาล่าสุดได้โดยไม่ต้องกังวลเรื่องพื้นที่ฐานข้อมูล

โดยรวมแล้ว Solid Cable เข้ากับปรัชญา "Solid Trifecta" ของ Rails 8 ซึ่งเป็นชุดคุณสมบัติในตัวที่สนับสนุนฐานข้อมูลครบชุดสำหรับการแคช งานพื้นหลัง และการส่งข้อความแบบเรียลไทม์ ด้วย Solid Cable คุณจะมีส่วนสุดท้ายในการรันงาน การแคช และ WebSockets ทั้งหมดผ่านทางฐานข้อมูลของคุณ

การสร้างแอป Rails 8 ด้วย Solid Cable

คุณคงอยากรู้อยากลองใช้งาน Solid Cable จริง ดังนั้น มาดูการเพิ่มมันลงในแอปพลิเคชัน Rails 8 และสร้างห้องสนทนาขนาดเล็กที่ผู้ใช้หลายคนสามารถแลกเปลี่ยนข้อความแบบเรียลไทม์กัน

การสร้างแอปตัวอย่าง

คุณจะได้เรียนรู้พื้นฐานของ Action Cable (ช่อง การสมัครสมาชิก การออกอากาศ) ในขณะที่ใช้ Solid Cable เป็นแบ็กเอนด์ เราจะใช้ Rails 8 ในตัวอย่างนี้ ดังนั้นไปข้างหน้าและสร้างแอป Rails ใหม่ด้วย:

rails _8.1.0_ new solid_cable_chat --database=sqlite3

จากนั้น 10 ลงในไดเร็กทอรี solid_cable_chat ใหม่

เนื่องจากคุณใช้ Rails 8 คุณจึงไม่จำเป็นต้องเพิ่ม Solid Cable หรืออัญมณีอื่นใดเพื่อเริ่มเล่น การกำหนดค่าส่วนใหญ่หรือทั้งหมดจะอยู่ที่นั่นเพื่อคุณ ฉันจะอธิบายทั้งหมดให้คุณทราบในกรณีที่คุณมาจาก Rails เวอร์ชันเก่า

การกำหนดค่าสายเคเบิลโซลิด

เราจะเริ่มต้นด้วยการรันการตั้งค่า Solid Cable:

bin/rails solid_cable:install

เครื่องกำเนิดนี้ทำหน้าที่หลักสองประการ มันสร้าง 24 ไฟล์การกำหนดค่าที่ตั้งค่า Solid Cable เป็นอะแดปเตอร์สายเคเบิล นอกจากนี้ยังสร้าง 37 ซึ่งมีคำจำกัดความสคีมาฐานข้อมูลสำหรับตารางข้อความของ Solid Cable Rails เวอร์ชันล่าสุดยังสร้างไฟล์เหล่านี้โดยอัตโนมัติเมื่อรัน 49 .

ต่อไปเราต้องกำหนดการตั้งค่าฐานข้อมูลของเราสำหรับ Solid Cable ตามค่าเริ่มต้น Rails จะใช้ฐานข้อมูลแยกต่างหากสำหรับ Solid Cable เพื่อแยกข้อมูลการส่งข้อความแบบเรียลไทม์จากข้อมูลที่เหลือของคุณ ในการพัฒนา คุณสามารถใช้ฐานข้อมูลเดียวกันหรือตั้งค่าฐานข้อมูลแยกต่างหากก็ได้ ฉันจะแนะนำวิธีใช้ฐานข้อมูล SQLite แยกต่างหากสำหรับ Solid Cable ในการพัฒนา ซึ่งหมายถึงการเพิ่มการเชื่อมต่อฐานข้อมูล "เคเบิล" ใหม่

การตั้งค่าฐานข้อมูลของคุณสำหรับ Solid Cable

เปิด 56 ไฟล์. ในส่วนการพัฒนา ให้เพิ่ม 69 ฐานข้อมูล ตัวอย่างเช่น หากคุณใช้ SQLite (ค่าเริ่มต้นของ Rails สำหรับ dev):

development:
 primary:
 <<: *default
 database: storage/development.sqlite3
 cable:
 <<: *default
 database: storage/development_cable.sqlite3
 migrations_paths: db/cable_migrate

production:
 primary:
 <<: *default
 database: storage/production.sqlite3
 cache:
 <<: *default
 database: storage/production_cache.sqlite3
 migrations_paths: db/cache_migrate
 queue:
 <<: *default
 database: storage/production_queue.sqlite3
 migrations_paths: db/queue_migrate
 cable:
 <<: *default
 database: storage/production_cable.sqlite3
 migrations_paths: db/cable_migrate

ขอย้ำอีกครั้ง หากคุณใช้ Rails เวอร์ชันล่าสุดเพียงพอ การกำหนดค่านี้จะอยู่ที่นั่นแล้ว

ตอนนี้เปิด 76 . Solid Cable ควรเป็นอะแดปเตอร์เริ่มต้นในการผลิตอยู่แล้ว เราต้องการเปิดใช้งาน Solid Cable ในการพัฒนาเช่นกัน (เพื่อให้เราสามารถทดสอบการแชทของเราใน localhost) แก้ไข 87 เพื่อใช้ 92 อะแดปเตอร์อยู่ระหว่างการพัฒนาและชี้ไปที่ 100 ฐานข้อมูลที่เราเพิ่งกำหนดค่า:

development:
 adapter: solid_cable
 connects_to:
 database:
 writing: cable
 polling_interval: 0.1.seconds
 message_retention: 1.day

test:
 adapter: test

production:
 adapter: solid_cable
 connects_to:
 database:
 writing: cable
 polling_interval: 0.1.seconds
 message_retention: 1.day

ใน 119 ข้างต้น เราตั้งค่าอะแดปเตอร์การพัฒนาเป็น 128 และคัดลอกการตั้งค่าจากการตั้งค่าการผลิต 132 การตั้งค่าจะบอก Action Cable ให้ใช้ สายเคเบิล ฐานข้อมูล (ตามที่กำหนดไว้ใน 141 ) สำหรับจัดเก็บข้อความ คุณจะต้องทำการเปลี่ยนแปลงนี้แม้ใน Rails เวอร์ชันล่าสุดก็ตาม

rails generate channel UserChat

class UserChatChannel < ApplicationCable::Channel
 def subscribed
 stream_from "user_chat_channel"
 end

 def unsubscribed
 # Any cleanup needed when unsubscribing from the channel
 end

 def talk(data)
 message = data["content"]
 ActionCable.server.broadcast("user_chat_channel", { content: message })
 end
end

import consumer from "channels/consumer";

const userChatChannel = consumer.subscriptions.create("UserChatChannel", {
 connected() {
 console.log("Connected to UserChatChannel.");
 },

 disconnected() {
 console.log("Disconnected from UserChatChannel.");
 },

 received(data) {
 const messagesDiv = document.getElementById("messages");
 if (messagesDiv && data.content) {
 const messageElement = document.createElement("p");
 messageElement.textContent = data.content;
 messagesDiv.appendChild(messageElement);
 }
 }
});

function sendMessage(content) {
 userChatChannel.perform("talk", { content: content });
}

export { sendMessage };
window.sendMessage = sendMessage;

rails generate controller UserChat index

<h1>Chats from Users</h1>

<div id="messages" style="border: 1px solid #ccc; padding: 1em; height: 200px; overflow-y: auto; margin-bottom: 1em;">
 <!-- Messages will appear here -->
</div>

<form id="chat-form" onsubmit="event.preventDefault(); sendMessage(document.getElementById('chat-input').value); document.getElementById('chat-input').value = '';">
 <input type="text" id="chat-input" placeholder="Type a message..." autocomplete="off" style="width: 80%;" />
 <button type="submit">Send</button>
</form>

root "user_chat#index"