presence-room-42
실시간 채팅
presence 채널 위의 방, 멤버십, 입력 중 표시.
활용 사례
협업 인터페이스
같은 것을 편집하는 두 사람에게는 계속 세 가지 답이 필요합니다. 또 누가 있는지, 방금 무엇을 했는지, 커서가 어디에 있는지. presence와 이벤트, 클라이언트 이벤트가 차례로 그것을 답합니다.
presence-doc-9f2
- presence 채널
- 클라이언트 이벤트
- 이벤트
- private-encrypted 채널
어떻게 동작하는가
- 01문서에 들어갑니다문서마다 presence 채널 하나. subscribe 시점에 서버가 인가합니다.
- 02누가 있는지 보여 줍니다멤버 목록은 구독과 함께 오고, 이벤트가 아바타를 정직하게 유지합니다.
- 03의도를 퍼뜨립니다커서와 선택 영역은 클라이언트 이벤트입니다. 빈도가 높고 버려도 되는 것들입니다.
- 04변경을 확정합니다오래 남을 편집은 서버를 거친 뒤 publish됩니다. 그래야 모두가 저장된 상태로 모입니다.
알아 두면 좋은 것
클라이언트 이벤트는 속도 제한이 있고 저장되지 않습니다. 커서에는 맞지만 편집에는 맞지 않습니다. 새로고침해도 남아야 하는 것은 서버를 거칩니다.
코드로 보기
doc.js
js
const doc = pusher.subscribe('presence-doc-9f2')// Ephemeral: straight between editors, never persisted.canvas.onpointermove = throttle((e) => { doc.trigger('client-cursor', { x: e.clientX, y: e.clientY })}, 50)// Durable: your server persisted it, then published it.doc.bind('block-updated', (block) => applyBlock(block))공식 Pusher 라이브러리를 손대지 않고 그대로 써서 작성했습니다. 설치할 PushCaster 패키지는 없습니다. 전체 문서