Hotwire සහ Turbo Streams, Rails පරිසරයේ real‑time යෙදුම් සඳහා ජනප්රිය විසඳුම් වේ. නමුත් ඔබ Svelte වැනි component framework එකක් Inertia.js සමඟ භාවිතා කරන්නේ නම්, Turbo නැතිව real‑time සින්ක් කිරීම කෙලින්ම අභියෝගයකි.
Inertia යෙදුම් තුළ WebSocket සිදුවීම් ලැබුන වහාම router.reload() කරලා server‑side props නැවත ලබා ගැනීම හෝ ActionCable සිදුවීම් අසා, client‑side store අතින් මැනුවල් ලෙස දත්ත යාවත්කාලීන කිරීම යන දෙකේ එකක් තෝරාගත යුතුය. පළමු ක්රමය සර්වර් බර වැඩි කරයි, දෙවන ක්රමය කේතය බරපතල හා දෝෂප්රවණ කරයි.
මෙම ගැටළුවට DexieCable නමින් නව විසඳුමක් පෙනෙයි. DexieCable, Rails ActionCable සමඟ සම්බන්ධ වෙමින්, client‑side IndexedDB (Dexie.js) තුළ සෘජු ලිඛිත කාර්යයන් සිදු කරයි. UI කොම්පොනන්ට්ස් පසුව Dexie ලයිව්ක්වෙරි (liveQuery) භාවිතයෙන් දත්ත නරඹයි; ඒ නිසා දත්ත කුමක් හෝ ආකාරයකින් ඇතුළත් වුවත්, UI ස්වයංක්රීයව නවීකරණය වේ.
DexieCable හි ප්රධාන වාසි
- Zero Sync Boilerplate: දත්ත IndexedDB වලට ඇතුළත් වීමෙන් පසු කොම්පොනන්ට්ස් ඒ ගැන නොදැන සිටියත්, ලයිව්ක්වෙරි මඟින් UI යාවත්කාලීන වේ.
- Instant UI Updates: නෙට්වර්ක් ප්රතිචාරයක් රැඳෙන්නේ නැති බැවින්, පරිශීලකයාට තත්ක්ෂණික අත්දැකීමක් ලැබේ.
- Decoupled Architecture: ActionCable පසුබිමෙන් IndexedDB සින්ක් කරයි; මේ අතර පේජ් එකක් හෝ කොම්පොනන්ට් එකක් සක්රිය නොවූ විටත් දත්ත යාවත්කාලීන වේ.
- Declarative Rails Macros: ActiveRecord මොඩලයට
syncs_to_dexieමැක්රෝ එකක් එක් කිරීමෙන්, create, update, delete සිදුවීම් ස්වයංක්රීයව broadcast වේ.
උදාහරණය – Rails, ActionCable, DexieCable සහ Svelte සමඟ ක්රියාත්මක කිරීම
1. Client‑side සැකසීම – Dexie දත්ත ගබඩාව නිර්මාණය කර, DexieCable වෙත සම්බන්ධ කරයි.
import Dexie from "dexie";
import DexieCable from "dexiecable";
export const db = new Dexie("MyAppDB");
db.version(1).stores({ todos: "id, title, completed, updated_at" });
DexieCable.db = db;
DexieCable.subscribe("UserChannel");
2. Rails පාර්ශවය – Channel එකට DexieCable mixin එක ඇතුළත් කර, මොඩලයට syncs_to_dexie මැක්රෝ එක යොදා දෙයි.
# app/channels/user_channel.rb
class UserChannel < ApplicationCable::Channel
include DexieCable
def subscribed
stream_for current_user
end
end
# app/models/todo.rb
class Todo < ApplicationRecord
belongs_to :user
syncs_to_dexie via: UserChannel, to: :user
end
3. Svelte UI – liveQuery භාවිතයෙන් Dexie දත්ත නරඹා, ActionCable මඟින් වෙනස් වීමක් සිදුවුනොත් UI ස්වයංක්රීයව නැවත render වේ.