동기화 에디터

1. 페이지 로드  → SSE 연결 수립 (GET /sync-editor/stream)
2. 사용자 입력  → 1초 디바운스 후 자동 저장 (POST /sync-editor/save)
3. 서버 저장    → version++ 후 DB 업데이트
4. SSE 루프    → 2초마다 DB version 확인
5. version 변경 감지 → SSE 이벤트 전송 (event: update)
6. 다른 클라이언트 → SSE 수신 후 에디터 업데이트

// 저장: version 증가 후 DB 업데이트
public function save(): ResponseInterface
{
    $content  = $this->request->getPost('content') ?? '';
    $clientId = $this->request->getPost('client_id') ?? '';
    $doc      = db_connect()->table('sync_docs')->limit(1)->get()->getRowArray();

    db_connect()->table('sync_docs')->where('id', $doc['id'])->update([
        'content'    => $content,
        'version'    => (int) $doc['version'] + 1,
        'client_id'  => $clientId,
        'updated_at' => date('Y-m-d H:i:s'),
    ]);

    return $this->response->setJSON(['version' => $doc['version'] + 1]);
}

// SSE 스트림: version 변경 시 전체 내용 push
public function stream(): void
{
    header('Content-Type: text/event-stream; charset=UTF-8');
    $lastVersion = (int) ($this->request->getServer('HTTP_LAST_EVENT_ID') ?? 0);

    for ($i = 0; $i < 120; $i++) {
        if (connection_aborted()) break;
        $doc = $this->getDoc();
        if ((int) $doc['version'] > $lastVersion) {
            $lastVersion = (int) $doc['version'];
            echo "id: {$lastVersion}\n";
            echo "event: update\n";
            echo 'data: ' . json_encode($doc) . "\n\n";
            flush();
        }
        sleep(2);
    }
}

const es = new EventSource('/examples/sync-editor/stream');

es.addEventListener('update', e => {
    const data = JSON.parse(e.data);

    // 내가 보낸 저장이면 무시
    if (data.client_id === clientId) return;

    if (isEditing) {
        // 편집 중 → 충돌 경고
        pendingRemote = data;
        showConflict(data);
    } else {
        // 편집 중 아님 → 즉시 반영
        applyRemoteContent(data);
    }
});

// 자동 저장: 1초 디바운스
editor.addEventListener('input', () => {
    isEditing = true;
    clearTimeout(autoSaveTimer);
    autoSaveTimer = setTimeout(saveContent, 1000);
});

// SSE 연결이 끊기면 브라우저가 자동 재연결
// Last-Event-ID 헤더로 마지막으로 받은 version을 서버에 전달
// → 서버는 해당 version 이후 변경분만 전송

// 서버 측: id: {version} 을 매 이벤트에 포함시키는 것이 핵심
echo "id: {$version}\n";
echo "event: update\n";
echo "data: " . json_encode($data) . "\n\n";