SpreadJS Excel Collaboration Server

Node.js 기반 JavaScript
실시간 Excel 동시편집 라이브러리

JavaScript 동시편집 프레임워크를 통해, 간단하게 실시간 Excel 협업 기능을 여러분의 SpreadJS 웹 앱에 확장해보세요.

이제 Google Sheets, MS365 Excel처럼 웹 앱에서 여러 사용자가 실시간으로 협업하는 기능을 구현할 수 있습니다.

SpreadJS Excel  동시편집 핵심 기능

이제 JavaScript 만으로 Excel 동시편집 기능 개발이 가능합니다.

SpreadJS 동시편집 서버는(Collaboration Server) 엔터프라이즈급 실시간 Excel 협업 개발에 필요한 모든 기능을 기본 제공합니다.

Node.js 환경에서 즉시 실행 가능한 서버와 클라이언트 소켓 관리 및 동기화 로직 등 협업 모듈을 제공하여, 완벽한 Excel 동기화, 충돌 제어 및 협업을 보장합니다.

실시간 Excel 동기화

실시간 Excel 동기화

SpreadJS 운영변환(OT) 엔진이 여러 사용자의 동시 편집을 충돌 없이 지능적으로 지동 병합/편집합니다.

정밀한 사용자 트래킹

정밀한 사용자 트래킹

각 사용자의 커서 위치, 선택 영역, 편집 상태를 실시간으로 시각화 기능을 제공합니다.

세밀한 사용자 권한 제어

세밀한 사용자 권한 제어

사용자별, 셀 별 편집 권한을 세밀하게 제어합니 다. View/Edit 모드와 시트별 접근 제어를 지원 합니다.

데이터베이스(DB) 통합

데이터베이스(DB) 통합

MemoryDB, Postgres, SQLite3 및 커스텀 데이터베이스 어댑터를 통해서, 다중 사용자의 Excel 문서 스냅샷 및 작업을 안전하게 저장할 수 있습니다.

자동 재연결 로직

자동 재연결 로직

하트비트 및 자동 재연결 로직을 통해 네트워크 끊김 시 자동 재연결하여 데이터 손실 없이 세션 복구 로직을 기본제공합니다.

유연한 협업 로직 커스텀

유연한 협업 로직 커스텀

미들웨어 및 Hook 확장 모델을 지원하며, 개발자는 서버 측 운영 변환(OT) 엔진을 통해 비즈니스 형태에 맞게 Excel 데이터 흐름을 제어할 수 있습니다.

List of Services

    JavaScript만으로 완성하는 실시간 Excel 협업 엔진

    Node.js 기반 풀스택 Excel 동시편집 Collaboration Server를 통해, 개발자는 더 이상 복잡한 인프라 설정 없이 JavaScript 코드만으로 SpreadJS에 실시간 공동 작업(Real-time Collaboration) 기능을 즉시 통합 할 수 있습니다.

    다중 사용자 기반의 실시간 스프레드시트 및 문서 공동 작업

    개발자는 더 이상 동시 수정 시 발생하는 'Race Condition'을 고민할 필요가 없습니다. SpreadJS의 실시간 동시편집 프레임워크는 여러 사용자가 Excel 문서를 공유하고 동시에 편집할 수 있는 강력한 환경을 제공합니다. 검증된 운영 변환(OT) 기술을 기반으로 셀 수정, 행 삽입, 수식 업데이트 등 모든 작업을 충돌 없이 실시간으로 동기화하여 데이터 일관성을 완벽하게 보장합니다.

    세분화된 사용자 권한 관리

    SpreadJS 협업 서버는 단순한 편집 권한을 넘어, 공유 스프레드시트에 대한 정밀한 액세스 제어 기능을 제공합니다. 개발자는 사용자별 고유 ID와 액세스 모드(전체 편집/읽기 전용)를 기반으로 권한을 설정할 수 있으며, 필터링·정렬·셀 서식 변경 등 세부 기능까지 제어 가능합니다. 이를 통해 팀은 데이터 무결성을 엄격히 유지하는 동시에, 실시간 활동 추적을 통해 투명하고 안전한 협업 환경을 구축할 수 있습니다.

    무료 체험 가이드

    14일간 실시간 협업의 모든 기능을 경험하세요.

    SpreadJS 온라인 동시 편집 데모 실행

    SpreadJS 실시간 동시편집 기능을 지금 테스트해보세요.

    SpreadJS 동시편집 프레임워크로 구현된 온라인 데모를 직접 경험해 보세요.
    실제 Excel 동시편집 기능이 어떻게 작동하는지 확인하고, 여러분의 웹 시스템에 어떻게 적용할 수 있을지 새로운 아이디어를 얻으실 수 있습니다.

    온라인 Excel 동시편집 데모 실행

    SpreadJS 실시간 협업 기능 빠른 시작 가이드

    아래 가이드를 따라 10분 안에 실시간 협업 스프레드시트를 구축해 보세요!

    1

    NPM 및 라이브러리 설치를 통한 프로젝트 초기화

    Node.js 프로젝트를 생성하고 필요한 패키지를 설치합니다

    📦 설치 
      # 프로젝트 폴더 생성 

    mkdir spread-collaboration
    cd spread-collaboration

     # Node.js 프로젝트 초기화 

    npm init -y

     # 필수 패키지 설치 

    npm install @mescius/spread-sheets \
         @mescius/spread-sheets-collaboration \
         @mescius/spread-sheets-collaboration-client \
         @mescius/js-collaboration \
         @mescius/js-collaboration-client \
         express
    2

    고성능 실시간 처리를 위한 Node.js 서버 설정

    실시간 협업을 위한 Node.js 서버를 구성합니다

    📄 server.js 
      import 
