WebGL 数据通道

## 简介

本手册介绍如何在 WebGL 中使用 LarkXR 数据通道，包括：

- 初始化数据通道
- 接收用户端页面发送的文本数据
- 向用户端页面发送消息

通过本手册，你可以快速实现基本通信能力。

## 功能概述

### 2.1 初始化数据通道

WebGL 页面加载完成后，需初始化数据通道。调用 `window.larkxr_dc_init()` 完成初始化。

### 2.2 接收文本数据

当用户端页面向云端发送文本数据时，会触发 `onDcTxtData`。可将接收到的文本显示到页面指定元素中。

### 2.3 接收 TaskId

数据通道连通后，会触发 `onTaskStatus`，并传入当前 `taskId`。

### 2.4 发送消息到用户端页面

在 WebGL 页面中点击按钮，调用 `larkxr_dc_send`（或 `window.larkxr_dc_send`）即可将消息发送到用户端页面。

## 页面结构 Demo

### HTML 示例

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>LarkXR Data Channel Example</title>
  <style>
    .fixed-size-div {
      width: 100px;
      height: 100px;
      background-color: lightblue;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 14px;
    }
  </style>
</head>
<body>
  <h1>LarkXR Data Channel Example</h1>

<button onclick="larkxr_dc_send('Hello from WebGL page!')">
    发送消息 "Hello from WebGL page!" 到用户端页面
  </button>

<div class="fixed-size-div">
    This is the target div，接收用户端页面发送的数据:
    <span id="targetDiv"></span>
  </div>

// 接收用户端页面发送的文本数据
    function onDcTxtData(data) {
      const targetDiv = document.getElementById('targetDiv');
      targetDiv.innerText = data;
    }

// 接收当前 taskId
    function onTaskStatus(taskId) {
      console.log("Received task status with taskId:", taskId);
    }

// 页面加载完成后初始化
    window.onload = function () {
      larkxr_init();
    };
  </script>
</body>
</html>
```

### Vue 示例

```vue
<template>
  <div>
    <button @click="sendMessage('Hello from WebGL page!')">
      发送消息 "Hello from WebGL page!" 到用户端页面
    </button>

<div class="fixed-size-div">
      This is the target div，接收用户端页面发送的数据:
      {{ receivedData }}
    </div>
  </div>
</template>

> Vue 示例中，必须将 `onDcTxtData`、`onTaskStatus` 挂载到 `window`，否则数据通道无法回调到组件方法。

## 数据通道实现

### 4.1 将 WebGL 页面地址配置到 LarkXR

根据 LarkSR 帮助手册 3.3，添加 WebGL 程序，并按说明填写 WebGL 页面地址。

### 4.2 使用 WebSDK 实现数据通道

1. **下载源码**  
   从 [GitHub - ParaverseTechnology/lark_sr_websdk_demos](https://github.com/ParaverseTechnology/lark_sr_websdk_demos) 下载 WebSDK Demo 源码。该项目提供了使用 LarkSR WebSDK 创建云渲染客户端的基础示例。