실시간 협업 워크플로우 구현: Phoenix LiveView와 WebSocket 활용

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

Elixir/Phoenix 개발자, 실시간 협업 웹 애플리케이션 구축을 위한 프론트엔드/백엔드 엔지니어

(난이도: 중급 이상, WebSocket 및 Elixir의 PubSub/Presence 기능 이해 필요)

핵심 요약

• Phoenix LiveView는 WebSocket을 통해 실시간 상태 공유 및 다중 사용자 워크플로우 조율을 가능하게 함
• Phoenix.PubSub를 활용한 이벤트 라우팅과 Phoenix.Presence를 통한 온라인 사용자 추적이 핵심
• Role-based 상태 전환 및 비동기 업데이트 처리로 일관된 사용자 경험 제공

섹션별 세부 요약

1. 실시간 워크플로우의 필요성

• 전통적 웹 앱의 단일 사용자 세션 모델에서 다중 사용자 상호작용으로의 전환 필요
• Approval workflow 예시: 요청자, 검토자, 감사자 간 동기화된 상태 업데이트 요구
• LiveView는 대화형 UI 설계(메시지 흐름, 상태 전이)를 기반으로 함

2. PubSub 기반 이벤트 라우팅

• "request:#{request_id}" 주제 생성 후 LiveView 구독으로 이벤트 전달
• broadcast/3 함수를 통해 {:status_changed, "approved"} 같은 상태 변경 이벤트 전파
• 3개의 LiveView에서 독립적으로 상태 업데이트(예: 요청자: 상태 배지 변경, 검토자: 버튼 사라짐)

3. Presence를 통한 사용자 추적

• track/4 함수로 사용자 역할 및 상태 메타데이터 전송(예: "auditor", "viewing: true")
• 역할별 뷰어 목록 생성, 특정 역할 대상 메시지 브로드캐스트, UI 변화 트리거 가능
• "1 auditor viewing" 같은 실시간 알림 및 Auditor에게만 알림 전달 가능

4. Role-based 상태 전환 처리

• 검토자 승인 시 {:approved_by, reviewer_id} 이벤트 브로드캐스트
• 요청자 뷰: "Pending…" → "Approved by Alex", 후속 폼 노출, 다운로드 버튼 활성화
• 검토자 뷰: 요약 화면 전환, 관찰자 뷰: 최종 상태 표시
• 분산 상태 전이 실시간 처리(사용자, 역할, 기기 간)

5. 동시 작업 처리 전략

• WebSocket 메시지 처리 시 3가지 선택:
• 수락 및 재렌더링
• 로컬 상태 기반 무시
• 충돌 시 재시도/롤백
• handle_info/2 콜백에서 이 로직 구현, 락 코드 작성 필요 없음
• 동시 승인 시 "Already approved by Alex" 메시지로 명확한 커뮤니케이션 제공

6. 주의력 기반 알림 전략

• 타겟 WebSocket 브로드캐스트로 역할별 알림 전달:
• 배지 표시, 탭 펄스, 사이드바 갱신
• 코드 예시:

```elixir

broadcast(MyApp.PubSub, "user:#{id}", {:needs_attention, :request, request_id})

```

• 외부 푸시 서비스/JS 없이 Elixir 서버에서 실시간 알림 처리

결론

• Phoenix LiveView의 PubSub/Presence 기능을 통해 실시간 협업 워크플로우 구현 가능
• 역할 기반 상태 관리 및 비동기 업데이트 처리를 통해 사용자 경험 향상
• WebSocket 기반 알림 시스템으로 정확한 타겟팅 및 실시간성 달성, 복잡한 다중 사용자 상호작용을 효율적으로 처리 가능