express from 
 'express' 
;
     import 
{ Server } from 
 '@mescius/js-collaboration' 
;
     import 
* as 
OT from 
 '@mescius/js-collaboration-ot' 
;

     const 
app = express();
     const 
httpServer = http.createServer(app);
     const 
server = new 
Server({ httpServer });

     // OT 문서 서비스 초기화 

     const 
documentServices = new 
OT.DocumentServices();
    server.useFeature(OT.documentFeature(documentServices));

    httpServer.listen( 8080 
);
    ⚡ Operational Transformation 지원
    🔄 자동 문서 동기화
    3

    JS Spreadsheet 클라이언트 구현

    SpreadJS와 협업 기능을 연결합니다

    📄 client.js 
      import 
* as 
GC from 
 '@mescius/spread-sheets' 
;
     import 
{ Client } from 
 '@mescius/js-collaboration-client' 
;
     import 
* as 
OT from 
 '@mescius/js-collaboration-ot-client' 
;
     import 
{ bind } from 
 '@mescius/spread-sheets-collaboration-client' 
;

     // SpreadJS 워크북 생성 

     const 
workbook = new 
GC.Spread.Sheets.Workbook( 'ss' 
);

     // 서버 연결 및 룸 참여 

     const 
conn = new 
Client().connect( 'room1' 
);
     const 
doc = new 
OT.SharedDoc(conn);
     await 
doc.fetch();

     // 문서가 없으면 생성 

     if 
