이 기사는 저자의 Advanced CableReady 책의 다음 장에서 부분적으로 영감을 받았으며 AppSignal의 이번 게스트 게시물에 맞게 조정되었습니다.
알림은 많은 웹 애플리케이션에서 공유하는 일반적인 공통 관심사입니다.
Noted gem은 Ruby on Rails 애플리케이션을 위한 데이터베이스 지원 모델과 플러그형 전달 방법을 제공하여 알림 개발을 놀랍도록 쉽게 만듭니다. 메일러, 웹소켓 및 기타 몇 가지 전달 방법에 대한 지원이 내장되어 있습니다.
또한 Ruby on Rails 애플리케이션에서 시스템 알림을 트리거하기 위해 CableReady gem을 사용할 때의 장점을 살펴보겠습니다.
시작해 보겠습니다!
전제조건 및 요구사항
때때로 앱에서 시스템 알림을 실행해야 할 수도 있습니다. 알림 API를 사용하면 이를 달성할 수 있습니다.
예를 들어, 애플리케이션에서 사용자가 트랜스코딩하는 데 시간이 오래 걸리는 대용량 파일을 업로드할 수 있다고 가정해 보겠습니다. 동영상 업로드가 완료되면 사용자에게 알림을 보낼 수 있습니다. 즉, 그 동안 새로운 작업으로 전환할 수 있으며 몇 분 동안 애플리케이션을 열어둘 필요가 없습니다.
다행히 다음 두 가지 전제 조건을 충족하면 시스템 알림을 쉽게 구현하고 구체화할 수 있습니다.
- Noticed는 사용자 지정 전달 방법을 지원합니다(Noticed는 Discord 서버에 게시 등 원하는 전송 메커니즘을 구현하기 위한 간단한 API를 제공합니다).
- CableReady의 화살통에는 알림 작업 화살표가 있습니다.
CableReady 및 Noted에 대한 요구 사항 목록은 짧습니다. 다음만 있으면 됩니다:
- 실행 중인 ActionCable 서버
- ActiveJob 백엔드(일반적으로 Notised에서 사용됨)
참고:이 프로젝트의 전체 샘플 코드는 GitHub에서 사용할 수 있습니다. 아래 내용을 따라하셔도 됩니다. 단계별로 안내해 드리겠습니다.
Ruby on Rails 애플리케이션을 위한 CableReady 입문서
CableReady에 익숙해지는 것부터 시작해 보겠습니다. 2017년에 출시된 이 제품은 "빠진 ActionCable 표준 라이브러리"로 생각할 수 있습니다. .
Turbo가 등장하기 전에 Ruby on Rails에서 실시간 애플리케이션을 제작하는 유일한 방법은 ActionCable을 통해서였습니다. ActionCable은 WebSocket을 둘러싼 기본 Rails 래퍼로, 서버측 및 클라이언트측 API를 모두 제공하여 언제든지 지속적인 연결을 통해 메시지를 양방향으로 보낼 수 있습니다.
이 접근 방식의 단점은 이를 구현하려면 많은 상용구 코드를 작성해야 한다는 것입니다.
이는 CableReady가 서버에서 트리거되는 다수의 DOM 작업 주위에 추상화 계층을 제공함으로써 도움을 주는 곳입니다. 몇 가지 예는 다음과 같습니다:
- DOM 돌연변이(
inner_html,insert_adjacent_html,morph등) - DOM 요소 속성 변형(
add_css_class,remove_css_class,set_dataset_property등) - 임의의 DOM 이벤트 전달
- 브라우저 기록 조작
- 알림 (우리가 활용할 것입니다)
CableReady 서버 및 클라이언트
CableReady는 어떻게 마법을 발휘하나요? 간단히 말해서 서버측 부분과 클라이언트측 부분으로 구성되어 있습니다.
서버 측에서는 모듈 CableReady::Broadcaster 이를 요구하는 애플리케이션의 모든 부분에 포함될 수 있습니다. 이는 작업, 모델 콜백 또는 일반 컨트롤러일 수 있습니다. 하지만 먼저 ActionCable 채널이 마련되어 있어야 합니다. CableReady의 공식 문서를 인용하려면:
visitors에 유의하세요. 스트림 식별자라고 합니다. . 광범위한 청중을 대상으로 하거나 채널을 구독하는 특정 고객만을 대상으로 하는 데 사용할 수 있습니다. 예제를 마무리하려면 모델에 브로드캐스터 모듈을 포함하고 console.log을 보내면 됩니다. 가입 후 고객에게:
클라이언트 측에서는 논리가 간단합니다. 앞서 언급한 채널에 대한 구독을 생성하세요. 그런 다음 수신된 후크에서 CableReady.perform를 호출하세요. 유선을 통해 전달된 모든 작업에 대해:
CableReady와 Rails용 Turbo
요약하면, 언제 CableReady를 사용해야 하며, 언제 피해야 합니까?
Turbo의 도입으로 웹 개발 커뮤니티는 서버 렌더링 반응형 애플리케이션을 제작할 수 있는 강력한 도구 상자를 받았습니다. 본질적으로 Rails용 강력한 서버 측 바인딩을 갖춘 프런트엔드 기술이므로 표준 MVC(Model-View-Controller) 스택에 잘 맞습니다. 따라서 일반적인 앱의 요구 사항 대부분을 충족할 수 있습니다.
반면에 CableReady는 실시간 Rails 개발의 만능 칼이므로 주의해서 사용해야 합니다. 이는 광범위하게 사용하기에 매우 매력적으로 보일 수 있는 강력한 추상화입니다. 그러나 DOM의 모든 부분이 앱의 어느 위치에서나 변경될 수 있다고 상상한다면 이것이 경쟁 조건과 추적하기 어려운 버그로 이어질 수 있다는 것을 이해하게 될 것입니다.
하지만 현재 상황과 같은 경우에는 DOM에 대한 보다 세밀한 제어가 가능하므로 CableReady가 완벽하게 적합한 경우가 있습니다.
간단한 TLDR을 요청하면 Turbo는 애플리케이션 개발자를 위한 것이고 CableReady는 라이브러리 빌더를 위한 것이라고 대답하겠습니다. 하지만 앞으로 살펴보겠지만 둘 사이에는 회색 영역이 있습니다.
알림 — Ruby on Rails 애플리케이션에 대한 간단한 알림
시스템 알림을 전달하기 위해 적용할 두 번째 라이브러리는 Chris Oliver의 Noted gem입니다. 기본적으로 수신자에게 보내는 단일 알림을 모델링하는 ActiveRecord 모델을 기반으로 구축되었습니다. . 다음과 같은 일반적인 메타데이터를 보유합니다.
- 알림을 보낸 사람(수신자)
- 알림을 읽은 시간
- 알림과 관련된 모든 매개변수(일반적으로 다른 모델에 대한 참조)
ActiveStorage/ActionText 메타테이블의 작동 방식을 잘 알고 계시다면 이는 매우 유사합니다.
이에 인접하여 Noted는 PORO(Plain Old Ruby Objects)를 사용합니다. , 즉 Rails나 다른 프레임워크에 연결되지 않은 객체), 실제 알림의 청사진 역할을 합니다. 이는 다소 오해의 여지가 있지만 알림이라고도 하며 알림을 렌더링하고 배포하는 방법에 대한 논리를 전달합니다. 다음은 README의 예입니다:
우리는 이것을 곧 직장에서 보게 될 것입니다. 특히 흥미로운 것은 deliver_by입니다. 이 알림이 사용해야 하는 전달 방법을 결정하는 호출:
deliver_by :database나중에 액세스할 수 있도록 위에서 언급한 모델의 알림 기록을 저장합니다.deliver_by :action_cable정의된 ActionCable 채널 및 스트림(기본값Noticed::NotificationChannel)을 통해 전송합니다. )deliver_by :email알림을 보내는 데 사용되는 메일러를 지정합니다. 이 예는 수신자가 설정했을 수 있는 기본 설정을 고려하는 방법을 보여줍니다.
이 문서의 나머지 부분에 대한 목표는 시스템 알림을 보내는 사용자 정의 전달 방법을 구현하는 것입니다.
맞춤형 전달 방법:알림 API를 통한 시스템 알림
이 작업을 시작하기 전에 새 Rails 애플리케이션을 만들어 기초를 정리하겠습니다. 이렇게 하면 CableReady와 통합하는 것이 더 쉽기 때문에 esbuild을 선택했습니다. importmaps 이상의 JavaScript 옵션 :
참고: 작성 당시 현재 Rails 버전은 7.0.4입니다. 기존 Rails 애플리케이션이 있는 경우 다음 단계를 건너뛸 수 있지만 알림 수신자 역할을 할 사용자 모델 또는 유사한 개념이 있는지 확인하세요. .
1. 수신자 준비
수신자 역할을 하려면 사용자 모델이 필요하므로 간결하게 설명하기 위해 Devise를 가져와 사용자 모델을 생성하세요.
그런 다음 Rails 콘솔을 열고 샘플 사용자를 생성하세요:
2. 알림 추가
다음으로, 번들에 Notified를 추가하고 데이터베이스 모델을 생성해 보겠습니다.
지시대로 db:migrate을 실행합니다. 그리고 다형성 has_many를 추가하세요. 사용자 모델과의 연관:
이것을 테스트하기 전 마지막 작업은 청사진 PORO를 생성하는 것입니다:
잠시 동안 데이터베이스 전달 방법과 자리 표시자 메시지만 사용하도록 약간 조정했습니다. 일반적으로 모델 ID와 같은 필수 매개변수를 여기에 추가하여 메시지와 링크할 URL을 구성합니다. 자세한 내용은 공지된 README를 참조하세요.
이제 Rails 콘솔만 사용하여 이 PORO를 기반으로 알림을 전달하는 방법을 시연할 수 있습니다.
보시다시피, Noted는 데이터베이스 삽입을 수행하므로 이제 모든 Notifications을 가져올 수 있습니다. 특정 사용자에 대해:
이는 현재 사용자에게 전달된 모든 알림을 나열하는 간단한 인덱스 뷰를 구성하기에 충분합니다.
bin/dev으로 앱을 가동한 후 , 로그인하여 http://localhost:3000/notifications:
3. CableReady 설치
CableReady를 사용하려면 설치가 필요합니다. 다행히도 이 작업은 신속하게 완료되었습니다:
NotificationChannel을 생성해 보겠습니다. 우리의 메시지를 전달하기 위해:
그러면 누락된 ActionCable(JavaScript) 종속성이 모두 추가되고 각 채널 파일, 특히 app/channels/notification_channel.rb이 스캐폴드됩니다. 및 app/javascript/channels/notification_channel.js .
서버 측 채널의 경우 Noticed::NotificationChannel에서 상속됩니다. :
계속하기 전에 ActionCable이 Devise 사용자에 대해 인증되었는지 확인해야 합니다. 여기서는 이에 대해 자세히 설명하지 않겠습니다. 필요한 상용구는 다음과 같습니다:
다른 옵션에 대해서는 StimulusReflex 문서를 확인하세요.
클라이언트 측에서는 위에서 언급한 작은 설정 코드를 추가해야 합니다:
참고: ActionCable이 작동하려면 Redis가 필요하므로 이 문서의 나머지 부분에서는 로컬 서버가 실행 중이라고 가정합니다.
4. 전달 방법 구현
시스템 알림을 방송하려면 새 전달 방법을 생성해 보겠습니다.
스캐폴드 클래스는 다음과 같습니다:
계속해서 deliver을 구상하는 방법을 초안으로 작성해 보겠습니다. 일하는 방법.
channel를 빌렸습니다 내장된 ActionCable 전달 방법의 일부입니다. 클래스 메소드 옵션을 통해 채널을 전달할 수 있습니다. 그렇지 않으면 제공된 Noticed::NotificationsChannel으로 대체됩니다. .
그런 다음 CableReady의 notification를 사용합니다. 해당 인스턴스를 수신자에게 브로드캐스트하는 방법입니다.
이를 실행하려면 알림 PORO에 연결해야 합니다.
5. 업무에 적용하기
이제 시험해 보는 일만 남았습니다. Rails 콘솔에서 간단히 다시 실행할 수 있습니다:
아직 로그인되어 있다고 가정하면 브라우저는 먼저 앱을 대신하여 알림을 받을 수 있는 권한을 요청합니다.
이를 확인하면 브라우저에서 다음과 같은 아름다운 팝업 알림을 받게 됩니다:
마무리
CableReady 및 Noted를 통해 빠른 경로를 탐색하면서 기본 브라우저 API를 앱에 통합하는 방법을 시연했습니다. 그 결과 사용자에게 시스템 알림을 전달하는 간단하고 일관된 방법이 탄생했습니다.
이 사용 사례는 또한 CableReady를 사용 사례에 혼합하는 것이 얼마나 쉬운지 보여주기 위한 것입니다. 한 단계 앞서 생각해 보면 초안 전달 방법을 라이브러리로 분리하는 것은 어렵지 않습니다.
이것이 귀하의 앱에서 수직적 반응 문제 영역의 발현을 찾아보고 CableReady를 사용해 보는 데 영감을 주기를 바랍니다.
내 새 책 Advanced CableReady를 선택하여 자세한 내용을 읽어보세요.
쿠폰 코드 APPSIGNAL-PROMO를 사용하여 $10를 절약하세요!
즐거운 코딩 되세요!
추신 Ruby Magic 게시물이 보도되는 즉시 읽으려면 Ruby Magic 뉴스레터를 구독하고 단 하나의 게시물도 놓치지 마세요!