前端 JSSDK 接口定义说明

初始化 SDK

import Vika, { IframeMessageName } from '@vikadata/vika'

const vika = new Vika({ token: '你的 token_id' })
const iframe = vika.getIframe()

获取协同者数据事件

类型定义

interface IIframeMessage{
    message:'RoomCollaborators';
    data: {
        // 当前房间的 id，即正在浏览的节点 id
        roomId:string
        collaborators: ICollaborator[]
    }
}

interface ICollaborator{
    // 用户的昵称
    name: string
    // 用户的头像
    avatar: string;
}

示例

iframe.subscribe(IframeMessageName.Collaborators, (data:ICollaborator) => {
  console.log(data);
})

获取 socket 同步状态事件

类型定义

interface IIframeMessage{
    message:'RoomSocketStatus';
    data: {
        // 同上
        roomId: string
        status: Network
    }
}

enum Network {
  Online = 'online', //在线状态
  Offline = 'offline',  //离线状态
  Sync = 'sync',  //同步中状态
  Loading = 'loading', //初始化状态
}

示例

iframe.subscribe(IframeMessageName.SocketStatus, (data:{roomId: string;status: Network}) => {
  console.log(data);
})

协同数据错误收集

类型定义

interface IIframeMessage{
    message:'RoomSocketError';
    data: IRoomSocketError
}

interface IRoomSocketError {
    // 错误编码
    errorCode: number;
    // 错误信息
    message: string;
    // 错误信息对应的表 id，需注意，此时的 roomId 不一定是正在浏览的表 id
}

示例

iframe.subscribe(IframeMessageName.SocketError, (data:IRoomSocketError) => {
  console.log(data);
})

订阅视图切换事件

示例

iframe.subscribe(IframeMessageName.ChangeView, (data) => {
  console.log(IframeMessageName.ChangeView);
  console.log(data);
})

节点名称修改

iframe.subscribe(IframeMessageName.ChangeNodeName, (data) => {
  console.log(IframeMessageName.ChangeNodeName);
  console.log(data);
})

页面加载完成

iframe.subscribe(IframeMessageName.PageLoaded, (data) => {
  console.log(data);
})

嵌入链接失效

iframe.subscribe(IframeMessageName.EmbedLinkFail, (data) => {
  console.log(data);
})

页面崩溃

iframe.subscribe(IframeMessageName.PageCrash, (data) => {
  console.log(data);
})

修改视图名称

iframe.subscribe(IframeMessageName.ChangeViewName, (data: IData) => {
  console.log(IframeMessageName.ChangeViewName);
  console.log(data);
})

interface IData {
  roomId: string;
  // 操作的视图 id
  viewId: string;
  // 修改后的视图名称
  viewName: string;
}

订阅 iframe 容器内的镜像按钮点击

（更新到最新的 SDK 版本：1.4.5）

iframe.subscribe(IframeMessageName.MirrorBtnClick, (data) => {
  // iframe 的父页面在此处自定义业务逻辑
  console.log(data);
})

自定义数据导出

该事件和其他事件不同，需要主动向 iframe 发出信息，而非订阅 iframe 的信息通知。

需要注意，导出数据受内部权限控制，在不对空间站安全设置做改动的情况下，只有节点的可管理权限才能正常导出数据，对应生成 embed 时，permissionType 需要设置为 priveteEdit。publicEdit 默认对应可编辑权限。不支持数据导出。
「Png」格式的导出仅支持 viewId 存在的时候，不配置导出格式，则默认为 xlsx。

示例

    iframe.triggerEvent({
      iframeRef: document.getElementById("iframe"),
      eventName: TriggerIframeMessageName.ExportData,
      data: {
        nodeId: "dstpA26q2GNXd6liQS",
        viewId: "viweFHwvAzhqA",
      },
    });

类型定义

export enum TriggerIframeMessageName {
  ExportData = "exportData",
}

interface ITriggerIframeMessageBase {
  iframeRef: any;
  eventName: TriggerIframeMessageName;
}

export interface ITriggerIframeMessageForExportData extends ITriggerIframeMessageBase {
  eventName: TriggerIframeMessageName.ExportData;
  data: {
    nodeId: string;
    /**
     * @default 'xlsx'
     */
    fileType?: 'csv' | 'xlsx' | 'png'
    viewId?: string;
  };
}

export type ITriggerIframeMessage = ITriggerIframeMessageForExportData

事件执行结果通知

对于从外部主动触发的 iframe 事件，客户端需要知道事件的执行结果，对于执行失败的事件，会同时返回失败原因。

示例

iframe.subscribe(IframeMessageName.TriggerEventResult, (data) => {
  console.log(data);
})

类型定义

export interface IIframeMessageForTriggerEventResult {
  message: IframeMessageName.TriggerEventResult;
  data: {
    // 事件名称
    eventName: TriggerIframeMessageName;
    // 执行结果
    success: boolean;
    // 当执行结果为 false，会给出原因
    message?: string;
  };
}