Skip to content

Commit 57fff2a

Browse files
vaebekagol
vaebe
and
kagol
authored
feat(collaborative-editor-backend): 增加 npm 包集成 (#378)
* feat(collaborative-editor-backend): 导出函数使用户可以自定义引入 * feat(collaborative-editor-backend): npm 包发布 * feat(collaborative-editor-backend): 包名修改 * feat(collaborative-editor-backend): dockerfile 优化减少镜像体积 * feat(collaborative-editor-backend): docker-compose.yml 配置修改 * feat(collaborative-editor-backend): 文档更新 * feat(collaborative-editor-backend): mongo 服务密码由 admin!123 修改为 admin * chore: update package name to @opentiny/tiny-editor-collaborative-editing-backend --------- Co-authored-by: Kagol <kagol@sina.com>
1 parent 3256414 commit 57fff2a

File tree

8 files changed

+145
-89
lines changed

8 files changed

+145
-89
lines changed

‎packages/collaborative-editing-backend/Dockerfile‎

Lines changed: 20 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,25 @@
1-
FROM node:22-alpine
1+
2+
# -------- 构建阶段：只安装依赖并编译项目，避免开发依赖进入最终镜像 --------
3+
FROM node:22-alpine AS builder
24

35
WORKDIR /app
46
COPY package.json ./
5-
RUN npm install --no-package-lock && npm install pm2@latest -g
7+
# 只拷贝依赖相关文件，利用缓存加速构建
8+
RUN npm install -g pnpm && pnpm install --no-frozen-lockfile
9+
610
COPY . .
11+
# 编译项目，生成 dist 目录
12+
RUN pnpm run build
13+
14+
# -------- 生产阶段：只保留编译产物和生产依赖，极大减少镜像体积 --------
15+
FROM node:22-alpine
16+
17+
WORKDIR /app
18+
COPY --from=builder /app/dist ./dist
19+
COPY --from=builder /app/ecosystem.config.cjs ./
20+
COPY package.json ./
21+
# 生产环境只需要 package.json 用于安装生产依赖
22+
RUN npm install -g pm2 pnpm && pnpm install --prod --no-frozen-lockfile
723

8-
RUN npm run build
9-
CMD [ "pm2-runtime", "start", "ecosystem.config.cjs" ]
24+
# 使用 pm2-runtime 启动服务，保证进程管理和自动重启
25+
CMD ["pm2-runtime", "start", "ecosystem.config.cjs"]

‎packages/collaborative-editing-backend/README.md‎

Lines changed: 40 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -2,19 +2,11 @@
22

33
基于 Yjs 和 WebSocket 的实时协同编辑后端服务，支持多用户实时协作编辑，使用 MongoDB 进行文档持久化。
44

5-
## 快速开始
5+
提供以下两种集成方式
66

7-
### 环境变量配置
7+
## Docker Compose 一键启动(推荐)
88

9-
### Docker 容器化部署(推荐)
10-
11-
1. 拉取 Docker 镜像，使用 Docker Compose 一键启动：
12-
13-
```bash
14-
docker pull yinlin124/collaborative-editor-backend:latest
15-
```
16-
17-
2. 创建 `docker-compose.yml` 文件，内容如下：
9+
创建 `docker-compose.yml` 文件，内容如下：
1810

1911
```yaml
2012
services:
@@ -26,7 +18,7 @@ services:
2618
- '27017:27017'
2719
environment:
2820
MONGO_INITDB_ROOT_USERNAME: admin
29-
MONGO_INITDB_ROOT_PASSWORD: admin!123
21+
MONGO_INITDB_ROOT_PASSWORD: admin
3022
volumes:
3123
- mongodb_data:/data/db
3224

@@ -36,110 +28,81 @@ services:
3628
restart: always
3729
ports:
3830
- '${PORT:-1234}:${PORT:-1234}'
39-
env_file:
40-
- .env
31+
environment:
32+
HOST: ${HOST:-0.0.0.0} # 设置后端监听的网络接口
33+
PORT: ${PORT:-1234} # 默认 1234 端口，可以使用环境变量修改
34+
MONGODB_URL: ${MONGODB_URL:-mongodb://admin:admin@mongodb:27017/?authSource=admin}
35+
MONGODB_DB: ${MONGODB_DB:-tinyeditor} # 数据库名称
36+
MONGODB_COLLECTION: ${MONGODB_COLLECTION:-documents} # 集合名称
4137
depends_on:
4238
- mongodb
4339

4440
volumes:
4541
mongodb_data:
4642
```
4743
48-
3. 在项目根目录下新建 `.env` 文件：
44+
执行 `docker compose up` 启动容器，连接地址为 `wss://你的域名or服务器ip:1234`
4945

50-
```env
51-
HOST=0.0.0.0
52-
PORT=1234
53-
MONGODB_URL=mongodb://admin:admin!123@mongodb:27017/?authSource=admin
54-
MONGODB_DB=tinyeditor
55-
MONGODB_COLLECTION=documents
56-
GC=true
57-
```
46+
> 如果你没有开启 https 则需要将 wss 替换 ws
5847

59-
可参照下方表格进行配置 `.env` 文件
60-
| 变量名 | 必需 | 默认值 | 说明 |
61-
| -------------------- | ---- | ------ | -------------------------------------------------------------- |
62-
| `HOST` | ✅ | - | 服务器监听地址 |
63-
| `PORT` | ✅ | - | WebSocket 服务端口 |
64-
| `MONGODB_URL` | ✅ | - | MongoDB 连接字符串 |
65-
| `MONGODB_DB` | ✅ | - | MongoDB 数据库名称 |
66-
| `MONGODB_COLLECTION` | ✅ | - | MongoDB 集合名称 |
67-
| `GC` | ❌ | `true` | 是否启用 Yjs 垃圾回收 |
48+
## 通过 NPM 包集成
6849

69-
4. 在项目根目录下运行 `docker-compose` 启动容器：
50+
参考 [tiny-editor-collaborative-editor-backend-demo](https://github.com/vaebe/tiny-editor-collaborative-editor-backend-demo) 进行集成
7051

71-
```bash
72-
docker compose up
73-
```
52+
## 开发指南
53+
54+
### mongodb
7455

75-
### 本地部署
56+
项目依赖 Mongo 数据库来持久化数据。如果您已有可用的 Mongo 数据库，可以跳过此节。
7657

77-
启动 mongodb
58+
通过 docker 启动 Mongo 数据库
7859

7960
```bash
8061
docker run -d \
8162
--name mongodb \
8263
-p 27017:27017 \
8364
-e MONGO_INITDB_ROOT_USERNAME=admin \
84-
-e MONGO_INITDB_ROOT_PASSWORD="admin!123" \
65+
-e MONGO_INITDB_ROOT_PASSWORD=admin \
8566
-v mongodb_data:/data/db \
8667
mongo:latest
8768
```
8869

89-
修改 `.env MongoDB URL`
70+
**修改 `.env`文件 `MONGODB_URL` 为正确的连接地址**，通过上述 docker 命令启动的服务修改为如下内容即可
9071

9172
```bash
92-
MONGODB_URL=mongodb://admin:admin!123@localhost:27017/?authSource=admin
73+
MONGODB_URL=mongodb://admin:admin@localhost:27017/?authSource=admin
9374
```
9475

95-
启动本地服务器
76+
### scripts 命令解析
9677

97-
```bash
98-
npm install -g pm2
99-
npm install
100-
npm start
101-
```
78+
- 本地开发执行 `pnpm dev` 启动项目
79+
- 执行 `pnpm build` 打包项目
80+
- 执行 `pnpm pub` 发布 npm 包（需要先确认版本号）
81+
- 执行 `docker build -t collaborative-editing-backend:latest .` 打包 docker 镜像
10282

103-
## 前端配置
104-
105-
(非完整前端配置主要参考 provider 部分)
106-
107-
```javascript
108-
import TinyEditor from '@opentiny/fluent-editor'
109-
110-
const editor = new TinyEditor('#editor', {
111-
theme: 'snow',
112-
modules: {
113-
collaboration: {
114-
provider: {
115-
type: 'websocket',
116-
options: {
117-
serverUrl: 'ws://localhost:1234',
118-
roomName: 'my-document',
119-
},
120-
},
121-
},
122-
},
123-
})
124-
```
83+
### 构建 docker 镜像
12584

126-
## 开发指南
85+
构建 `linux/amd64,linux/arm64` 并推送 docker hub
86+
87+
```bash
88+
docker buildx build --platform linux/amd64,linux/arm64 -t 你的dockerhub名字/collaborative-editor-backend:latest . --push
89+
```
12790

12891
### MongoDB 持久化拓展
12992

130-
当前项目在 [`src/persistence/mongo.ts`](./src/persistence/mongo.ts) 类实现 MongoDB 持久化，基于 [`y-mongodb-provider`](https://github.com/MaxNoetzold/y-mongodb-provider) 库。
93+
项目在 [`src/persistence/mongo.ts`](./src/persistence/mongo.ts) 类基于 [`y-mongodb-provider`](https://github.com/MaxNoetzold/y-mongodb-provider) 库 实现 MongoDB 持久化。
13194

132-
需要拓展当前持久化能力时，可参考 API 文档：[y-mongodb-provider API](https://github.com/MaxNoetzold/y-mongodb-provider?tab=readme-ov-file#api)
95+
可参考 API 文档：[y-mongodb-provider API](https://github.com/MaxNoetzold/y-mongodb-provider?tab=readme-ov-file#api) 进行拓展。
13396

13497
### 自定义持久化接口
13598

13699
要支持其他数据库（如 PostgreSQL、Redis 等），需要实现 `Persistence` 接口
137100

138-
| 方法名 | 参数 | 返回值 | 说明 |
139-
| ------------ | --------------------------------- | --------------- | -------------------------------------------- |
140-
| `bindState` | `docName: string`<br>`doc: Y.Doc` | `Promise<void>` | 文档初始化时调用，加载历史状态并设置实时同步 |
141-
| `writeState` | `docName: string`<br>`doc: Y.Doc` | `Promise<void>` | 手动保存文档状态（可选使用） |
142-
| `close` | - | `Promise<void>` | 服务器关闭时调用，清理资源 |
101+
| 方法名 | 参数 | 返回值 | 说明 |
102+
| ------------ | ------------------------------- | --------------- | -------------------------------------------- |
103+
| `bindState` | `docName: string`, `doc: Y.Doc` | `Promise<void>` | 文档初始化时调用，加载历史状态并设置实时同步 |
104+
| `writeState` | `docName: string`, `doc: Y.Doc` | `Promise<void>` | 手动保存文档状态（可选使用） |
105+
| `close` | - | `Promise<void>` | 服务器关闭时调用，清理资源 |
143106

144107
### 更多社区持久化支持
145108

‎packages/collaborative-editing-backend/docker-compose.yml‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ services:
77
- '27017:27017'
88
environment:
99
MONGO_INITDB_ROOT_USERNAME: admin
10-
MONGO_INITDB_ROOT_PASSWORD: admin!123
10+
MONGO_INITDB_ROOT_PASSWORD: admin
1111
volumes:
1212
- mongodb_data:/data/db
1313

@@ -20,7 +20,7 @@ services:
2020
environment:
2121
HOST: ${HOST:-0.0.0.0} # 设置后端监听的网络接口
2222
PORT: ${PORT:-1234} # 默认 1234 端口，可以使用环境变量修改
23-
MONGODB_URL: ${MONGODB_URL:-mongodb://admin:admin!123@mongodb:27017/?authSource=admin} # 如果你使用自己的 mongodb 服务需要修改此项
23+
MONGODB_URL: ${MONGODB_URL:-mongodb://admin:admin@mongodb:27017/?authSource=admin}
2424
MONGODB_DB: ${MONGODB_DB:-tinyeditor} # 数据库名称
2525
MONGODB_COLLECTION: ${MONGODB_COLLECTION:-documents} # 集合名称
2626
depends_on:

‎packages/collaborative-editing-backend/package.json‎

Lines changed: 40 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,47 @@
11
{
2-
"name": "collaborative-editor-backend",
2+
"name": "@opentiny/tiny-editor-collaborative-editing-backend",
33
"type": "module",
4-
"version": "0.0.1",
4+
"version": "0.0.2",
5+
"description": "A lightweight collaborative editing backend (Yjs + WebSocket + MongoDB provider) for the OpenTiny fluent editor.",
6+
"author": "OpenTiny Team",
7+
"license": "MIT",
8+
"homepage": "https://opentiny.github.io/tiny-editor/docs/demo/collaborative-editing",
9+
"repository": {
10+
"type": "git",
11+
"url": "git@github.com:opentiny/tiny-editor.git"
12+
},
13+
"bugs": {
14+
"url": "https://github.com/opentiny/tiny-editor/issues"
15+
},
16+
"keywords": [
17+
"opentiny",
18+
"collaborative",
19+
"yjs",
20+
"websocket",
21+
"mongodb"
22+
],
23+
"exports": {
24+
".": {
25+
"types": "./dist/types/index.d.ts",
26+
"import": "./dist/index.js",
27+
"default": "./dist/index.js"
28+
}
29+
},
30+
"files": [
31+
"README.md",
32+
"dist",
33+
"package.json"
34+
],
35+
"publishConfig": {
36+
"access": "public"
37+
},
538
"scripts": {
639
"dev": "vite-node src/server.ts",
740
"start": "npm run build && pm2 start ecosystem.config.cjs",
841
"stop": "pm2 stop ecosystem.config.cjs",
9-
"build": "vite build"
42+
"build": "vite build",
43+
"pub": "npm publish --access public",
44+
"prepublishOnly": "npm run build"
1045
},
1146
"dependencies": {
1247
"@y/protocols": "^1.0.6-1",
@@ -23,6 +58,7 @@
2358
"glob": "^11.0.3",
2459
"typescript": "^5.7.9",
2560
"vite": "^7.1.3",
26-
"vite-node": "^3.2.4"
61+
"vite-node": "^3.2.4",
62+
"vite-plugin-dts": "^4.3.0"
2763
}
2864
}

‎packages/collaborative-editing-backend/src/index.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
export * from './env.ts'
2+
export * from './persistence/index.ts'
3+
export * from './persistence/mongo.ts'
4+
export * from './utils.ts'

‎packages/collaborative-editing-backend/vite.config.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
11
import path from 'node:path'
22
import { globSync } from 'glob'
33
import { defineConfig } from 'vite'
4+
import dts from 'vite-plugin-dts'
45

56
export default defineConfig({
7+
plugins: [dts({ outDir: 'dist/types', root: '.' })],
68
build: {
79
ssr: true,
810
outDir: 'dist',

‎packages/docs/fluent-editor/docs/demo/collaborative-editing.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,7 @@ services:
8181
- '27017:27017'
8282
environment:
8383
MONGO_INITDB_ROOT_USERNAME: admin # 设置 MongoDB 初始用户名
84-
MONGO_INITDB_ROOT_PASSWORD: admin!123 # 设置 MongoDB 初始密码
84+
MONGO_INITDB_ROOT_PASSWORD: admin # 设置 MongoDB 初始密码
8585
volumes:
8686
- mongodb_data:/data/db
8787

@@ -94,7 +94,7 @@ websocket-server:
9494
environment:
9595
HOST: ${HOST:-0.0.0.0} # 设置后端监听的网络接口
9696
PORT: ${PORT:-1234} # 默认 1234 端口，可以使用环境变量修改
97-
MONGODB_URL: ${MONGODB_URL:-mongodb://admin:admin!123@mongodb:27017/?authSource=admin} # 如果你使用自己的 mongodb 服务需要修改此项
97+
MONGODB_URL: ${MONGODB_URL:-mongodb://admin:admin@mongodb:27017/?authSource=admin} # 如果你使用自己的 mongodb 服务需要修改此项
9898
MONGODB_DB: ${MONGODB_DB:-tinyeditor} # 数据库名称
9999
MONGODB_COLLECTION: ${MONGODB_COLLECTION:-documents} # 集合名称
100100

‎pnpm-lock.yaml‎

Lines changed: 35 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)