Bài viết này một phần được lấy cảm hứng từ chương sắp tới trong cuốn sách Advanced CableReady của tác giả và được điều chỉnh để phù hợp với bài đăng này của khách dành cho AppSignal.
Thông báo là mối quan tâm xuyên suốt điển hình được nhiều ứng dụng web chia sẻ.
Đá quý chú ý giúp việc phát triển thông báo cực kỳ dễ dàng bằng cách cung cấp mô hình dựa trên cơ sở dữ liệu và các phương thức phân phối có thể cắm được cho ứng dụng Ruby on Rails của bạn. Nó đi kèm với sự hỗ trợ tích hợp cho người gửi thư, ổ cắm web và một số phương thức gửi khác.
Chúng ta cũng sẽ xem xét giá trị của việc sử dụng gem CableReady để kích hoạt thông báo hệ thống trong ứng dụng Ruby on Rails của bạn.
Hãy bắt tay vào thực hiện thôi!
Điều kiện tiên quyết và yêu cầu
Thỉnh thoảng, bạn có thể cần kích hoạt thông báo hệ thống từ ứng dụng của mình. Bạn có thể đạt được điều này bằng API thông báo.
Ví dụ:giả sử ứng dụng của bạn cho phép người dùng tải lên các tệp lớn và mất nhiều thời gian để chuyển mã. Bạn có thể muốn gửi thông báo cho người dùng sau khi quá trình tải video lên của họ hoàn tất. Điều này có nghĩa là họ có thể chuyển sang một tác vụ mới trong thời gian chờ đợi và không cần phải mở ứng dụng của bạn trong vài phút.
May mắn thay, thật dễ dàng để triển khai và đưa ra thông báo hệ thống với hai điều kiện tiên quyết sau:
- Noticed có hỗ trợ các phương thức phân phối tùy chỉnh (Noticed cung cấp một API đơn giản để triển khai bất kỳ cơ chế truyền tải nào bạn thích — ví dụ:đăng lên máy chủ Discord).
- CableReady có mũi tên thao tác thông báo trong bao đựng.
Danh sách các yêu cầu đối với CableReady và Noted rất ngắn — bạn chỉ cần những điều sau:
- một máy chủ ActionCable đang chạy
- một chương trình phụ trợ ActiveJob (thường được Noted sử dụng)
Lưu ý:Toàn bộ mã mẫu cho dự án này có sẵn trên GitHub. Bạn cũng có thể làm theo bên dưới — chúng tôi sẽ hướng dẫn bạn từng bước.
CableReady Primer cho ứng dụng Ruby on Rails của bạn
Hãy bắt đầu bằng cách làm quen với CableReady. Được phát hành vào năm 2017, nó có thể được coi là "thư viện tiêu chuẩn ActionCable bị thiếu" .
Trước khi Turbo ra đời, cách duy nhất để tạo ra các ứng dụng thời gian thực trong Ruby on Rails là thông qua ActionCable. ActionCable là trình bao bọc Rails gốc xung quanh WebSockets, cung cấp cả API phía máy chủ và phía máy khách để gửi tin nhắn thông qua kết nối liên tục theo cả hai hướng bất kỳ lúc nào.
Nhược điểm của phương pháp này là bạn phải viết rất nhiều mã soạn sẵn để thực hiện được.
Đây là nơi CableReady trợ giúp bằng cách cung cấp một lớp trừu tượng xung quanh vô số hoạt động DOM sẽ được kích hoạt trên máy chủ. Một vài ví dụ bao gồm:
- Đột biến DOM (
inner_html,insert_adjacent_html,morph, v.v.) - Đột biến thuộc tính phần tử DOM (
add_css_class,remove_css_class,set_dataset_property, v.v.) - gửi các sự kiện DOM tùy ý
- thao tác lịch sử trình duyệt
- thông báo (mà chúng tôi sẽ sử dụng)
Máy chủ và máy khách CableReady
CableReady hoạt động kỳ diệu như thế nào? Tóm lại, nó bao gồm phần phía máy chủ và phía máy khách.
Về phía máy chủ, mô-đun CableReady::Broadcaster có thể được bao gồm trong bất kỳ phần nào trong ứng dụng của bạn yêu cầu nó. Đây có thể là một công việc, một cuộc gọi lại mô hình hoặc một bộ điều khiển đơn giản. Nhưng trước tiên, kênh ActionCable phải được thiết lập. Để trích dẫn tài liệu chính thức của CableReady:
Lưu ý rằng visitors được gọi là số nhận dạng luồng . Nó có thể được sử dụng để nhắm mục tiêu đến nhiều đối tượng hoặc chỉ những khách hàng cụ thể đã đăng ký kênh của bạn. Để kết thúc ví dụ, chúng ta có thể đưa mô-đun phát sóng vào một mô hình và gửi console.log cho khách hàng sau khi đăng ký:
Về phía khách hàng, logic rất đơn giản. Tạo một đăng ký cho kênh nói trên. Sau đó, trong hook nhận được, hãy gọi CableReady.perform trên tất cả các hoạt động được truyền qua dây:
CableReady so với Turbo dành cho Rails
Tóm lại, khi nào bạn nên sử dụng CableReady và khi nào bạn nên tránh sử dụng nó?
Với sự ra đời của Turbo, cộng đồng phát triển web đã nhận được một hộp công cụ mạnh mẽ để tạo ra các ứng dụng phản hồi được kết xuất trên máy chủ. Về cơ bản là một công nghệ giao diện người dùng với các liên kết phía máy chủ mạnh mẽ cho Rails, nó rất phù hợp với ngăn xếp Model-View-Controller (MVC) tiêu chuẩn. Do đó, nó có thể đáp ứng hầu hết các yêu cầu thông thường của ứng dụng của bạn.
Mặt khác, CableReady là con dao quân đội Thụy Sĩ trong việc phát triển Rails thời gian thực và nên được sử dụng cẩn thận. Đó là một sự trừu tượng mạnh mẽ có vẻ rất hấp dẫn để sử dụng rộng rãi. Nhưng nếu bạn cho rằng mọi phần của DOM đều có thể bị thay đổi từ bất kỳ vị trí nào trong ứng dụng của mình thì bạn sẽ hiểu rằng điều này có thể dẫn đến tình trạng cạnh tranh và các lỗi khó theo dõi.
Tuy nhiên, có những trường hợp giống như trường hợp hiện tại, trong đó CableReady hoàn toàn hợp lý vì nó cho phép kiểm soát chi tiết hơn đối với DOM.
Khi được yêu cầu một TLDR đơn giản, tôi sẽ trả lời rằng Turbo dành cho các nhà phát triển ứng dụng, trong khi CableReady dành cho những người xây dựng thư viện. Nhưng như chúng ta sẽ thấy, có những vùng xám giữa hai điều này.
Đã nhận thấy — Thông báo đơn giản cho ứng dụng Ruby on Rails
Thư viện thứ hai chúng ta sẽ áp dụng để gửi thông báo hệ thống là Noticed gem của Chris Oliver. Về cốt lõi, nó được xây dựng dựa trên mô hình ActiveRecord mô hình hóa một thông báo duy nhất cho người nhận . Nó chứa siêu dữ liệu phổ biến, chẳng hạn như:
- thông báo được gửi tới ai (người nhận)
- khi thông báo được đọc
- bất kỳ tham số nào mà thông báo được liên kết (thường là tham chiếu đến mô hình khác)
Nếu bạn đã quen với cách hoạt động của các bảng meta ActiveStorage/ActionText thì cách này rất giống.
Bên cạnh đó, Noted sử dụng PORO (Đối tượng Ruby cũ đơn giản , tức là các đối tượng không có bất kỳ kết nối nào với Rails hoặc các khung công tác khác), đóng vai trò là bản thiết kế cho các thông báo thực tế. Đôi khi gây nhầm lẫn, chúng còn được gọi là Thông báo và mang tính logic về cách hiển thị và phân phối chúng. Đây là một ví dụ từ README:
Chúng ta sẽ sớm thấy điều này tại nơi làm việc. Được quan tâm đặc biệt là deliver_by lời gọi, vì chúng xác định phương thức gửi thông báo này nên sử dụng:
deliver_by :databaselưu trữ bản ghi Thông báo (của mô hình được đề cập ở trên) để truy cập saudeliver_by :action_cablegửi nó qua kênh và luồng ActionCable được xác định (mặc địnhNoticed::NotificationChannel)deliver_by :emailchỉ định một người gửi thư được sử dụng để gửi thông báo. Ví dụ này hiển thị cách tính đến bất kỳ tùy chọn nào mà (những) người nhận có thể đã đặt.
Mục tiêu của chúng tôi trong phần còn lại của bài viết này là triển khai một phương thức gửi tùy chỉnh sẽ gửi thông báo đến hệ thống của chúng tôi.
Phương thức gửi tùy chỉnh:Thông báo hệ thống qua API thông báo
Trước khi bắt đầu thực hiện việc này, hãy làm rõ nền tảng bằng cách tạo một ứng dụng Rails mới. Vì việc tích hợp với CableReady theo cách này dễ dàng hơn nên tôi đã chọn esbuild Tùy chọn JavaScript trên importmaps :
Lưu ý: Tại thời điểm viết bài, phiên bản Rails hiện tại là 7.0.4. Nếu bạn có ứng dụng Rails hiện có, bạn có thể bỏ qua bước tiếp theo, nhưng hãy đảm bảo rằng bạn có mô hình Người dùng hoặc khái niệm tương tự để hoạt động như một người nhận thông báo .
1. Chuẩn bị người nhận
Đã nhận thấy cần một mô hình Người dùng để đóng vai trò là người nhận, vì vậy để ngắn gọn hơn, hãy kéo Devise và tạo mô hình Người dùng.
Sau đó, mở bảng điều khiển Rails và tạo người dùng mẫu:
2. Thêm Đã thông báo
Tiếp theo, hãy thêm Noticed vào gói của chúng ta và tạo mô hình cơ sở dữ liệu.
Chúng ta làm như đã bảo, chạy db:migrate và thêm has_many đa hình liên kết với mô hình Người dùng của chúng tôi:
Phần cuối cùng trước khi chúng ta có thể thử nghiệm điều này là tạo một bản thiết kế PORO:
Chúng tôi điều chỉnh nó một chút để tạm thời nó chỉ sử dụng phương thức phân phối cơ sở dữ liệu và thông báo giữ chỗ. Thông thường, bạn sẽ thêm các thông số bắt buộc ở đây, chẳng hạn như id mô hình, để xây dựng thông báo và URL cần liên kết tới — hãy xem README thông báo để biết chi tiết.
Chỉ sử dụng bảng điều khiển Rails, chúng tôi có thể trình bày cách gửi thông báo dựa trên PORO này ngay bây giờ:
Như chúng ta có thể thấy, Noted thực hiện thao tác chèn cơ sở dữ liệu, vì vậy bây giờ chúng ta có thể lấy tất cả Notifications cho một người dùng được chỉ định:
Điều này là đủ để chúng tôi xây dựng chế độ xem chỉ mục đơn giản liệt kê tất cả các thông báo đã gửi cho người dùng hiện tại:
Sau khi khởi động ứng dụng với bin/dev , chúng ta có thể đăng nhập và duyệt đến http://localhost:3000/notifications:
3. Cài đặt CableReady
Để sử dụng CableReady, chúng ta cần cài đặt nó. May mắn thay, việc này được thực hiện nhanh chóng:
Hãy tạo một NotificationChannel để truyền tải thông điệp của chúng tôi:
Điều này sẽ thêm tất cả các phần phụ thuộc ActionCable (JavaScript) bị thiếu và tạo khung cho các tệp kênh tương ứng, cụ thể là app/channels/notification_channel.rb và app/javascript/channels/notification_channel.js .
Đối với kênh phía máy chủ, chúng tôi kế thừa từ Noticed::NotificationChannel :
Trước khi tiếp tục, chúng tôi cần đảm bảo ActionCable của chúng tôi được xác thực cho người dùng Devise. Tôi sẽ không đi vào chi tiết về điều đó ở đây. Bản tóm tắt cần thiết trông như thế này:
Hãy xem tài liệu về StimulusReflex để biết các lựa chọn khác.
Về phía khách hàng, chúng ta cần thêm một đoạn mã thiết lập nhỏ được đề cập ở trên:
Lưu ý: Cần có Redis để ActionCable hoạt động, vì vậy phần còn lại của bài viết này giả định rằng bạn có một máy chủ cục bộ đang chạy.
4. Thực hiện phương thức phân phối
Để phát thông báo hệ thống, hãy tạo một phương thức gửi mới:
Lớp giàn giáo trông như thế này:
Hãy tiếp tục phác thảo cách chúng ta hình dung deliver của mình phương pháp làm việc.
Chúng tôi đã mượn channel một phần từ phương thức phân phối ActionCable tích hợp sẵn. Nó cho phép chúng ta chuyển vào một kênh thông qua tùy chọn phương thức lớp. Nếu không, nó sẽ quay trở lại Noticed::NotificationsChannel được cung cấp .
Sau đó, chúng tôi sử dụng notification của CableReady phương thức truyền phát phiên bản tương ứng tới người nhận.
Để đưa nó vào hoạt động, chúng ta phải kết nối nó với PORO thông báo của mình:
5. Đưa nó vào hoạt động
Bây giờ tất cả những gì còn lại phải làm là thử nó. Chúng ta có thể chỉ cần chạy lại cái này từ bảng điều khiển Rails:
Giả sử bạn vẫn đăng nhập, trước tiên trình duyệt sẽ yêu cầu bạn cấp quyền nhận thông báo thay mặt cho ứng dụng:
Sau khi xác nhận điều này, bạn sẽ nhận được thông báo bật lên tuyệt đẹp này từ trình duyệt của mình:
Kết thúc
Tham gia chuyến tham quan nhanh qua CableReady và Noted, chúng tôi đã trình bày cách tích hợp API trình duyệt gốc vào ứng dụng của bạn. Kết quả là một cách đơn giản, mạch lạc để gửi thông báo hệ thống tới người dùng của bạn.
Ca sử dụng này cũng nhằm minh họa việc kết hợp CableReady vào ca sử dụng của bạn dễ dàng như thế nào. Nếu bạn nghĩ trước một bước, việc tách phương thức phân phối đã soạn thảo vào thư viện không khó.
Tôi hy vọng điều này sẽ truyền cảm hứng cho bạn để tìm kiếm các biểu hiện của miền vấn đề phản ứng dọc trong ứng dụng của bạn và dùng thử CableReady.
Hãy đọc thêm bằng cách chọn cuốn sách mới Advanced CableReady của tôi.
Sử dụng mã phiếu giảm giá APPSIGNAL-PROMO và tiết kiệm $10!
Chúc bạn viết mã vui vẻ!
Tái bút. Nếu bạn muốn đọc các bài đăng của Ruby Magic ngay khi chúng được đăng tải, hãy đăng ký nhận bản tin Ruby Magic của chúng tôi và không bao giờ bỏ lỡ một bài đăng nào!