WebGL 数据通道

1.  简介
    --

本手册介绍了如何在WebGL中使用 LarkXR 数据通道功能，包括初始化数据通道、接收用户端页面发送的文本数据以及发送消息到用户端页面。通过本手册，你可以快速上手并实现基本的通信功能。

注意：WebGL的数据通道功能需升级LarkXR版本到V3.3.2.6

2.  功能概述
    ----

### **2.1 初始化数据通道**

在WebGL页面加载完成后，需要初始化数据通道。此函数会调用 window.larkxr\_dc\_init() 方法，完成数据通道的初始化。

### **2.2 接收文本数据**

当用户端页面发送文本数据时，页面会调用 onDcTxtData 函数。此函数会将接收到的文本数据显示在WebGL页面上的指定 div 元素中。

### **2.3 接收TaskId**

当数据通道连通，WebGL页面会调用 onTaskStatus 函数。此函数会接收到TaskId参数。

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

WebGL页面上有一个按钮，点击该按钮会调用 larkxr\_dc\_send 函数，将消息发送到用户端页面。

3.  页面结构
    ----

以下是页面的WebGL HTML 结构 Demo：

<!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>
        <script>
            // 初始化数据通道
            function larkxr_init() {
                console.log("Data Channel Initialized");
                window.larkxr_dc_init();
            }
    
            // 接收用户端页面发送的文本数据
            function onDcTxtData(data) {
                // 获取目标 div 元素
                const targetDiv = document.getElementById('targetDiv');
                // 将参数值赋值给 div 的 innerText
                targetDiv.innerText = data;
            }
    
            // 接收当前的taskId
            function onTaskStatus(taskId) {
                console.log("Received task status with taskId:", taskId);
            }
    
            // 页面加载完成后调用初始化函数
            window.onload = function () {
                larkxr_init();
            };
        </script>
    </body>
    </html>

以下是页面的WebGL Vue 结构 Demo：
      <template>
      <div class="larkxr-data-channel-example">
        <h1>LarkXR Data Channel Example</h1>
        <button @click="sendMessage('Hello from WebGL page!')">发送消息"Hello from WebGL page!"到用户端页面</button>
        <div class="fixed-size-div">
          This is the target div，接收用户端页面发送的数据:
          <span>{{ receivedData }}</span>
        </div>
      </div>
      </template>
      
      <script>
      export default {
        name: 'LarkXRDataChannelExample',
        data() {
          return {
            receivedData: '' // 用于存储接收到的数据
          };
        },
        methods: {
          // 初始化数据通道
          larkxrInit() {
            console.log('Data Channel Initialized');
            window.larkxr_dc_init();
          },
          // 接收用户端页面发送的文本数据
          onDcTxtData: function(data) {
           this.receivedData = data; // 更新接收到的数据
         },
          // 接收当前的taskId
          onTaskStatus:function(taskId) {
            console.log('Received task status with taskId:', taskId);
          },
          // 发送消息到用户端页面
          sendMessage(message) {
            window.larkxr_dc_send(message);
          }
        },
        mounted() {
          this.larkxrInit(); // 页面加载完成后调用初始化函数
          window.onDcTxtData = this.onDcTxtData // 重要
          window.onTaskStatus = this.onTaskStatus // 重要
        }
      };
      </script>
      
      <style>
      .fixed-size-div {
        width: 100px;
        height: 100px;
        background-color: lightblue;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 14px;
      }
      </style>

4.  数据通道实现
    ------

### 4.1 WebGL 页面地址设置到 LarkXR

根据 [LarkSR 帮助手册 3.3](https://showdoc.pingxingyun.com/web/#/89/2695)，添加 WebGL 程序。在手册中找到相关章节，按照说明填写 WebGL 页面的地址。

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

1：下载源码

从 [GitHub - ParaverseTechnology/lark\_sr\_websdk\_demos](https://github.com/ParaverseTechnology/lark_sr_websdk_demos) 下载 WebSDK 源码。此项目提供了如何使用 LarkSR WebSDK 创建云渲染客户端的简单介绍。

2：参考手册

详细操作请参考 [LarkSR WebClient SDK 文档](https://paraversetechnology.github.io/webclient_sdk/)。文档中包含了如何安装、使用 SDK 以及如何实现数据通道的具体步骤。