(!doc.type) {
      await 
doc.create(workbook.collaboration.toSnapshot());
    }

     // 워크북과 문서 바인딩 

    bind(workbook, doc);
    4

    실행 및 테스트

    서버를 실행하고 여러 브라우저에서 동시 편집을 확인하세요

    🚀 실행 
      # 클라이언트 빌드 

    npm run build

     # 서버 시작 

    npm run start

     # 브라우저에서 접속 

     http://localhost:8080
    ① 브라우저에서 http://localhost:8080 열기
    ② 여러 탭/창을 열어서 동시에 편집
    ③ 실시간 동기화 확인

    JavaScript Excel 동시편집, 이제 어렵게 개발하지 마세요.

    이제 검증된 Excel 협업 개발 모듈로 개발 시간을 획기적으로 단축하세요.

    복잡한 OT(운영 변환) 알고리즘 구현 없이, 단 몇 줄의 코드로 엔터프라이즈급 실시간 Excel 동시편집 협업 기능을 여러분의 웹 애플리케이션에 구축하세요.

    개발 시간을 단축 하여 더 많은 비즈니스 기회를 만들어 보세요.

    😰 전통적인 방식
    WebSocket 서버 구현 ∞
    OT 알고리즘 개발 ∞
    충돌 해결 로직 ∞
    클라이언트 동기화 ∞
    Excel 편집기 구현 ∞
    테스트 및 디버깅 ∞
    총 개발 기간: ∞
    VS
    😊 SpreadJS 협업 기능 컴포넌트
    패키지 설치 ~2분
    서버 코드 작성 ~5분
    클라라이언트 연결 ~3분
    ✓ OT 자동 처리
    ✓ 충돌 자동 해결
    ✓ 즉시 동기화
    총 개발 기간: ~10분 💡

    강력한 엔터프라이즈용 SpreadJS 협업 기능 및 서버 확장성

    List of Services

      SpreadJS 실시간 협업 작업은 여러 사용자가 동시에 동일한 스프레드시트를 편집할 수 있도록 지원합니다.

      이제 여러분의 웹 앱에 Google Sheets와 Excel Online과 같은 실시간 다중 사용자 Excel 편집 기능을 구현해보세요.

      Excel 분할 동기화

      스냅 샷을 통합 문서의 워크시트별로 하나씩, 더 작고 독립적인 조각으로 분할하여 대용량 문서에 대한 서버 효율성을 향상시킵니다.

      독립적인 동시 편집

      다중 사용자 환경에서도 각자의 작업을 독립적으로 실행/취소(Redo/Undo) 가능합니다.

      Excel 세션 자동 재연결

      네트워크 끊김 시 자동 재연결하여 데이터 손실 없이 세션 복구

      데이터베이스(DB) 통합 지원

      PostgresQL, SQLite 등 주요 데이터베이스 지원. 커스텀 어댑터로 선택 확장 가능합니다.

      미들웨어 & 이벤트 훅

      요청/응답 파이프라인에 커스텀 로직 삽입. 감사, 검증, 변환 등 자유롭게 확장

      커스텀 OT 타입 정의

      기본 제공되는 OT 타입 외에도 비즈니스 로직에 맞는 사용자 커스텀 타입 정의가 가능합니다.

      기업 환경에 최적화된 엔터프라이즈급 아키텍쳐(Architecture)

      코드로 보는 SpreadJS 실시간 협업 기능 구현

      클라이언트와 서버 코드를 함께 보면서 얼마나 쉽게 개발할 수 있는지 확인하세요!

      🚀 웹 Excel 협업 기능, 10분이면 충분합니다!

      복잡한 실시간 협업 기능도 SpreadJS라면 코드 몇 줄로 빠르게 완성할 수 있습니다.

      🖥️ server.js

       import express from 'express';
import http from 'http';
import { Server } from '@mescius/js-collaboration';
import * as OT from '@mescius/js-collaboration-ot';
import { type } from '@mescius/spread-sheets-collaboration';

// OT 타입 등록
OT.TypesManager.register(type);

const app = express();
const httpServer = http.createServer(app);

// 협업 서버 생성
const server = new Server({ httpServer });

// OT 문서 서비스 초기화
const documentServices = new OT.DocumentServices();
server.useFeature(OT.documentFeature(documentServices));

// 정적 파일 제공
app.use(express.static('public'));

// 서버 시작
httpServer.listen(8080, () => {
    console.log('서버 실행 중: http://localhost:8080');
});
      ✅ 단 25줄로 완전한 협업 서버 완성
      🔄 OT 엔진이 자동으로 충돌 해결
      📦 Express와 완벽하게 통합
      실시간 동기화

      🧑🏻‍💻 client.js

       import * as GC from '@mescius/spread-sheets';
import '@mescius/spread-sheets-collaboration-addon';
import { Client } from '@mescius/js-collaboration-client';
import * as OT from '@mescius/js-collaboration-ot-client';
import { type, bind } from '@mescius/spread-sheets-collaboration-client';

// OT 타입 등록
OT.TypesManager.register(type);

