跑通画布示例项目

更新时间 2024/11/18 12:57:03

前提条件

有效的画布应用 appId 及 appSecret
Node.js (推荐 v16+ 版本) 及 npm v7+
满足最低要求的浏览器

Github 公开示例项目

为方便您快速体验画布实例，我们提供了实例代码项目，可点击链接进行访问并下载源码。

在使用 Github 公开项目情况下，请忽略下述创建 Web 应用项目部分。但如果您偏好在本地亲自创建项目，则可以按下述内容进行操作。

创建 Web 应用项目

创建项目文件夹:
```
mkdir infi-demo
cd infi-demo
```
初始化 node 环境
```
npm init
```

配置 vite 环境

注：此处可换成任意其他前端打包工具，如 webpack 、Parcel 等。

安装 vite
```
npm i -D vite
```

添加 vite 配置文件在项目根目录下，新建 vite 配置文件 vite.config.js：

// infi-demo/vite.config.js
import { defineConfig } from 'vite';
// 非常基础的 vite dev 环境配置
export default defineConfig(({}) => {
  return {
    server: {
      host: '0.0.0.0',
      port: 3000,
    },
  };
});

在 package.json 中添加 vite 启动命令:

{
  ...,
  "scripts": {
    "vite": "vite"
  },
  ...
}

引入画布 websdk
```
npm i @plaso-infi/whiteboard-sdk @plaso-infi/whiteboard-ext-tools ali-oss react@^17.0.2 react-dom@^17.0.2
```
其中：
- react 与 react-dom: 英飞画布 Web SDK 依赖 React 环境。
- @plaso-infi/whiteboard-sdk: 为英飞画布 Web SDK，是启用画布功能的必要依赖。
- @plaso-infi/whiteboard-ext-tools: 为 Node 环境画布工具，包括生成画布访问链接的工具函数（注：并非画布必要依赖，正常使用画布 Web SDK 时不需要安装。）。
- ali-oss: 画布会将文件资源存储至阿里 OSS 服务器中，而鉴于 OSS 包体大小，我们希望由用户侧自行安装。

创建前端 html 文件

于 infi-demo 文件夹下，添加 index.html 文件：

<!-- infi-demo/index.html -->
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>英飞画布 demo</title>
    <script type="module" src="./index.js" defer></script>
    <style>
      #board {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
      }
    </style>
  </head>
  <body>
    <div id="board-app"></div>
  </body>
</html>

创建前端脚本文件

于 infi-demo 文件夹下，添加 index.js 文件：

// infi-demo/index.js
import { getInfiWebsdkQuery } from "@plaso-infi/whiteboard-ext-tools";
import InfiWebSdk from "@plaso-infi/whiteboard-sdk";
// 需要引入画布样式文件，此文件有做类命名 scoped 处理，所以不用担心样式名称冲突
import "@plaso-infi/whiteboard-sdk/dist/esm/index.css";

// 画布连接参数数据示例，仅作 demo 演示
const devQuerySample = {
  /**
  * 画布 id，通常情况下为英飞服务端生成的 uuid，这里使用的是创建 app 后,
  * 英飞服务端自动帮忙创建的一块 Hello World 画布，以方便开发者能仅基于前端
  * 就能访问画布，而不是首先要基于 restful 接口创建画布，记录 recordId，再基于
  * recordId 来生成画布连接参数。
  */
  recordId: "HelloWorld",
  // 您注册的应用 appId
  appId: "YOUR_APP_ID_HERE",
  // 您注册的应用 appSecret，注：强烈推荐不要放在前端项目中
  appKey: "YOUR_APP_SECRET_HERE",
  // 画布访问用户的用户 ID，由开发者自行定义，同样的 loginName 在同一块画布内，会被人为是同一名用户
  loginName: "user_0",
};

/**
* 通常 getQuery 函数是需要请求您的服务端来获取画布, 在这个demo中，
* 借助  @plaso-infi/whiteboard-ext-tools 的协助，在前端快速生成画布连接参数
* **注：**
* 非常不推荐在前端生成画布连接参数，因为这样做就意味着前端会获取到 appSecret,
* 出于安全考虑，应该尽可能确保 appSecret 不会于网络上传输
*/
const getQuery = async () =>
  Promise.resolve(getInfiWebsdkQuery(devQuerySample));

window.onload = async () => {
  // 获取画布容器 dom
  const container = document.getElementById("board-app");
  // 初始化画布实例
  const initPromise = await InfiWebSdk.getSdkInstance({
    getQueryString: getQuery,
    /**
    * 给入画布用户的信息，包括用户ID loginName，与用户名称 userName。
    * 对于不同用户，loginName 应尽可能保证不同，而 userName 则只会影响显示
    */
    userInfo: {
      loginName: "user_0",
      userName: "User 0",
    },
    /** 给入画布即将挂在的 DOM 节点 */
    containerDom: container,
    /**
    * 画布用来根据用户 loginName 读取远端用户数据，并用户本地显示的函数，
    * 因为当前是单人使用画布 demo，故传入空函数即可
    */
    getUsersInfo: async () => [],
  });
  /**
   * 检查画布初始化的结果：
  * - code 为 0 时，表示初始化成功，此时 payload 为 Web SDK 实例对象
  * - code 不为 0 时，表示初始化失败，此时 payload 为错误消息提示字符串
  */
  const { code, payload: sdk } = initPromise;
  console.log(code, payload);
};

启动应用

于项目根目录执行 npm run vite, 然后在浏览器内查看 http://localhost:3000 即可。

注：有可能会出现本地 3000 端口被占用而导致 vite 使用其它端口的情况，请根据 vite 运行提示，选择正确的本地端口号进行查看。

前提条件​

Github 公开示例项目​

创建 Web 应用项目​

启动应用​

前提条件

Github 公开示例项目

创建 Web 应用项目

启动应用