数据通道 + WebSDK

# 数据通道 + WebSDK

本文介绍如何使用 **WebSDK** 与 **数据通道插件** 。

## 一、准备工作

开始前请确认已具备：

| 组件 | 说明 |
|---|---|
| **业务系统 + WebSDK** | 可基于 WebSDK Demo 构建；源码见 [GitHub](https://paraversetechnology.github.io/webclient_sdk) |
| **LarkXR 4.0（ImmerShare Scale）（LarkXR）云渲染平台** | 自建 |
| **数据通道插件** | 支持 [Unity](https://github.com/paraversetechnology/datachannel/tree/main/doc/unity)、[Unreal Engine（UE）](https://github.com/paraversetechnology/datachannel/tree/main/doc/unreal)、[UE蓝图](https://paraversetechnology.github.io/datachannel/ue4_datachannel_blueprint.html)、[WebGL](https://immershare.com/docs/page/webgl-dc)；[C++](https://github.com/paraversetechnology/datachannel/tree/main/doc/c++) |

## 二、实现步骤

### （一）集成 WebSDK

#### 1. 引入 WebSDK

WebSDK 提供多种 Demo。推荐使用 `ui-mobile-vue-new`：基于 Vue 2.0，与标准客户端体验一致，包含完整 UI，并支持高度定制。

```bash
# npm
npm i larksr_websdk
```

```html

<script src="larksr-web-sdk.min.js"></script>
```

#### 2. 初始化 WebSDK 并加载云渲染场景

以下示例适用于自建 LarkXR 云渲染平台：

```javascript
// serverAddress：LarkXR 云渲染平台地址，例如 http://222.128.6.137:8181/
// SDK ID：若使用开发者平台云授权码，请在开发者平台申请；否则请联系 business@paraverse.cc
// appliId：在 LarkXR 管理后台查看

var larksr = new LarkSR({
  // 挂载显示的 DOM 元素
  // 注意：不要设置为 document.documentElement
  rootElement: document.getElementById('container'),
  // 服务器地址（实际使用时填写你的地址）
  // 例如：http://222.128.6.137:8181/
  serverAddress: "Lark 服务器前台地址",
});

// 授权码校验通过后才能调用 connect
larksr.initSDKAuthCode('您的 SDK ID')
  .then(() => {
    // 开始连接
    larksr.connect({
      // 云端应用 ID，从 LarkXR 管理后台获取
      // 参考：https://showdoc.pingxingyun.com/web/#/75/1697
      appliId: "应用ID"
    })
      .then(() => {
        console.log('enter success');
      })
      .catch((e) => {
        console.error(e);
      });
  })
  .catch((e) => {
    console.error(e);
  });
```

### （二）配置数据通道插件

数据通道支持[Unity](https://github.com/paraversetechnology/datachannel/tree/main/doc/unity)、[Unreal Engine（UE）](https://github.com/paraversetechnology/datachannel/tree/main/doc/unreal)、[UE蓝图](https://paraversetechnology.github.io/datachannel/ue4_datachannel_blueprint.html)、[WebGL](https://immershare.com/docs/page/webgl-dc)；[C++](https://github.com/paraversetechnology/datachannel/tree/main/doc/c++)，不同技术栈集成方式不同。请按官方文档完成集成

> 云端应用必须集成数据通道后，才能与业务系统双向通信。

### （三）业务系统向云渲染发送消息

在业务系统中，用户执行操作后，可通过 WebSDK 封装方法将消息发送到云端应用。例如：

```vue
<template>
  <div>
    <button @click="handleClick">点击我，发送一条数据到云端应用</button>
  </div>
</template>

### （四）云端应用接收业务系统消息

以 UE 为例，可通过回调监听业务系统发来的消息：

```cpp
// on_data：接收到 Web 或其他客户端发来的数据，禁止为 NULL
LARKXR_API int DC_CALL lr_client_start(
    const char* taskid,
    on_connected cb_connected,
    on_data cb_data,
    on_disconnected cb_disconnected,
    void* user_data
);
```

### （五）云端应用向业务端发送消息

支持发送字符串与二进制数据。

**参数说明：**

| 参数 | 说明 |
|---|---|
| `type` | 发送数据类型（字符串或二进制） |
| `data` | 数据指针 |
| `size` | 数据长度（字符串建议包含 `'\0'` 的长度） |

**返回值：**

- `< 0`：发送失败
- `= size`：发送成功

```cpp
LARKXR_API int DC_CALL lr_client_send(
    enum data_type type,
    const char* data,
    size_t size
);
```

### （六）业务端监听云端应用消息

在 LarkSR 生命周期内会触发多种事件。本场景重点关注：

- 数据通道连通成功
- 数据通道接收到消息

```javascript
// 数据通道是否打开（可判断是否连通）
larksr.on('datachannelopen', function (e) {
  console.log("LarkSRClientEvent datachannelopen", e);
});

// 收到文字消息
larksr.on('datachanneltext', function (e) {
  console.log("LarkSRClientEvent datachanneltext", e);
});

// 收到二进制消息
larksr.on('datachannelbinary', function (e) {
  console.log("LarkSRClientEvent datachannelbinary", e);
});
```

## 三、总结

通过集成 WebSDK 与数据通道插件，可将云渲染嵌入业务系统，实现双向无缝交互，提升操作体验并为业务流程优化提供基础能力。

若实现过程中遇到问题，请查阅相关文档或联系技术支持。