@netless/forge-room NPM

forge-room

forge-room 代表白板实时房间, 实时房间为房间里的用户提供包括白板在内的各种实时协作应用。

构建房间实例

构建房间实例之前, 需要调用服务端 API 创建房间获取房间 token, 参考创建房间. forge-room 只复用了互动白板房间的房间号以及 token, 其他房间管理类的服务端 api 对 forge-room 无效. 对于 token 只要求有效, 不要求可写权限.

import { Room } from "@netless/forge-room";
import { RTMProvider_2_1 } from "@netless/forge-rtm";
import { WhiteboardApplication } from "@netless/forge-whiteboard";

// 通过 rtm 提供信令通道
const rtmProvider = new RTMProvider_2_1(rtmClient);

const room = new Room(
    "f6eeec407a4511ef993c1915959e3b73", /* room id */
    rtmProvider
);

// 进入房间之前, 需要注册房间里将会用到的实时应用
wbRoom.applicationManager.registerApplication(WhiteboardApplication);

await wbRoom.joinRoom({
    userId: "userId",
    nickName: "nickName",
    roomToken: "roomToken", // 白板房间 token
    sdkConfig: {
        region: "cn-hz",
        appIdentifier: "appIdentifier"
    }
});

管理房间应用

加入房间成功后, 可以通过 Room.applicationManager 管理房间应用.

// 加载上面注册的白板应用
const whiteboard = await wbRoom.applicationManager.launchApplication(WhiteboardApplication, {
    width: 1920,
    height: 1080,
    defaultToolbarStyle: {
        tool: "curve"
    }
}, "MainWhiteboard");

// 应用加载之后可以进行样式配置, 并挂载到 dom 上
whiteboard.view.style.height = `100vh`;
whiteboard.view.style.width = `100vw`;
whiteboard.view.style.background = "#9E9E9E";

document.body.appendChild(whiteboard.view);

appId

房间内每个应用都有唯一的 appId, 可以通过 Room.applicationManager.launchApplication 的第三个参数可以指定 appId 或者留空使用随机的 uuid. appId 划分了一块房间数据, 房间里所有用户都可以无冲突的访问和修改这块数据.

何时应该手动指定 appId ?

以白板应用举例, 如果房间里的每个用户都要在同一个白板应用上写画, 那么应该指定一个 appId, 这样新加入的用户调用 Room.applicationManager.launchApplication 时会读取已经存在的数据, 而不是用随机 uuid 新建一个白板应用.

何时应该用默认的 uuid ?

还是以白板应用举例, 如果要响应用户操作新建一个白板应用, 那么应该用默认的 uuid 创建一个新的应用实例.

view

对于每个应用实例, 都存在一个 view 属性对应到平台相关的 view 对象. 例如 JavaScript 中, 对应一个 DOM 对象. forge-room 只负责管理应用的创建、数据同步以及销毁. 不包含任何 UI, 所以你需要对 view 进行样式配置并挂载到你的 app 中的某个容器元素上.

6 months ago

7 months ago

7 months ago

7 months ago

8 months ago