บทความนี้ได้รับแรงบันดาลใจบางส่วนจากบทที่กำลังจะมาถึงของหนังสือ Advanced CableReady ของผู้เขียน และได้รับการปรับแต่งให้เหมาะกับโพสต์รับเชิญสำหรับ AppSignal
การแจ้งเตือนเป็นข้อกังวลข้ามประเด็นทั่วไปที่มีการแบ่งปันกันโดยเว็บแอปพลิเคชันจำนวนมาก
Noticed gem ทำให้การพัฒนาการแจ้งเตือนเป็นเรื่องง่ายอย่างน่าอัศจรรย์โดยมอบโมเดลที่สนับสนุนฐานข้อมูลและวิธีการจัดส่งแบบเสียบได้สำหรับแอปพลิเคชัน Ruby on Rails ของคุณ มันมาพร้อมกับการสนับสนุนในตัวสำหรับเมล เว็บซ็อกเก็ต และวิธีการจัดส่งอื่นๆ อีกสองสามวิธี
นอกจากนี้เรายังจะตรวจสอบข้อดีของการใช้ CableReady gem เพื่อทริกเกอร์การแจ้งเตือนของระบบในแอปพลิเคชัน Ruby on Rails ของคุณ
เข้าเรื่องเลย!
ข้อกำหนดเบื้องต้นและข้อกำหนด
คุณอาจต้องเรียกใช้การแจ้งเตือนของระบบจากแอปของคุณเป็นครั้งคราว คุณสามารถบรรลุเป้าหมายนี้ได้ด้วย API การแจ้งเตือน
ตัวอย่างเช่น สมมติว่าแอปพลิเคชันของคุณอนุญาตให้ผู้ใช้อัปโหลดไฟล์ขนาดใหญ่ซึ่งใช้เวลานานในการแปลงรหัส คุณอาจต้องการส่งการแจ้งเตือนให้ผู้ใช้เมื่อการอัปโหลดวิดีโอของพวกเขาเสร็จสิ้น ซึ่งหมายความว่าพวกเขาสามารถสลับไปทำงานใหม่ได้ในระหว่างนี้ และไม่ต้องเปิดแอปพลิเคชันของคุณทิ้งไว้หลายนาที
โชคดีที่ง่ายต่อการใช้งานและกำหนดรายละเอียดการแจ้งเตือนของระบบด้วยข้อกำหนดเบื้องต้นสองประการนี้:
- Noticed รองรับวิธีการจัดส่งแบบกำหนดเอง (Noticed เปิดเผย API แบบง่ายเพื่อใช้กลไกการขนส่งใด ๆ ที่คุณต้องการ — เช่น การโพสต์ไปยังเซิร์ฟเวอร์ Discord)
- CableReady มีลูกศรการดำเนินการแจ้งเตือนอยู่ในที่สั่น
รายการข้อกำหนดสำหรับ CableReady และ Noticed นั้นสั้น คุณเพียงแค่ต้องมีสิ่งต่อไปนี้:
- เซิร์ฟเวอร์ ActionCable ทำงานอยู่
- แบ็กเอนด์ ActiveJob (โดยทั่วไปจะใช้โดย Noticed)
หมายเหตุ:โค้ดตัวอย่างทั้งหมดสำหรับโปรเจ็กต์นี้มีอยู่ใน GitHub คุณสามารถปฏิบัติตามด้านล่าง — เราจะแนะนำคุณทีละขั้นตอน ป>
CableReady Primer สำหรับแอปพลิเคชัน Ruby on Rails
เริ่มต้นด้วยการทำความคุ้นเคยกับ CableReady เปิดตัวในปี 2560 ถือได้ว่าเป็น "ไลบรารีมาตรฐาน ActionCable ที่ขาดหายไป" .
ก่อนการถือกำเนิดของ Turbo วิธีเดียวที่จะสร้างแอปพลิเคชันแบบเรียลไทม์ใน Ruby on Rails คือผ่าน ActionCable ActionCable เป็น Wrapper Rails ดั้งเดิมรอบๆ WebSockets โดยให้ทั้ง API ฝั่งเซิร์ฟเวอร์และฝั่งไคลเอ็นต์เพื่อส่งข้อความผ่านการเชื่อมต่อแบบถาวรในทั้งสองทิศทางได้ตลอดเวลา
ข้อเสียของแนวทางนี้คือ (และเป็น) ที่คุณต้องเขียนโค้ดสำเร็จรูปจำนวนมากเพื่อให้มันเกิดขึ้น
นี่คือจุดที่ CableReady ช่วยโดยจัดเตรียมเลเยอร์นามธรรมรอบๆ การดำเนินการ DOM จำนวนมากที่จะทริกเกอร์บนเซิร์ฟเวอร์ ตัวอย่างบางส่วนได้แก่:
- การกลายพันธุ์ของ DOM (
07,11รหัส> ,26รหัส> ฯลฯ) - การเปลี่ยนแปลงคุณสมบัติองค์ประกอบ DOM (
37,47รหัส> ,59รหัส> ฯลฯ) - การส่งเหตุการณ์ DOM โดยพลการ
- การปรับเปลี่ยนประวัติเบราว์เซอร์
- การแจ้งเตือน (ซึ่งเราจะนำไปใช้)
เซิร์ฟเวอร์ CableReady และไคลเอนต์
CableReady ทำงานได้อย่างมหัศจรรย์อย่างไร โดยสรุป ประกอบด้วยส่วนฝั่งเซิร์ฟเวอร์และฝั่งไคลเอ็นต์
ทางฝั่งเซิร์ฟเวอร์ โมดูล 69 สามารถรวมไว้ในส่วนใดส่วนหนึ่งของแอปพลิเคชันของคุณที่ต้องการได้ นี่อาจเป็นในงาน โมเดลคอลแบ็ก หรือคอนโทรลเลอร์ธรรมดา แต่ก่อนอื่น จะต้องมีช่อง ActionCable ก่อน หากต้องการอ้างอิงเอกสารอย่างเป็นทางการของ CableReady:
โปรดทราบว่า 72 เรียกว่า ตัวระบุสตรีม . สามารถใช้เพื่อกำหนดเป้าหมายผู้ชมในวงกว้างหรือเฉพาะลูกค้าเฉพาะเจาะจงที่สมัครรับข้อมูลช่องของคุณ เพื่อสรุปตัวอย่าง เราสามารถรวมโมดูลผู้ออกอากาศไว้ในโมเดลและส่ง 86 ให้กับลูกค้าหลังจากลงทะเบียน:
ในฝั่งไคลเอ็นต์ ตรรกะนั้นเรียบง่าย สร้างการสมัครสมาชิกช่องดังกล่าว จากนั้นในฮุกที่ได้รับ ให้โทร 96 ในการดำเนินการทั้งหมดที่ส่งผ่านสาย:
CableReady กับ Turbo สำหรับราง
โดยสรุป คุณควรใช้ CableReady เมื่อใด และควรหลีกเลี่ยงเมื่อใด
ด้วยการเปิดตัว Turbo ชุมชนการพัฒนาเว็บได้รับกล่องเครื่องมืออันทรงพลังสำหรับประดิษฐ์แอปพลิเคชันแบบโต้ตอบที่แสดงผลบนเซิร์ฟเวอร์ โดยพื้นฐานแล้วเป็นเทคโนโลยีฟรอนท์เอนด์ที่มีการผูกฝั่งเซิร์ฟเวอร์ที่มีประสิทธิภาพสำหรับ Rails จึงเข้ากันได้ดีกับสแต็ก Model-View-Controller (MVC) มาตรฐาน ดังนั้นจึงครอบคลุมข้อกำหนดทั่วไปส่วนใหญ่ของแอปของคุณได้
ในทางกลับกัน CableReady คือมีดของกองทัพสวิสสำหรับการพัฒนา Rails แบบเรียลไทม์ และควรใช้ด้วยความระมัดระวัง มันเป็นนามธรรมที่ทรงพลังที่อาจดูเชิญชวนให้นำไปใช้อย่างแพร่หลาย แต่ถ้าคุณจินตนาการว่าทุกส่วนของ DOM สามารถกลายพันธุ์ได้จากตำแหน่งใดๆ ในแอป คุณจะเข้าใจว่าสิ่งนี้อาจนำไปสู่สภาพการแข่งขันและข้อบกพร่องที่ยากต่อการติดตาม
มีหลายกรณีเช่นกรณีนี้ที่ CableReady สมเหตุสมผลอย่างยิ่ง เนื่องจากช่วยให้สามารถควบคุม DOM ได้ละเอียดมากขึ้น
เมื่อขอ TLDR แบบธรรมดา ฉันจะตอบว่า Turbo มีไว้สำหรับนักพัฒนาแอปพลิเคชัน ในขณะที่ CableReady มีไว้สำหรับผู้สร้างไลบรารี แต่อย่างที่เราเห็น มีพื้นที่สีเทาระหว่างทั้งสอง
สังเกตเห็นแล้ว — การแจ้งเตือนอย่างง่ายสำหรับแอปพลิเคชัน Ruby on Rails
ไลบรารีที่สองที่เราจะใช้เพื่อส่งการแจ้งเตือนของระบบคืออัญมณีที่สังเกตเห็นของ Chris Oliver หัวใจสำคัญของสิ่งนี้คือสร้างขึ้นจากโมเดล ActiveRecord ที่เป็นโมเดล การแจ้งเตือนเดียวไปยังผู้รับ . เก็บข้อมูลเมตาทั่วไป เช่น:
- ผู้ที่ส่งการแจ้งเตือนถึง (ผู้รับ)
- เมื่อมีการอ่านการแจ้งเตือน
- พารามิเตอร์ใดๆ ที่เกี่ยวข้องกับการแจ้งเตือน (โดยทั่วไปจะเป็นการอ้างอิงถึงรุ่นอื่น)
หากคุณคุ้นเคยกับวิธีการทำงานของเมตาตาราง ActiveStorage/ActionText ก็จะคล้ายกันมาก
ที่อยู่ติดกับสิ่งนี้ Noticed ใช้ PORO (Plain Old Ruby Objects กล่าวคือ วัตถุที่ไม่มีการเชื่อมต่อกับ Rails หรือเฟรมเวิร์กอื่นๆ) ซึ่งทำหน้าที่เป็นพิมพ์เขียวสำหรับการแจ้งเตือนจริง สิ่งเหล่านี้ค่อนข้างทำให้เข้าใจผิด เรียกอีกอย่างว่าการแจ้งเตือน และมีเหตุผลเกี่ยวกับวิธีการแสดงผลและแจกจ่าย นี่คือตัวอย่างจาก README:
เราจะเห็นสิ่งนี้ในที่ทำงานในไม่ช้า สิ่งที่น่าสนใจเป็นพิเศษคือ 108 การร้องขอ เนื่องจากเป็นตัวกำหนดว่าการแจ้งเตือนนี้ควรใช้วิธีใด:
110รหัส> เก็บบันทึกการแจ้งเตือน (ของรุ่นที่กล่าวถึงข้างต้น) เพื่อการเข้าถึงในภายหลัง129รหัส> ส่งผ่านช่องทาง ActionCable และสตรีมที่กำหนด (ค่าเริ่มต้น134)147รหัส> ระบุเมลที่ใช้ในการส่งการแจ้งเตือน ตัวอย่างนี้จะแสดงวิธีการคำนึงถึงการตั้งค่าใดๆ ที่ผู้รับอาจตั้งไว้
เป้าหมายของเราในส่วนที่เหลือของบทความนี้คือการใช้วิธีการจัดส่งแบบกำหนดเองซึ่งจะส่งการแจ้งเตือนของระบบของเรา
วิธีการจัดส่งแบบกำหนดเอง:การแจ้งเตือนของระบบผ่าน API การแจ้งเตือน
ก่อนที่เราจะเริ่มต้นดำเนินการนี้ เรามาทำความเข้าใจกันก่อนโดยการสร้างแอปพลิเคชัน Rails ใหม่ เนื่องจากการผสานรวมกับ CableReady ทำได้ง่ายกว่าด้วยวิธีนี้ ฉันจึงเลือกใช้ 151 ตัวเลือก JavaScript เหนือ 165 :
หมายเหตุ: ในขณะที่เขียน เวอร์ชัน Rails ปัจจุบันคือ 7.0.4 หากคุณมีแอปพลิเคชัน Rails อยู่แล้ว คุณสามารถข้ามขั้นตอนถัดไปได้ แต่ต้องแน่ใจว่าคุณมีโมเดลผู้ใช้หรือแนวคิดที่คล้ายกันเพื่อทำหน้าที่เป็น ผู้รับ การแจ้งเตือน .
1. เตรียมผู้รับ
สังเกตเห็นว่าจำเป็นต้องมีโมเดลผู้ใช้เพื่อทำหน้าที่เป็นผู้รับ ดังนั้นเพื่อให้กระชับ ให้ดึง Devise และสร้างโมเดลผู้ใช้
หลังจากนั้น ให้เปิดคอนโซล Rails และสร้างผู้ใช้ตัวอย่าง:
2. เพิ่มสังเกตเห็น
ต่อไป มาเพิ่ม Noticed เข้ากับบันเดิลของเราและสร้างโมเดลฐานข้อมูล
เราทำตามที่บอก รัน 179 และเพิ่มโพลีมอร์ฟิก 188 เชื่อมโยงกับโมเดลผู้ใช้ของเรา:
ชิ้นสุดท้ายก่อนที่เราจะทดสอบสิ่งนี้ได้คือการสร้างพิมพ์เขียว PORO:
เราปรับแต่งเล็กน้อยเพื่อให้ใช้วิธีการจัดส่งฐานข้อมูลและข้อความตัวยึดตำแหน่งในขณะนี้ โดยทั่วไปคุณจะเพิ่มพารามิเตอร์ที่จำเป็นที่นี่ เช่น รหัสโมเดล เพื่อสร้างข้อความและ URL ที่จะลิงก์ไป — ดูรายละเอียดใน README ที่แจ้งให้ทราบ
ด้วยการใช้คอนโซล Rails เท่านั้น เราสามารถสาธิตวิธีการส่งการแจ้งเตือนตาม PORO นี้ได้ทันที:
ดังที่เราเห็นแล้ว Noticed ทำการแทรกฐานข้อมูล ดังนั้นตอนนี้เราสามารถคว้า 195 ทั้งหมดได้ สำหรับผู้ใช้ที่ระบุ:
นี่เพียงพอสำหรับเราที่จะสร้างมุมมองดัชนีแบบง่ายที่แสดงรายการการแจ้งเตือนที่ส่งทั้งหมดสำหรับผู้ใช้ปัจจุบัน:
หลังจากหมุนแอปด้วย 202 เราสามารถเข้าสู่ระบบและเรียกดู http://localhost:3000/notifications:

3. การติดตั้ง CableReady
เพื่อใช้งาน CableReady เราจำเป็นต้องติดตั้งมัน โชคดีที่การดำเนินการนี้เสร็จสิ้นอย่างรวดเร็ว:
มาสร้าง 213 กันดีกว่า เพื่อส่งข้อความของเรา:
สิ่งนี้จะเพิ่มการพึ่งพา ActionCable (JavaScript) ที่ขาดหายไปทั้งหมดและรองรับไฟล์ช่องที่เกี่ยวข้องโดยเฉพาะ 223 และ 233รหัส> .
สำหรับช่องทางฝั่งเซิร์ฟเวอร์ เราสืบทอดมาจาก 244 :
ก่อนดำเนินการต่อ เราต้องแน่ใจว่า ActionCable ของเราได้รับการรับรองความถูกต้องสำหรับผู้ใช้ Devise ฉันจะไม่ลงรายละเอียดเกี่ยวกับเรื่องนั้นที่นี่ แผ่นสำเร็จรูปที่จำเป็นมีลักษณะดังนี้:
ตรวจสอบเอกสาร StimulusReflex เพื่อดูตัวเลือกอื่นๆ
ในฝั่งไคลเอ็นต์ เราจำเป็นต้องเพิ่มโค้ดการตั้งค่าเล็กๆ น้อยๆ ที่กล่าวถึงข้างต้น:
หมายเหตุ: ActionCable จำเป็นต้องใช้ Redis ดังนั้นส่วนที่เหลือของบทความนี้จะถือว่าคุณมีเซิร์ฟเวอร์ในเครื่องทำงานอยู่
4. การใช้วิธีการนำส่ง
หากต้องการเผยแพร่การแจ้งเตือนของระบบ ให้สร้างวิธีการจัดส่งใหม่:
คลาสนั่งร้านมีลักษณะดังนี้:
มาดำเนินการต่อด้วยการร่างวิธีที่เราจินตนาการถึง 251 ของเรา วิธีการทำงาน
เรายืม 260 แล้ว วิธีการบางส่วนมาจากวิธีการจัดส่ง ActionCable ในตัว ช่วยให้เราส่งผ่านช่องทางผ่านตัวเลือกวิธีการเรียนได้ มิฉะนั้นจะกลับไปเป็น 271 ที่ให้มา .
จากนั้นเราใช้ 287 ของ CableReady วิธีการถ่ายทอดอินสแตนซ์ตามลำดับไปยังผู้รับ
เพื่อนำไปใช้จริง เราต้องเชื่อมต่อกับการแจ้งเตือน PORO:
5. นำไปใช้งาน
ตอนนี้เหลือเพียงลองทำดู เราสามารถเรียกใช้สิ่งนี้ได้อีกครั้งจากคอนโซล Rails:
สมมติว่าคุณยังคงเข้าสู่ระบบอยู่ เบราว์เซอร์จะขออนุญาตจากคุณเพื่อรับการแจ้งเตือนในนามของแอปก่อน:

