Hooks에서 CRDT의 공동 편집 기능을 간단하게 사용하는 Room Service(베타 버전) 사용

CRDT 소개

Google Docs 등 공동 편집 기능이 있는 시스템 이면에서는 기사 충돌을 실시간으로 해결하는 알고리즘 중 하나가 CRDT(Conflicct-free Replicated Data Type)입니다.
참고 자료
https://qiita.com/everpeace/items/bb73ec64d3e682279d26
CRDT 이외에 OT(Operational Transformation)는 일본어에서도 조작전환이라고 불리는데 1989년경에 존재했고 역사가 유구하여 Google Wave와 Google Docs에서 사용되었다.
참고 자료
Google Wave 등을 개발 중인 분들의 블로그입니다.
"I was wrong. CRDTs are the future"라는 제목의 강력한 제목의 글
https://josephg.com/blog/crdts-are-the-future/
CRDT의 JS 실복 중 유명한 것은 yjs(Star2.8k)가 있습니다.
CodeMirror, Monaco 등 주요 편집 라이브러리의 귀속에 대응하여 클라이언트 간의 통신에 필요한 설정도 WebRTC, WebSocket 등에서 선택할 수 있다
https://github.com/yjs/yjs
Room Service는 이러한 알고리즘과 필요한 백엔드를 추상화하여 React Hooks가 매우 간단하게 처리할 수 있는 서비스를 제공합니다.
https://www.roomservice.dev/
베타 버전이라 가격 설정도 아직 결정되지 않았지만, 우선 지금은 안정적으로 무료로 사용할 수 있다...
디스코드에서는 몇 주 뒤 처음으로 가격 설정을 하고 싶다는 이야기를 들었다.

샘플 프로젝트를 시험적으로 가동하다.

yarn create next-app --example https://github.com/getroomservice/examples --example-path next.js-todolist

https://www.roomservice.dev/
Room Service에 로그인하여 얻은api 키를 누르십시오.env에 추가

echo ROOMSERVICE_API_KEY=APIKEY >> .env

룸 서비스는 맵과list의 데이터 구조를 사용하고usemap과useList의hooks를 준비했습니다. 이 샘플은useList를 사용하여todo를 관리합니다.

const [todos, list] = useList("my-room", "todos");

이 경우 my-room의 todos 목록을 사용하여 모든 사용자의 변경 사항을 실시간으로 업데이트합니다.이게 다야...
_app.Tsx에서 Room Service에 사용되는 세션 토큰이 생성되었습니다.
https://www.roomservice.dev/docs/auth
이 샘플 응용 프로그램은 사용되지 않지만 Room Service에는 사용자가 활성 상태일 때만 유효한 Procence Hooks가 있습니다.
이는 사용자가 체크아웃하면 데이터가 삭제되기 때문에'누가 방에 있느냐'는 사용자 목록, 커서 위치 공유 등에 가장 적합하다. 이런 것들은 간단하게 실현할 수 있다!
이 프레젠테이션을 사용한 샘플 앱을 한번 볼게요.
https://github.com/getroomservice/examples/tree/master/next.js-presence
env에 Room Service의 API 키 추가

echo ROOMSERVICE_API_KEY=APIKEY >> .env

yarn dev에서 마우스 커서 좌표를 공유하는 프로그램 시작

필요하지 않은 텍스트를 삭제하면 마우스 커서 위치 공유에 필요한 코드는 이것뿐입니다.usePresence에서 my-room 내positions라는 Procence를 참고하면 사용자가 활성 상태일 때 유효한 데이터를 사용할 수 있습니다

import { usePresence } from "@roomservice/react";
import { useEffect } from "react";

export default function Home() {
  const [positions, positionsClient] = usePresence("my-room", "positions");

  useEffect(() => {
    window.onmousemove = (e: MouseEvent) => {
      positionsClient.set({ x: e.clientX, y: e.clientY });
    };
  }, []);

  return <div>Positions: {JSON.stringify(positions)}</div>;
}

마지막으로usemap에서textarea,usepresence 실시간 마우스 커서 사용하기
우리는 공유된 샘플 프로젝트를 만들어 보았습니다. 참고하세요!

https://github.com/rakutek/roome-service-presence