Web SDK

サンプル

機能別に Collaboration SDK のサンプルを実行し、ガイドとサーバー・Web の入口を確認します。

すべてのサンプルは univer-collaboration-examples にあります。同じ最小構成 web/main.ts + server/main.ts で独立して動作します。まずクイックスタートを完了し、統合する内容に応じて次の例を選びます。

サンプル主な概念コマンド
クイックスタート基本の共同編集経路pnpm example:quick-start
データベースアダプターデータベースアダプターpnpm example:database-adapter
権限本人確認と認可pnpm example:permissions
履歴派生バージョン履歴pnpm example:history
コメント独立したコメントpnpm example:comments
Worktree隔離編集とマージpnpm example:worktree
ファイル変換Office ファイル変換pnpm example:exchange
複数ノードへのデプロイ水平スケーリングpnpm example:multi-node

クイックスタート

Collaboration Client、Transport、Endpoint、Service、Memory Adapter を組み合わせます。2 つのブラウザーで同じ Sheet の HTTP 読み込み、WebSocket Session、Room、ACK、配信を確認します。

Bash
pnpm example:quick-start

http://127.0.0.1:3010/?unit=quick-start-sheet を開きます。

データベースアダプター

組み込みの SQLite Adapter の使い方と、カスタム Database Adapter の実装を示します。

Bash
pnpm example:database-adapter

http://127.0.0.1:3010/?unit=persistent-sheet を開きます。

権限

Cookie から信頼できる ID を確立し、Unit の HTTP 読み取り、リアルタイム JOIN、変更送信を個別に保護します。ページでは学習用の Alice · Editor と読み取り専用 Bob · Viewer を切り替えます。

Bash
pnpm example:permissions

http://127.0.0.1:3010 を開きます。

履歴

基本モジュールの外に History Service、独立 Adapter、History Endpoint、ブラウザーの履歴入口を追加します。Unit 作成と変更コミットの Events で再構築可能な派生索引を作ります。

Bash
pnpm example:history

http://127.0.0.1:3010/?unit=history-sheet を開き、Sheet を編集してページ上部の History を選びます。

コメント

Thread Comment Service、独立 Adapter、Comment Endpoint、フロントエンドのコメント入口を追加します。Comment Endpoint は主 Endpoint の Session と Unit Room を再利用します。

Bash
pnpm example:comments

http://127.0.0.1:3010/?unit=comments-sheet を開き、セルを選んでコメント機能を使います。

Worktree

隔離した下書き、Ready、Reopen、Unit ごとの Merge の全ライフサイクルを示します。トランクと下書きを切り替え、マージ前の AI Agent の変更の隔離を確認します。

Bash
pnpm example:worktree

http://127.0.0.1:3010/?unit=worktree-sheet&worktree=demo-worktree を開きます。

ファイル変換

@univerjs-pro/exchange-node と Collaboration Service を組み合わせ、サーバーでの Sheet 入出力、タスクのポーリング、スナップショット取り込み、確定リビジョン出力を行います。

Bash
pnpm example:exchange

http://127.0.0.1:3010/?unit=exchange-sheet を開きます。File → Open (File) で取り込み、File → Save As で出力します。

複数ノードへのデプロイ

Nginx の背後で 2 つのコラボレーションノードを実行します。Redis がノード間でリアルタイム更新を中継し、Session Ticket を共有するため、どのノードでもどのリクエストも処理できます。Docker Compose が必要です。

Bash
pnpm example:multi-node

http://127.0.0.1:3010/ を開き、New Sheet をクリックしてファイルを作成します。完全な URL を別のタブにコピーし、同じ文書の共同編集を確認します。さらにファイルをいくつか作成し、各ノードへの割り当てを確認します。

サンプルは本番アプリケーションではありません

固定ユーザー、学習用認可、Memory Adapter、ローカルの秘密情報、メモリ内のファイル・タスク保存は教材用です。本人確認、認可、永続化、秘密情報、ファイル、デプロイ、製品操作はアプリケーションが担当します。

このガイドはいかがですか？

© 2026 DreamNum Co., Ltd.