window.onload = async function() {
    // SpreadJS 워크북 생성
    const workbook = new GC.Spread.Sheets.Workbook('ss');
    
    // 서버에 연결하고 룸 참여
    const conn = new Client().connect('room1');
    const doc = new OT.SharedDoc(conn);
    
    // 오류 감지
    doc.on('error', (err) => console.error(err));
    
    // 문서 가져오기
    await doc.fetch();
    
    // 문서가 없으면 생성
    if (!doc.type) {
        workbook.getActiveSheet().getCell(0, 0).value('실시간 협업 시작!');
        await doc.create(workbook.collaboration.toSnapshot(), type.uri, {});
    }
    
    // 워크북과 문서 바인딩
    bind(workbook, doc);
    
    console.log('✅ 협업 모드 활성화!');
};
      ✅ 단 30줄로 실시간 협업 기능 완성
      🔗 자동 WebSocket 연결
      ⚡ 즉시 동기화 시작

      무엇이든 물어보세요!

      MESCIUS의 전문가 그룹에게 SpreadJS에 대한 막연한 고민과 궁금증을 들려주세요.
      여러분들의 고민을 함께 공감하고 도움을 드리겠습니다. 

      온라인 제품 상담 개발자 포럼(기술 지원)

      For React 개발자

      SpreadJS 첫 사용자를 위한 추천 튜토리얼

      더 많은 글 보기

      도입 문의

      SpreadJS 도입 시 더욱 자세한 제품 및 구매 상담이 필요하신 경우 편하신 방법으로 연락 바랍니다.

      구매 절차

      구매 절차의 각 단계에 대한 자세한 내용을 보시려면 각 버튼을 클릭해주세요.

      • 1. 가격 확인 및 견적 요청

        아래의 방법 중 편하신 방법으로 견적서를 요청하실 수 있습니다.


      • 2. 발주 요청

        하기 세가지 항목을 Email(sales-kor@mescius.com)로 발송해 주세요.


        1. 서명 완료된 견적서 (담당자 사인 또는 회사 직인)
        2. 사업자 등록증 사본(회사일 경우)
        3. End-User 정보

                  1) 회사명(한글) : 

                  2) 회사명(영문) : 

                  3) 우편번호 : 

                  4) 주소(한글) : 

                  5) 주소(영문) : 

                  6) 담당자(한글/영문) : 

                  7) 전화번호 : 

                  8) E-mail : 


        발주 요청을 주시면 이메일을 통해 인보이스를 발송해드립니다.

      • 3. 결제

        은행 입금


        받으신 인보이스에 표기되어 있는 계좌 번호로 입금해주세요.



        카드 결제


        카드 결제는 유선상으로 진행됩니다. 결제에 필요한 결제 전용 전화번호와 납부번호는 메일로 따로 전달 드리며, 전달 받으신 결제 전용 전화번호로 직접 전화를 하시어, 카드 결제를 진행하실 수 있습니다.

      • 4. 라이선스 발급 & 세금 계산서 발행

        결제 확인 후 라이선스 발급 안내 메일을 발송해 드립니다.


        * SpreadJS 컨트롤을 서버에 배포하기 위해서는 배포 라이선스를 구매한 후 배포 키를 발급 받으셔야 합니다. 배포 키 발급 포털을 통해 배포 키를 신청해 주세요.


      Web 개발자를 위한 컨트롤

      • Wijmo

        JavaScript 기반 Chart, Grid, Input 등 UI 컨트롤
        • 그리드, 차트, 리포트, 입력 폼, OLAP 등 80+ UI 컨트롤
        • Angular, React, VueJS 완벽 지원
        • 필터, 그룹화, 정렬 기능
        더 알아보기

      • ActiveReportsJS

        JavaScript 기반 비즈니스 리포팅 컴포넌트
        • Angular, React, Vue 지원
        • 크로스플랫폼을 지원하는 디자이너 프로그램 제공
        • JavaScript 리포트 뷰어 제공
        더 알아보기

      • Forguncy

        코딩 없이 Excel로 만드는 비즈니스 웹 개발 솔루션
        • Excel 기능으로 쉽고 빠르게 웹 구현
        • HTML & CSS 없이 시작하는 웹 개발
        • 데이터 취합 및 통합  솔루션
        더 알아보기

      • DsExcel

        고성능 Java&Kotlin / .NET 기반 Excel 스프레드시트 API 라이브러리
        • 스프레드시트 생성, 로드, 편집, 저장
        • 스프레드시트 구문 분석, 변환, 공유
        • 수식 계산 및 셀 서식 지정
        DsExcel Java 더 알아보기
        DsExcel .NET 더 알아보기