开播端服务

创建白板

创建用于加载白板的 Dom 节点：

<div id="white-board-wrap"></div>

创建白板实例与开播端服务（以下统称服务）：

import {
  WhiteBoard,
  LiveStartService,
  FREE_LINE_APPLIANCE_NAME,
} from '@polyv/white-board-sdk';

// 创建白板实例
const whiteBoard = new WhiteBoard('#white-board-wrap', {
  background: '#f4f4f4',
  currentAppliance: FREE_LINE_APPLIANCE_NAME,
});

// 创建开播端服务
const liveStartService = new LiveStartService({
  whiteBoardContentBg: '#ffffff',
  contentPropWhenWhiteBoard: 16 / 9,
  totalPageWhenWhiteBoard: 50,
  sendSocketData: (data) => {
    // TODO 将 data 发送到聊天室
  },
});

// 将开播端服务安装到白板中
whiteBoard.plugin.installPlugin(liveStartService);

LiveStartServiceConfig 开播端服务类实例化参数 (opens new window)。

WhiteBoardConfig 白板核心类实例化参数 (opens new window)。

打开一份文档

操作者打开文档、切换文档时，调用服务的 openDocument 方法进行切换，方法文档 (opens new window)。

liveStartService.openDocument({
  // 文档的标识 id，从文档列表中读取
  autoId: '[AUTOID]',
  // 文档类型
  docType: 'new',
  // ...other params
});

删除、关闭文档

当操作者从文档列表中删除文档或点击关闭按钮关闭文档时，调用 openDocument 方法来切换到其他的文档，开播端服务不提供对应的逻辑。

切换回白板

操作者从文档切换回白板时，调用服务的 openWhiteBoard 方法进行切换，方法文档 (opens new window)。

liveStartService.openWhiteBoard({
  // 切换后的当前页
  currentPage: 3,
});

插入 Socket

当聊天室收到了 socket 消息后，调用服务的 joinSocketData 方法插入到服务中，方法文档 (opens new window)，joinSocketData 方法内部已经做了 EVENT 的过滤处理，调用时无需另外做是否为 Slice 事件的判断。

// 连接聊天室
const socket = connectSocket():

socket.on('message', (data: string) => {
  liveStartService.joinSocketData(data);
});

PS：上述代码示例是先创建开播端服务，后监听 socket，由于发送 LOGIN 后会立刻收到一条 onSliceID 事件，如果在 LOGIN 之后才创建开播端服务的情况下，可能会出现 onSliceID 消息的丢失，因此项目内需要缓存对应的 socket 消息。

import { isRightEvent, LiveStartService } from '@polyv/white-board-sdk';

// 本地缓存的 socket 数据
const cacheSocket: string[] = [];

let liveStartService: LiveStartService;

socket.on('message', (data: string) => {
  if (liveStartService) {
    liveStartService.joinSocketData(data);
  } else if (isRightEvent(data)) {
    // 未创建开播端服务，缓存到本地，待创建后传入
    cacheSocket.push(cacheSocket);
  }
});

// 某个时机创建开播端服务后
setTimeout(() => {
  liveStartService = new LiveStartService({ .... });
  if (cacheSocket.length) {
    cacheSocket.forEach((data) => {
      liveStartService.joinSocketData(data);
    });
    // 插入后清空本地缓存
    cacheSocket = [];
  }
}, 3 * 1000);

isRightEvent 方法用于判断是否为白板 sdk 服务层所需要的 socket 消息，方法文档 (opens new window)。

发送 Socket

在创建开播端服务 LiveStartService 时，传入 sendSocketData 参数，该参数为一个方法。

import { LiveStartService } from '@polyv/white-board-sdk';

const liveStartService = new LiveStartService({
  // ...其他参数
  sendSocketData: (data: string) => {
    // 不用管别的，直接发到聊天室去
    socket.emit('message', data);
  },
});