Skip to content

Commit c019f94

Browse files
hqer927hqer927
committed
docs: update appliance-plugin.md
1 parent a112ea5 commit c019f94

File tree

2 files changed

+155
-14
lines changed

2 files changed

+155
-14
lines changed

Diff for: ‎docs/en/appliance-plugin.md

+74-8
Original file line numberDiff line numberDiff line change
@@ -38,17 +38,80 @@ import { ApplianceSinglePlugin } from '@netless/appliance-plugin';
3838
> - **The total package is about 300kB, and the two wokerjs are 600kB each** If you need to consider the size of the package you are building, select Configure cdn.
3939
4040
### Access mode reference
41-
42-
#### Multi-window mode (Interconnecting with window-manager)
41+
42+
#### fastboard(interconnection with fastboard)
43+
```js
44+
// The method of importing worker.js is optional. If cdn is used, it does not need to be imported from dist. If dist is imported, it needs to be configured into options.cdn in the form of resource module and bolb inline. Such as '?raw', this requires packer support,vite default support '?raw',webpack needs to configure raw-loader or asset/source.
45+
import fullWorkerString from '@netless/appliance-plugin/dist/fullWorker.js?raw';
46+
import subWorkerString from '@netless/appliance-plugin/dist/subWorker.js?raw';
47+
const fullWorkerBlob = new Blob([fullWorkerString], {type: 'text/javascript'});
48+
const fullWorkerUrl = URL.createObjectURL(fullWorkerBlob);
49+
const subWorkerBlob = new Blob([subWorkerString], {type: 'text/javascript'});
50+
const subWorkerUrl = URL.createObjectURL(subWorkerBlob);
51+
52+
// interconnection with fastboard-react
53+
// Full package mode reference
54+
// import { useFastboard, Fastboard } from "@netless/fastboard-react/full";
55+
// Subcontract reference
56+
import { useFastboard, Fastboard } from "@netless/fastboard-react";
57+
58+
const app = useFastboard(() => ({
59+
sdkConfig: {
60+
...
61+
},
62+
joinRoom: {
63+
...
64+
},
65+
managerConfig: {
66+
cursor: true,
67+
enableAppliancePlugin: true,
68+
...
69+
},
70+
enableAppliancePlugin: {
71+
cdn: {
72+
fullWorkerUrl,
73+
subWorkerUrl,
74+
}
75+
...
76+
}
77+
}));
78+
79+
// interconnection with fastboard
80+
// Full package mode reference
81+
// import { createFastboard, createUI } from "@netless/fastboard/full";
82+
// Subcontract reference
83+
import { createFastboard, createUI } from "@netless/fastboard";
84+
85+
const fastboard = await createFastboard({
86+
sdkConfig: {
87+
...
88+
},
89+
joinRoom: {
90+
...
91+
},
92+
managerConfig: {
93+
cursor: true,
94+
supportAppliancePlugin: true,
95+
...
96+
},
97+
enableAppliancePlugin: {
98+
cdn: {
99+
fullWorkerUrl,
100+
subWorkerUrl,
101+
}
102+
...
103+
}
104+
});
105+
```
106+
107+
#### Multi-window (Interconnecting with window-manager)
43108
```js
44109
import '@netless/window-manager/dist/style.css';
45110
import '@netless/appliance-plugin/dist/style.css';
46111
import { WhiteWebSdk } from "white-web-sdk";
47112
import { WindowManager } from "@netless/window-manager";
48-
// All bundled
49113
import { ApplianceMultiPlugin } from '@netless/appliance-plugin';
50-
// cdn
51-
// The following steps are optional. If you use cdn, you do not need to import from dist. If you import from dist, you need to import resources and configure them to options.cdn in bolb inline form. Such as? raw, this requires packaging support,vite default support? raw,webpack needs to be configured.
114+
// The method of importing worker.js is optional. If cdn is used, it does not need to be imported from dist. If dist is imported, it needs to be configured into options.cdn in the form of resource module and bolb inline. Such as '?raw', this requires packer support,vite default support '?raw',webpack needs to configure raw-loader or asset/source.
52115
import fullWorkerString from '@netless/appliance-plugin/dist/fullWorker.js?raw';
53116
import subWorkerString from '@netless/appliance-plugin/dist/subWorker.js?raw';
54117
const fullWorkerBlob = new Blob([fullWorkerString], {type: 'text/javascript'});
@@ -76,13 +139,14 @@ await ApplianceMultiPlugin.getInstance(manager,
76139
}
77140
);
78141
}
79-
```
142+
```
143+
> **Note** the css file `import '@netless/appliance-plugin/dist/style.css'` needs to be imported into the project;
144+
80145
#### Single whiteboard (interconnection with white-web-sdk)
81146
```js
82147
import { WhiteWebSdk } from "white-web-sdk";
83-
// All bundled
84148
import { ApplianceSinglePlugin, ApplianceSigleWrapper } from '@netless/appliance-plugin';
85-
// The following steps are optional. If you use cdn, you do not need to import from dist. If you import from dist, you need to import resources and configure them to options.cdn in bolb inline form. Such as? raw, this requires packaging support,vite default support? raw,webpack needs to be configured.
149+
// The method of importing worker.js is optional. If cdn is used, it does not need to be imported from dist. If dist is imported, it needs to be configured into options.cdn in the form of resource module and bolb inline. Such as '?raw', this requires packer support,vite default support '?raw',webpack needs to configure raw-loader or asset/source.
86150
import fullWorkerString from '@netless/appliance-plugin/dist/fullWorker.js?raw';
87151
import subWorkerString from '@netless/appliance-plugin/dist/subWorker.js?raw';
88152
const fullWorkerBlob = new Blob([fullWorkerString], {type: 'text/javascript'});
@@ -107,6 +171,8 @@ await ApplianceSinglePlugin.getInstance(room,
107171
}
108172
);
109173
```
174+
> **Note** the css file `import '@netless/appliance-plugin/dist/style.css'` needs to be imported into the project;
175+
110176
#### About ’?raw‘ webpack configuration
111177
```js
112178
module: {

Diff for: ‎docs/zh/appliance-plugin.md

+81-6
Original file line numberDiff line numberDiff line change
@@ -40,15 +40,82 @@ import { ApplianceSinglePlugin } from '@netless/appliance-plugin';
4040
4141
### 接入方式参考
4242

43-
#### 多窗口模式(对接window-manager)
43+
#### fastboard(直接对接fastboard)
4444
```js
45+
46+
// 引入worker.js方式可选, 如果走cdn,可以不用从dist中引入,如果从dist中引入,需要以资源模块方式并通过bolb内联形式配置到options.cdn中.如`?raw`,这个需要打包器的支持,vite默认支持`?raw`,webpack需要配置 raw-loader or asset/source.
47+
import fullWorkerString from '@netless/appliance-plugin/dist/fullWorker.js?raw';
48+
import subWorkerString from '@netless/appliance-plugin/dist/subWorker.js?raw';
49+
const fullWorkerBlob = new Blob([fullWorkerString], {type: 'text/javascript'});
50+
const fullWorkerUrl = URL.createObjectURL(fullWorkerBlob);
51+
const subWorkerBlob = new Blob([subWorkerString], {type: 'text/javascript'});
52+
const subWorkerUrl = URL.createObjectURL(subWorkerBlob);
53+
54+
// 对接 fastboard-react
55+
// 全打包方式引用
56+
// import { useFastboard, Fastboard } from "@netless/fastboard-react/full";
57+
// 分包引用
58+
import { useFastboard, Fastboard } from "@netless/fastboard-react";
59+
60+
const app = useFastboard(() => ({
61+
sdkConfig: {
62+
...
63+
},
64+
joinRoom: {
65+
...
66+
},
67+
managerConfig: {
68+
cursor: true,
69+
enableAppliancePlugin: true,
70+
...
71+
},
72+
enableAppliancePlugin: {
73+
cdn: {
74+
fullWorkerUrl,
75+
subWorkerUrl,
76+
}
77+
...
78+
}
79+
}));
80+
81+
// 对接 fastboard
82+
// 全打包方式引用
83+
// import { createFastboard, createUI } from "@netless/fastboard/full";
84+
// 分包引用
85+
import { createFastboard, createUI } from "@netless/fastboard";
86+
87+
const fastboard = await createFastboard({
88+
sdkConfig: {
89+
...
90+
},
91+
joinRoom: {
92+
...
93+
},
94+
managerConfig: {
95+
cursor: true,
96+
supportAppliancePlugin: true,
97+
...
98+
},
99+
enableAppliancePlugin: {
100+
cdn: {
101+
fullWorkerUrl,
102+
subWorkerUrl,
103+
}
104+
...
105+
}
106+
});
107+
```
108+
109+
#### 多窗口(直接对接window-manager)
110+
```js
111+
45112
import '@netless/window-manager/dist/style.css';
46113
import '@netless/appliance-plugin/dist/style.css';
114+
47115
import { WhiteWebSdk } from "white-web-sdk";
48116
import { WindowManager } from "@netless/window-manager";
49-
// 全打包
50117
import { ApplianceMultiPlugin } from '@netless/appliance-plugin';
51-
// 以下步骤可选, 如果走cdn,可以不用从dist中引入,如果从dist中引入,需要以资源引入并通过bolb内联形式配置到options.cdn中.如?raw,这个需要打包器的支持,vite默认支持?raw,webpack需要配置.
118+
// 引入worker.js方式可选, 如果走cdn,可以不用从dist中引入,如果从dist中引入,需要以资源模块方式并通过bolb内联形式配置到options.cdn中.如`?raw`,这个需要打包器的支持,vite默认支持`?raw`,webpack需要配置 raw-loader or asset/source.
52119
import fullWorkerString from '@netless/appliance-plugin/dist/fullWorker.js?raw';
53120
import subWorkerString from '@netless/appliance-plugin/dist/subWorker.js?raw';
54121
const fullWorkerBlob = new Blob([fullWorkerString], {type: 'text/javascript'});
@@ -72,17 +139,22 @@ if (manager) {
72139
fullWorkerUrl,
73140
subWorkerUrl,
74141
}
142+
...
75143
}
76144
}
77145
);
78146
}
79147
```
80-
#### 单白板(对接white-web-sdk)
148+
> **注意** 项目中需要引入css文件 `import '@netless/appliance-plugin/dist/style.css';`
149+
150+
#### 单白板(直接对接white-web-sdk)
81151
```js
152+
153+
import '@netless/appliance-plugin/dist/style.css';
154+
82155
import { WhiteWebSdk } from "white-web-sdk";
83-
// 全打包
84156
import { ApplianceSinglePlugin, ApplianceSigleWrapper } from '@netless/appliance-plugin';
85-
// 以下步骤可选, 如果走cdn,可以不用从dist中引入,如果从dist中引入,需要以资源引入并通过bolb内联形式配置到options.cdn中.如?raw,这个需要打包器的支持,vite默认支持?raw,webpack需要配置.
157+
// 引入worker.js方式可选, 如果走cdn,可以不用从dist中引入,如果从dist中引入,需要以资源模块方式并通过bolb内联形式配置到options.cdn中.如`?raw`,这个需要打包器的支持,vite默认支持`?raw`,webpack需要配置 raw-loader or asset/source.
86158
import fullWorkerString from '@netless/appliance-plugin/dist/fullWorker.js?raw';
87159
import subWorkerString from '@netless/appliance-plugin/dist/subWorker.js?raw';
88160
const fullWorkerBlob = new Blob([fullWorkerString], {type: 'text/javascript'});
@@ -103,10 +175,13 @@ await ApplianceSinglePlugin.getInstance(room,
103175
fullWorkerUrl,
104176
subWorkerUrl,
105177
}
178+
...
106179
}
107180
}
108181
);
109182
```
183+
> **注意** 项目中需要引入css文件 `import '@netless/appliance-plugin/dist/style.css';`
184+
110185
#### 关于?raw的webpack配置
111186
```js
112187
module: {

0 commit comments

Comments
 (0)