เมื่อคุณยืนยันสิ่งนี้แล้ว คุณจะได้รับการแจ้งเตือนป๊อปอัปที่สวยงามนี้จากเบราว์เซอร์ของคุณ:

สรุป
สำรวจช่องทางที่รวดเร็วผ่าน CableReady และ Noticed เราได้สาธิตวิธีผสานรวม API เบราว์เซอร์ดั้งเดิมเข้ากับแอปของคุณ ผลลัพธ์ที่ได้คือวิธีที่ง่ายและสอดคล้องกันในการส่งการแจ้งเตือนของระบบไปยังผู้ใช้ของคุณ
กรณีการใช้งานนี้มีไว้เพื่อแสดงให้เห็นว่าการผสม CableReady เข้ากับกรณีการใช้งานของคุณนั้นง่ายดายเพียงใด หากคุณคิดล่วงหน้าไปหนึ่งขั้น การแยกวิธีการจัดส่งแบบร่างออกเป็นไลบรารีนั้นไม่ใช่เรื่องยาก
ฉันหวังว่าสิ่งนี้จะเป็นแรงบันดาลใจให้คุณมองหาลักษณะที่ปรากฏของโดเมนปัญหาเชิงโต้ตอบในแอปของคุณและลองใช้ CableReady
อ่านเพิ่มเติมโดยหยิบหนังสือเล่มใหม่ของฉัน Advanced CableReady
ใช้รหัสคูปอง APPSIGNAL-PROMO และรับส่วนลด $10!
ขอให้สนุกกับการเขียนโค้ด!
ปล. หากคุณต้องการอ่านโพสต์ Ruby Magic ทันทีที่เผยแพร่ สมัครรับจดหมายข่าว Ruby Magic ของเราและไม่พลาดแม้แต่โพสต์เดียว! ป>