SharedDoc 초기화

js-collaboration-ot-client는 클라이언트 측 API를 제공하여, 개발자가 서버에 연결하고 공유 문서(SharedDoc)를 생성함으로써 실시간 동시 작업 편집을 구현할 수 있도록 합니다. 이 문서는 다음 내용을 포함하여 클라이언트 초기화 방법을 설명합니다.

• 의존성 설치

• 연결 구성

• 문서 인스턴스 생성

설치

npm을 사용하여 필요한 의존성 패키지를 설치합니다.

npm install @mescius/js-collaboration-client @mescius/js-collaboration-ot-client

• js-collaboration-client: 서버와의 연결을 설정하는 데 사용되는 Client 및 Connection 클래스를 제공합니다.

• js-collaboration-ot-client: OT 기능과 SharedDoc 클래스를 제공합니다.

초기화

1. OT Type 등록

   작업 동작을 정의하기 위해 OT Types을 등록합니다. 다음은 단순한 텍스트 타입을 등록하는 예제입니다.

   import { TypesManager } from '@mescius/js-collaboration-ot';
   
   const textType = {
       uri: 'http://example.com/types/text',
       create: (data) => data || '', // 빈 문자열로 초기화
       transform: (op1, op2, side) => {
           if (op1.pos > op2.pos || (op1.pos === op2.pos && side === 'left')) {
               return { pos: op1.pos + op2.text.length, text: op1.text };
           }
           return op1;
       },
       apply: (snapshot, op) => {
           return snapshot.slice(0, op.pos) + op.text + snapshot.slice(op.pos);
       }
   };
   
   TypesManager.register(textType);

2. Client 인스턴스 생성

   Client 클래스를 사용하여 클라이언트 인스턴스를 생성하고 서버 주소를 지정합니다.

   import { Client } from '@mescius/js-collaboration';
   const client = new Client();

3. Room에 연결

   connect 메서드를 사용하여 서버의 특정 Room에 연결하고, Connection 객체를 반환받습니다.

   const connection = client.connect('room1');

4. SharedDoc 초기화

   SharedDoc 클래스를 사용하여 Connection에 바인딩된 공유 문서 인스턴스를 생성합니다. SharedDoc는 메시지 타입이 "ot-doc"인 메시지를 송수신하기 위해 Connection을 사용합니다.

   import { SharedDoc } from '@mescius/js-collaboration-ot';
   const doc = new SharedDoc(connection);

   매개변수:

   connection: client.connect에서 반환된 Connection 객체

   역할: 스냅샷을 조작하고 작업(Op)을 제출하기 위한 공유 문서 인스턴스를 생성합니다.

전체 예제

다음은 SharedDoc 초기화의 전체 예제입니다.

import { Client } from '@mescius/js-collaboration';
import { SharedDoc, TypesManager } from '@mescius/js-collaboration-ot';

// OT Type 정의
const textType = {
    uri: 'rich-text-ot-type',
    create: (data) => data || '', // 빈 문자열로 초기화
    transform: (op1, op2, side) => {
        if (op1.pos > op2.pos || (op1.pos === op2.pos && side === 'left')) {
            return { pos: op1.pos + op2.text.length, text: op1.text };
        }
        return op1;
    },
    apply: (snapshot, op) => {
        return snapshot.slice(0, op.pos) + op.text + snapshot.slice(op.pos);
    }
};

// OT Type 등록
TypesManager.register(textType);

// 클라이언트 초기화
const client = new Client();
const connection = client.connect('room1');
const doc = new SharedDoc(connection);

다음 단계

문서를 생성하고 Ops를 제출/수신하는 방법은 다음 문서를 참고하세요: SharedDoc Class