example.mp4

<aside> 🐙

https://github.com/djk01281/YJS-SocketIO

1. Socket.io로 통신, Y.doc에 일어난 변경 값을 서버에서 확인
2. 클라이언트들과 서버 간 같은 Y.doc을 공유 </aside>

YJS

YJS는 상태를 충돌없이 공유할 수 있게 해주는 라이브러리라고 할 수 있습니다. 이 상태를 담아둔 공간을 Y.Doc이라고 합니다.

동시성 해결을 위해서는 CRDT를 사용합니다.

동시 사용이 가능한 토글 버튼 만들기

가장 간단한 예시를 생각해보면, 다음과 같을 것 같습니다.

const toggleMap = {
    toggle: true
}

이와 같은 object에 여러 사람이 동시에 접근해야하는 상황입니다. 각 클라이언트에는 버튼이 있고, 이를 눌러서 버튼의 상태를 토글해줄 수 있습니다.

실시간으로 동작해야 하기 때문에, 다른 클라이언트에서 클릭했을 때의 변화도 바로 알 수 있고 동시에 클릭하더라도 이에 대한 충돌을 해결해줘야 합니다.

[클라이언트]

이를 위한 클라이언트 코드는 다음과 같습니다.

import { useEffect, useState, useRef } from "react";
import * as Y from "yjs";
import { SocketIOProvider } from "y-socket.io";

export default function App() {
  const [toggle, setToggle] = useState(false);

  const ydocRef = useRef<Y.Doc>();
  const providerRef = useRef<SocketIOProvider>();

  useEffect(() => {
    ydocRef.current = new Y.Doc();

    const provider = new SocketIOProvider(
      "<http://localhost:3000>",
      "room-name",
      ydocRef.current,
      {
        autoConnect: true,
        disableBc: false,
      },
      {
        reconnectionDelayMax: 10000,
        timeout: 5000,
        transports: ["websocket", "polling"],
      }
    );

    providerRef.current = provider;

    provider.awareness.setLocalState({
      user: {
        name: `User-${Math.floor(Math.random() * 100)}`,
      },
    });

    const toggleMap = ydocRef.current.getMap("toggleMap");

    const updateToggleState = () => {
      const newValue = toggleMap.get("toggle");
      setToggle(Boolean(newValue));
    };
    if (!toggleMap.has("toggle")) {
      toggleMap.set("toggle", false);
    } else {
      updateToggleState();
    }

    toggleMap.observe(() => {
      updateToggleState();
    });

    return () => {
      provider.destroy();
      ydocRef.current?.destroy();
    };
  }, []);

  const handleToggle = () => {
    if (!ydocRef.current) return;

    const toggleMap = ydocRef.current.getMap("toggleMap");
    const newValue = !toggle;

    toggleMap.set("toggle", newValue);
  };

  return (
    <div
      style={{
        display: "flex",
        flexDirection: "column",
        gap: "20px",
        justifyContent: "center",
        alignItems: "center",
        width: "100vw",
        height: "100vh",
        backgroundColor: "#231f20",
      }}
    >
      <button
        onClick={handleToggle}
        style={{
          width: "96px",
          height: "96px",
          borderRadius: "50%",
          transition: "background-color 0.3s",
          backgroundColor: toggle ? "#f7b528" : "#e9203d",
          border: "none",
          cursor: "pointer",
        }}
      />
    </div>
  );
}

처음 한번만 useEffect 내부의 함수가 실행됩니다.

ydocRef.current = new Y.Doc();

const provider = new SocketIOProvider(
  "<http://localhost:3000>",
  "room-name",
  ydocRef.current,
  {
    autoConnect: true,
    disableBc: false,
  },
  {
    reconnectionDelayMax: 10000,
    timeout: 5000,
    transports: ["websocket", "polling"],
  }
);

providerRef.current = provider;