syidaxgrid
홈 가격 내 정보

GRID FEATURE · PRO

실시간 협업

협업은 같은 방에 참여한 사용자 사이에서 편집·커서·참여 상태를 공유합니다. 방 이름만 지정했다고 다른 기기의 데이터가 인터넷을 통해 자동 연결되는 것은 아닙니다.

Markdown 원문 Features

동작 원리와 선택 기준

realtimeUrl을 생략하면 같은 프로세스·페이지의 데모 용도입니다. 여러 사용자 환경은 앱이 제공하는 WebSocket 서비스와 인증·방 접근 권한·저장 정책을 함께 구성해야 합니다.

이 기능을 제품에서 사용하려면 Pro 패키지와 유효한 라이선스가 필요합니다. 설정 이름이 같더라도 Community에서 Pro 기능이 활성화되는 것은 아닙니다.

코드의 grid는 설치와 연결 장에서 준비한 Grid 요소입니다. 예제마다 필요한 데이터·설정을 확인하고, 코드에서 소개하는 앱 함수와 서버 주소는 프로젝트에 맞게 구현하세요.

예제 1. 같은 페이지에서 연결 실험

같은 데이터 ID 규칙을 가진 두 Grid에 같은 방 이름을 지정합니다.

javascript
grid.collaborationRoom = 'orders-review';
grid.collabUserName = '검토자 A';
grid.collabUserColor = '#2459d3';

결과 확인: 같은 페이지의 다른 참가자와 편집 동기화를 확인합니다. 실제 원격 서비스에 연결된 상태라고 설명하면 안 됩니다.

예제 2. 원격 협업 연결

앱의 인증된 WebSocket 주소를 realtimeUrl에 지정하고 참여·해제 흐름을 구현합니다. 서로 다른 방의 사용자가 데이터를 읽지 못하도록 서버에서도 방 권한을 검사합니다.

결과 확인: 네트워크 끊김과 재연결 시 syncStatusChanged 이벤트로 상태를 안내하고, 저장 완료와 단순 전달 완료를 구분합니다.

예제 3. 동기화 결과 읽기

원격 편집과 충돌 해결 결과를 앱의 활동 내역에 연결합니다.

javascript
grid.addEventListener('remoteEditApplied', event => console.log(event.detail));
grid.addEventListener('collabConflictResolved', event => console.log(event.detail));

결과 확인: 동시에 같은 셀을 수정한 결과를 실제 detail로 확인합니다. 같은 변경을 앱이 다시 전송해 순환하지 않도록 변경 출처를 구분합니다.

조합할 때와 문제를 해결할 때

모든 참가자는 동일한 rowId·열 식별자 규칙을 사용해야 합니다. 화면 인덱스로 원격 변경을 연결하지 마세요.

협업 상태만으로 영구 저장·감사 보존이 완료되었다고 안내하지 마세요. 데이터 저장 정책은 앱 서버와 연결합니다.

함께 읽기