실시간 편집 구현

동시편집 구현 방법

OT

Operational Transformation

Google Docs, Wave, Ms office

 

입력한 순서에 따라 서버가 적절히 변형하여 전달하는 방식으로, 시간 순서를 고려하여 우선순위를 부여해서 앞에서 적용한 것과 다음 순위 변경사항을 보정함

 

동작

1. 모든 변경사항을 서버가 기록
2. 서버에 전부 전송
3. 변경사항을 순차적으로 병합
4. 사용자 화면에 출력

 

문제점

1. 서버 과부하

 

OT 구현 오픈소스

1. SharedDB
2. Rustpad
3. Jot

 

 

 

CRDT

Conflict-Free-Replicated Data Types

Figma, Redis, Riak, Workie, Apple Notes

 

현재 각광 받는 기술로, 문서를 편집하는 유저끼리 데이터를 교환하는 방식으로 사용함, 스트림 상의 각 문자에 고유한 ID를 부여하고, 이를 기반으로 보정함

 

동작

1. 글자에 고유한 ID값을 부여하여 수정 시 해당 위치에 추가
2. 다른 유저는 해당 변경사항을 전달 받아 확인

 

문제점

1. 글자가 고유한 ID를 가지고 있기 때문에 랜덤화 된 값에 의해 병합 될 경우 이상한 글자가 나오게 될 수도 있음

문제를 보완하기 위한 알고리즘 존재

1. 많은 메모리 사용
2. Peer - to - Peer 통신이 불가능 할 경우를 대비해 패킷을 전송하는 중계 서버를 사용하는 경우, OT와 비슷하게 됨

 

CRDT 오픈소스

1. Automerge
2. Yjs
3. Yorkie

 

ysocket 사용

npm i y-websocket

ysocket server

npm install @y/websocket-server
HOST=localhost PORT=1234 npx y-websocket

client.js

import * as Y from "yjs";
import { WebsocketProvider } from "y-websocket";

const doc = new Y.Doc();
const wsProvider = new WebsocketProvider(
  "ws://localhost:1234",
  "my-roomname",
  doc
);

wsProvider.on("status", (event) => {
  console.log(event.status); // logs "connected" or "disconnected"
});