# @crestron/ch5-webxpanel 中文文档 规范地址：https://npmcn.com/package/%40crestron/ch5-webxpanel/ 版本：2\.8\.0 npm 元数据更新时间：2024-01-09T15:03:06.894Z 中文译文更新时间：2026-11-11T00:26:54.713Z 软件包许可：SEE LICENSE IN LICENSE\.txt 本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。 原始 npm 页面：https://www.npmjs.com/package/%40crestron/ch5-webxpanel 原文对照：https://npmcn.com/package/%40crestron/ch5-webxpanel/?lang=original 项目主页：https://github.com/CrestronEng/CH5VirtualPanel#readme 源码仓库：https://github.com/CrestronEng/CH5VirtualPanel ## 关键信息（来自 npm 元数据） - 包体积（解压后）：458 kB，72 个文件 - 模块格式：CommonJS - TypeScript 类型：包内自带 - 运行依赖：0 个 - 首次发布：2021-02-01T15:08:07.506Z - 最新版本发布：2024-01-09T15:03:06.626Z - 近 30 天下载量：3954（2026-10-11 至 2026-11-09，npm 官方下载统计） - 已发布版本数：9（近 12 个月 0 个） ## 中文简介 Ch5 组件库的浏览器控制 ## 安装 ```sh npm install @crestron/ch5-webxpanel ``` 也可以使用：`pnpm add @crestron/ch5-webxpanel`、`yarn add @crestron/ch5-webxpanel`、`bun add @crestron/ch5-webxpanel` ## README ![](https://kenticoprod.azureedge.net/kenticoblob/crestron/media/crestron/generalsiteimages/crestron-logo.png) # Crestron 网络X 面板 - 开始 ## 重要:WebX 没有导入语句的面板实例 使用 `WebXPanel.default` 访问 WebXPanel 实例,如果项目不使用 ES6 `import` 发言. * * * ## 安装 通过在 WebXPanel 项目的根文件夹中运行以下命令之一来提供您的软件包 : ```bash # NPM npm link ``` 添加 WebX 通过在 CH5 工程的根文件夹中运行以下命令之一,对一个 CH5 工程进行面板: ```bash # NPM npm link "@crestron/ch5-webxpanel" ``` **请确保 WebXPanel 是第一个在CH5 计划中初始化的库!** **所有配置参数都是可选的 。 只应定义需要覆盖的参数。 对于不应定义的参数,不要通过空字符串值.** 示例:(app.module.ts) ```typescript import WebXPanel, {WebXPanelConfigParams, isActive} from "@crestron/ch5-webxpanel"; const configuration: Partial = { host: 'ip_address | hostname', // defaults to window.location.host ipId: '3|0x03', // string representing a hex value. Might contain "0x" or not. Defaults to "0x03" roomId: 'virtual_control_room_id', // defaults to empty string }; // other rarely used options // port: 49200, // port for Secure WebSocket connection. Defaults to 49200 // tokenUrl: 'https://url/cws/websocket/getWebSocketToken', // defaults to `${location.origin}/cws/websocket/getWebSocketToken`, // tokenSource: 'CSSelf|Fusion', // defaults to CSSelf const webXPanelFactory = () => () => { if (isActive) { WebXPanel.initialize(configuration); } } // ... @NgModule({ // ... providers: [ { provide: APP_INITIALIZER, useFactory: webXPanelFactory, multi: true }, // ... ], // ... }) // ... ``` * * * ## 检查WebX是否 面板活动 ```typescript import {isActive} from "@crestron/ch5-webxpanel"; console.log(`WebXPanel isActive: ${isActive}`); ``` * * * ## 检查 WebXPanel 版本并构建日期 ```typescript import {getVersion, getBuildDate} from "@crestron/ch5-webxpanel"; console.log(`WebXPanel version: ${getVersion()}`); console.log(`WebXPanel build date: ${getBuildDate()}`); ``` * * * ## 合同文件 WebXPanel 库将找到名为合同的文件 `contract.cse2j` cH5项目中的以下路径: `./config/contract.cse2j`。如果在指定的路径没有找到合同文件,WebXPanel将返回空合同文件. * * * ## 网络X 小组记录 WebXPanel 库提供了默认启用的日志器,日志级别设定为 `WARN`。这可以从CH5项目中更改,如果需要,可以在浏览器控制台中看到日志. ```typescript import { getDebuggingState, enableDebugging, disableDebugging, getLogLevel, setLogLevel, LogLevel } from "@crestron/ch5-webxpanel"; const isLoggingEnabled = getDebuggingState(); // to enable logging enableDebugging(); // to disable debugging disableDebugging(); // get current log level getLogLevel(); // set log level to LOG setLogLevel(LogLevel.LOG); ``` * * * ## 正在收听 WebX小组事件 WebXPannel发送的所有事件都是自定义事件. 每项活动的有关数据可在 `detail` 属性. ### 现有事件及其描述 | 事件名称 | 调度原因 | 其他资料 | | --- | --- | --- | | 连接( W) | 已建立成功的 WebSocket 连接 | 类似 `WebSocket.onopen` | | (原始内容存档于2019-10-21) (英语). DISCONNECT WS | WebSocket 连接已断开 | 类似 `WebSocket.onclose` | | 错误 WS | 在websocket上发生错误 | 类似 `WebSocket.onerror` | | FETCH TOKEN FAIED (英语) | 获取核聚变令牌失败 | | | WEB WORKER 发音 | 当前浏览器中不支持工作人 | | | 连接( C) | 通过 CIP 协议成功连接到控制系统 | 提供当前连接的信息 . 不一样 `CONNECT_WS` | | 分解NECT CIP | 在CIP协议上与控制系统断开连接 | 不一样 `DISCONNECT_WS` | | 自动失效 | 认证到控制系统失败 | | | (原始内容存档于2019-10-21) (中文(简体) ) | 控制系统需要验证符 | | | (原始内容存档于2018-09-21) (英语). LICENSE WS | 许可证发生变化(例如,获得许可证、许可证/试用期更新) | | | 无授权 | 这个 `/cws/websocket/getWebSocketToken` 端点响应是重定向 | | * * * ### 听从 `LICENSE_WS` cH5项目的事件 ```typescript import WebXPanel, {WebXPanelEvents} from "@crestron/ch5-webxpanel"; WebXPanel.addEventListener(WebXPanelEvents.LICENSE_WS, ({detail}) => { const { resourceAvailable, controlSystemSupportsLicense, licenseApplied, licenseNotRequired, licenseHasExpiry, licenseDaysRemaining, trialPeriod, trialPeriodDaysRemaining, licenseNotRequired } = detail; // other callback code }); ``` * * * ### 听从 `NOT_AUTHORIZED` cH5项目的事件 ```typescript WebXPanel.addEventListener(WebXPanelEvents.NOT_AUTHORIZED, ({detail}) => { const {redirectTo} = detail; console.log(`Received a redirect to: ${redirectTo}`); // login on the redirectTo page then try authenticating WebXPanel.authenticate(); // or refreshing the page window.reload(); }); ``` * * * ### 听从 `CONNECT_CIP` cH5项目的事件 ```typescript WebXPanel.addEventListener(WebXPanelEvents.CONNECT_CIP, ({detail}) => { const {url, ipId, roomId, tokenSource, tokenUrl} = detail; console.log(`Connected to ${{url, ipId, roomId, tokenSource, tokenUrl}}`); }); ``` * * * ### 听从 `DISCONNECT_CIP` cH5项目的事件 ```typescript WebXPanel.addEventListener(WebXPanelEvents.DISCONNECT_CIP, ({detail}) => { const {reason} = detail; console.log(`Disconnected from CIP. Reason: ${reason}`); }); ``` * * * ## 测试 ```bash # NPM npm test ``` * * * ## 构建 ```bash # NPM npm build ``` ## 常见问题 ### @crestron/ch5-webxpanel 是什么？ Ch5 组件库的浏览器控制 ### 如何安装 @crestron/ch5-webxpanel？ 在项目目录运行 npm install @crestron/ch5-webxpanel，或使用 pnpm add / yarn add / bun add。 ### @crestron/ch5-webxpanel 支持 TypeScript 吗？ 支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。 ### @crestron/ch5-webxpanel 支持 ESM 还是 CommonJS？ 以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。 ### @crestron/ch5-webxpanel 可以商用吗？ @crestron/ch5-webxpanel 使用 SEE LICENSE IN LICENSE\.txt 许可。许可条款写在包内的独立文件中，请阅读该文件确认可否商用。以上为概括，不构成法律意见，请以许可原文为准。 ### @crestron/ch5-webxpanel 的下载量有多少？ 根据 npm 官方下载统计，@crestron/ch5-webxpanel 在 2026/10/11 – 2026/11/09 这 30 天内被下载 3,954 次，日均约 132 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。 ### @crestron/ch5-webxpanel 还在维护吗？ 最新版本 2\.8\.0 发布于 2024/01/09（2 年前）；至今共发布 9 个版本，其中过去 12 个月发布了 0 个；首次发布于 2021/02/01。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。