공식 패키지 · 실시간 구성 요소

실시간 커서, 아바타, 편집 잠금

프레즌스 채널 위의 협업: 누가 어디에 있는지, 실시간 커서, 두 사람이 같은 필드를 편집하지 않도록 하는 컴포넌트 잠금, 발표용 따라가기 모드.

@hibira-io/spaces라이브 데모 ↗npm ↗GitHub ↗

멤버마다 프로필과 위치(보고 있는 페이지나 슬라이드 등)를 가질 수 있습니다.
커서 좌표는 1초에 다섯 번 전송되고 원래 속도로 재생되어 움직임이 부드럽게 보입니다.
다른 사람이 잡고 있는 필드에는 lock()이 실패하고, 멤버가 나가면 그 잠금은 풀립니다.

로그인하면 예제 코드에 내 클러스터 호스트가 채워집니다. 로그인

설치
```
npm install @hibira-io/spaces pusher-js
```

사용하기

import { Space } from '@hibira-io/spaces';

const pusher = new Pusher('YOUR_APP_KEY', {
  cluster: 'hkg',
  wsHost: 'ws.hibira.io',
  channelAuthorization: { endpoint: '/spaces/auth' },
});
const space = Space.enter(pusher, 'presence-space-doc-42', { profile: { color: '#e5484d' } });
space.on('members', ({ members }) => renderAvatars(members));
space.on('cursor', ({ id, member, x, y }) => drawCursor(id, member, x, y));

시작하기 전에

앱 설정에서 '클라이언트 이벤트 허용'을 켜야 플레이어끼리 움직임과 탭을 주고받을 수 있습니다.
프라이빗 채널과 프레즌스 채널에는 pusher-js와 마찬가지로, 앱 시크릿으로 구독에 서명하는 인증 엔드포인트가 백엔드에 필요합니다.

대시보드의 앱 키를 사용하세요. 시크릿은 서버에만 둡니다. 채널, 이벤트, 인가 엔드포인트는 Pusher와 똑같이 동작합니다. 무료 계정 만들기 →

실시간 커서, 아바타, 편집 잠금

설치

사용하기

시작하기 전에