Key Features of SpreadJS Excel Simultaneous Editing
You can now develop Excel simultaneous editing features using only JavaScript.
The SpreadJS Collaboration Server provides all the features necessary for enterprise-grade real-time Excel collaboration development by default.
It provides collaboration modules, such as server and client socket management and synchronization logic, that are ready to run in a Node.js environment, ensuring perfect Excel synchronization, conflict control, and collaboration.
Real-time Excel synchronization
The SpreadJS Operational Transformation (OT) engine intelligently and automatically merges/edits simultaneous edits by multiple users without conflicts.
Precise user tracking
It provides real-time visualization features for each user's cursor position, selection area, and editing status.
Granular user permission control
It provides granular control over editing permissions by user and cell, and supports View/Edit mode and sheet-based access control.
Database (DB) Integration
You can securely store user work through MemoryDB, Postgres, SQLite3, and custom database adapters.
Automatic reconnection logic
Flexible collaboration logic custom
It supports middleware and Hook extension models, and developers can control Excel data flow to suit business needs through a server-side Operational Transformation (OT) engine.
List of Services
Experience SpreadJS simultaneous editing right now
Try out the real-time simultaneous editing feature firsthand through the free trial and find out what you're curious about.
SpreadJS Real-time Simultaneous Editing Feature Online Demo & Video
Features available in the demo
Everything about SpreadJS Real-time Simultaneous Editing
Experience the real-time simultaneous editing feature firsthand through videos and online demos!
- Real-time cell synchronization
- User-specific color cursor tracking feature
- OT-based automated crash resolution
- Automatic recovery in case of network disconnection
- Real-time display of task history
- Edit control by user permission
▲ 동영상 썸네일을 눌러 바로 영상을 확인해 보세요.
SpreadJS Collaboration Quick Start Guide
SpreadJS Real-time Simultaneous Editing Quick Start Guide
Learn how to completely separate and deploy a Node.js WebSocket server and a static web client independently.
Follow the Quick Start Guide to easily build SpreadJS concurrent editing functionality in under 10 minutes!
Collaboration Server Settings
Collaboration Client Settings
🖥️ Collaboration Server 설정
프로젝트 생성 및 의존성 설치
백엔드 서버 디렉토리를 생성하고 필요한 패키지를 설치합니다. ES Module 사용을 위해 package.json에 "type": "module"을 반드시 추가해야 합니다.
# 디렉토리 생성
mkdir collaboration-server
cd collaboration-server
npm init -y
{
"name": "collaboration-server",
"version": "1.0.0",
"type": "module",
"scripts": {
"start": "node ./server.js"
},
"dependencies": {}
}
# 패키지 설치
npm install @mescius/js-collaboration @mescius/js-collaboration-ot
npm install @mescius/spread-sheets-collaboration
npm install @mescius/js-collaboration-presence
server.js 작성
WebSocket 서버 로직입니다. SpreadJS 협업 타입을 등록하고 문서 서비스를 초기화합니다.
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';
import { DocumentServices, MemoryDb } from '@mescius/js-collaboration-ot';
import { presenceFeature } from '@mescius/js-collaboration-presence';
// SpreadJS collaboration 타입 등록
OT.TypesManager.register(type);
const httpServer = http.createServer();
const server = new Server({ httpServer });
const port = 8080;
//server.licenseKey = " ";
// 데이터베이스와 어댑터 초기화
const dbAdapter = new MemoryDb();
const docService = new DocumentServices({ db: dbAdapter });
// OT 문서 서비스를 구성합니다
server.useFeature(presenceFeature());
server.useFeature(OT.documentFeature(docService));
// 서버를 시작합니다
httpServer.listen(port, () => {
console.log(`Collaboration server listening on port ${port}`);
});
서버 실행 (Run)
설정이 완료되었습니다. 먼저 DB를 초기화한 후 서버를 구동합니다.
TERMINAL
npm run start
🧑🏻💻 Collaboration Client 설정
프로젝트 생성 및 패키지 설치
클라이언트 프로젝트를 생성하고 SpreadJS 및 빌드 도구(Webpack)를 설치하고 package.json을 업데이트합니다.
mkdir collaboration-client
cd collaboration-client
npm init -y
{
"name": "collaboration-client",
"version": "1.0.0",
"scripts": {
"build": "webpack"
},
"dependencies": {}
}
# SpreadJS 및 협업 클라이언트 패키지
npm install @mescius/spread-sheets @mescius/spread-sheets-collaboration-addon
npm install @mescius/js-collaboration-client @mescius/js-collaboration-ot-client
npm install @mescius/spread-sheets-collaboration-client
npm install @mescius/js-collaboration-presence-client
# Webpack 빌드 도구
npm install --save-dev webpack webpack-cli style-loader css-loader
클라이언트 코드 작성 (User-Based)
public/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, bindPresence } from '@mescius/spread-sheets-collaboration-client';
import { Presence } from "@mescius/js-collaboration-presence-client";
import "@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css";
// SpreadJS 동시 작업 데이터 타입 등록
OT.TypesManager.register(type);
// ===== 중요: 실제 동시 작업 서버 주소로 수정 =====
// 로컬 개발 예시:
const SERVER_URL = "ws://127.0.0.1:8080";
// 운영 환경 예시:
// const SERVER_URL = "wss://collab.yourdomain.com";
// const SERVER_URL = "wss://your-app.herokuapp.com";
window.onload = async function () {
// SpreadJS 워크북 초기화
const workbook = new GC.Spread.Sheets.Workbook('ss');
// 클라이언트 연결 생성 및 동시 작업 룸 참여
const conn = new Client(SERVER_URL).connect('room1');
const doc = new OT.SharedDoc(conn);
const presence = new Presence(conn);
// 연결 및 문서 동기화 오류 처리
doc.on('error', (err) => console.error('Collaboration error:', err));
// 서버에서 문서 상태 가져오기
await doc.fetch();
var seed = new Date().valueOf() + "";
const user = {
id: seed,
name: "user" + seed,
permission: {
mode: GC.Spread.Sheets.Collaboration.BrowsingMode.edit,
}
}
if (!doc.type) {
// 초기 콘텐츠로 새 공유 문서 생성
workbook.getActiveSheet().getCell(0, 0).value("default content");
await doc.create(workbook.collaboration.toSnapshot(), type.uri, {});
// 워크북을 공유 문서에 바인딩하여 실시간 동기화
bindPresence(workbook, presence, user);
bind(workbook, doc);
} else {
// 이미 공유 문서가 존재하는 경우 바인딩만 수행
bindPresence(workbook, presence, user);
bind(workbook, doc);
}
};
public/index.html을 생성합니다. 빌드된 번들 파일(client.bundle.js)을 로드합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SpreadJS 실시간 동시 작업</title>
<!-- Webpack으로 빌드된 스크립트 로드 -->
<script src="./client.bundle.js"></script>
</head>
<body>
<div id="ss" style="width:100vw; height:95vh; border:1px solid darkgray;"></div>
</body>
</html>
Webpack 구성 및 빌드
루트 디렉토리에 webpack.config.js를 생성하여 번들링 설정을 정의합니다.
const path = require("path");
module.exports = {
entry: "./public/client.js",
output: {
path: path.resolve(__dirname, "public"),
filename: "client.bundle.js",
},
mode: "development",
module: {
rules: [
{
test: /\.css$/i,
use: ["style-loader", "css-loader"],
},
],
},
};
클라이언트 실행 (Run)
Webpack으로 소스 코드를 번들링한 후, 정적 서버를 실행하여 브라우저에서 확인합니다.
TERMINAL
npm run build npx http-server ./public
SpreadJS 실시간 동시편집 기능 구축 완료!
이제 서버와 클라이언트가 완벽하게 분리된 협업 환경이 구축되었습니다.
여러 브라우저 창을 띄워 http://localhost:8080 (또는 설정한 포트)에 접속하면, 각 창마다 다른 색상의 커서가 나타나며 실시간으로 데이터가 동기화되는 것을 확인할 수 있습니다.
🖥️ 서버 설정 다시보기 →
🧑🏻💻 클라이언트 설정 다시보기 →
Next Step: Learn More
SpreadJS Simultaneous Editing Feature Extension Guide
Expand and develop Excel simultaneous editing features to meet the diverse requirements of corporate businesses.
Various enterprise business functions completed with SpreadJS
Check out SpreadJS's business Excel extension now.
SpreadJS provides Excel-based features tailored to various corporate business requirements, enabling the rapid and efficient development of even complex business systems.
Excel Editor
Provide end users with a complete web Excel editor based on HTML5 & JS.
-
Complete Excel compatibility A web editor perfectly compatible with existing Excel files
-
Familiar UI/UX Provides Excel menus and interface familiar to users
-
Powerful customization JS Excel library and API support for customizing Excel editors
AI Assistant
Maximize work efficiency with natural language-based formula generation and data analysis.
-
Multi-AI model support Integration with OpenAI, Gemini, Claude, and in-house custom AI is possible.
-
natural language commands Automatically generate Excel formulas, provide explanations, and build pivot tables using natural language
-
Excel AI function Provides a dedicated AI function library for data analysis
Pivot Table
Quickly summarize large amounts of Excel data and derive insights.
-
Excel-like experience Implement the same pivot UI and usability as Excel on the web
-
JS Control Set Provides customization features for Pivot UI customization
-
View Manager Support for user-specific pivot analysis screen save and load functions
Gantt Sheet
Integrate project schedule management and resource scheduling functions into an Excel sheet.
-
Project management functions Full support for essential features such as time scale, taskbar, and calendar.
-
Data Integration Easy data binding using DataManager
-
Flexible compatibility Support for Excel and JSON-based import/export
Report Sheet
Convert complex business data into dynamic Excel reports.
-
Dynamic Reporting JSON-based data integration and automatic report generation
-
Professional styling Maintain consistent report layout and apply sophisticated formatting
-
Advanced analysis features Supports cross-sheet referencing and data aggregation
Data Chart
Visualize Excel data to create an intuitive dashboard.
-
Dashboard Designer Provides a dedicated designer that enables the creation of Excel dashboards without coding.
-
Various charts Support for various Excel chart types and real-time data reflection
-
Easy binding Fast and easy JSON data connection via DataManager
Ask anything!
Please share your vague concerns and questions about SpreadJS with the expert group at MESCIUS. We will empathize with your concerns and provide assistance.
Experience SpreadJS simultaneous editing right now.
Check out a JavaScript spreadsheet framework that allows multiple users to collaborate in real-time, just like Google Sheets and MS365 Excel.
