在 DronaHQ 中设置 WebSocket

通过 DronaHQ 的 WebSocket 集成利用实时数据的力量！ 本教程演示了如何为实时数据流构建交互式仪表板，从而无需不断刷新页面和复杂的后端解决方案。我们将利用 DronaHQ 的全局 JS 对象来实现可重用的函数和变量，从而实现跨应用程序的无缝实时更新。 非常适合旨在增强用户参与度或创建实时监控仪表板的开发人员。

项目概述：实时数据可视化

该项目展示：

• 实时数据流：直接连接到WebSocket端点（如币安的API）以进行即时数据显示。不再有任何延误！
• 可重用设计： WebSocket 连接逻辑驻留在全局 JS 对象中，可以轻松部署在多个 DronaHQ 应用程序中。
• 交互式用户界面：动态界面显示实时加密货币交易数据（或任何数据流），并在新数据到达时自动更新。

了解全局 JS 对象

DronaHQ 的全局 JS 对象提供可在整个帐户中访问的可重用 JavaScript 函数和变量。 在数据绑定、事件操作、JS 转换等中使用它们。 保存后，它们可以在任何应用程序中轻松使用，从而促进代码重用和效率。

主要优点：

• 可重用的 JavaScript 函数和变量。
• 所有应用程序的全局可访问性。
• 增强代码灵活性并减少冗余。

用户界面设计

用户界面包括：

1. 实时数据表：显示所选交易品种（例如 BTCUSDT）的实时交易数据，并使用新的 WebSocket 数据自动更新。列包括符号、时间和价格。
2. WebSocket 控制按钮：“开始”启动 WebSocket 连接，“停止”安全地关闭它并清除表格。
3. 符号输入字段：允许用户指定WebSocket连接的交易对或数据标识符。

WebSocket 实现

WebSocket 通过单个 TCP 连接提供全双工通信，使服务器能够在数据可用时将数据推送到客户端。 这非常适合财务仪表板和聊天程序等实时应用程序。 DronaHQ 的 WebSocket 集成创建了动态界面，可以立即更新，无需刷新或轮询。 要更深入地了解 DronaHQ 的 WebSocket，单击此处。

代码示例：全局 JS 对象

<code class="language-javascript">let socket = null; // WebSocket connection
let tableData = {}; // Stores latest data

// Logs messages to the console
function logToConsole(message) {
    console.log(message);
}

// Starts WebSocket connection
function startWebSocket(symbol) {
    const streamUrl = `wss://stream.binance.com:9443/ws/${symbol}@trade`;
    socket = new WebSocket(streamUrl);

    socket.onopen = () => logToConsole(`Connected to ${symbol}.`);
    socket.onmessage = (event) => {
        const data = JSON.parse(event.data);
        const price = parseFloat(data.p).toFixed(2);
        const symbol = data.s.toUpperCase();
        const time = new Date(data.T).toLocaleTimeString();

        logToConsole(`Received data for ${symbol}: Time - ${time}, Price - $${price}`);
        tableData[symbol] = { time, price: `$${price}` };
        UTILITY.SETCTRLVALUE([{ name: "tablegrid", value: [{ time, price: `$${price}` }] }]);
    };
    socket.onerror = (error) => logToConsole(`WebSocket Error: ${error.message}`);
    socket.onclose = () => logToConsole(`WebSocket closed.`);
}

// Stops WebSocket connection
function stopWebSocket() {
    if (socket) {
        logToConsole("Closing WebSocket...");
        socket.onclose = () => logToConsole("WebSocket closed.");
        socket.onerror = (error) => logToConsole(`Error closing: ${error.message}`);
        socket.close();
        socket = null;
        logToConsole("WebSocket stopped.");
    } else {
        logToConsole("No active connection.");
    }
}

// Export functions for DronaHQ
const ExportModule = { startWebSocket, stopWebSocket };</code>

数据查询

在 DronaHQ 中，在数据查询中使用 startWebSocket 和 stopWebSocket 来集成 WebSocket 功能。

• 启动 WebSocket 查询： 为给定交易品种建立 WebSocket 连接。
• 停止 WebSocket 查询：安全关闭连接并清除 UI 表。

在应用程序加载时清除表格的示例 JSCode：

<code class="language-javascript">async function JSCode(output) {
    if (typeof Formbuilder === "undefined") {
        JSOBJECTS.stopWebSocket();
    }
    UTILITY.SETCTRLVALUE([{ name: "tablegrid", value: [] }]);
    return output;
}</code>

触发 WebSocket 操作

在按钮控件的操作流中配置触发器：

1. 为“开始”和“停止”按钮添加“运行数据查询”操作。
2. 选择对应的数据查询（Start WebSocket 或 Stop WebSocket）。

工作流程

1. 开始：输入符号，点击“开始”，启动WebSocket连接。
2. 数据获取和更新：应用程序获取并显示实时数据，动态更新表格。
3. 持续更新： WebSocket 连接不断传输和更新数据。
4. 停止：单击“停止”将关闭连接并清除表格。

重要注意事项

• 代码验证和安全：始终验证并保护您的自定义代码。
• 正确的连接关闭：关闭WebSocket连接以防止资源泄漏。

该项目突出了 DronaHQ 的 WebSocket 功能在构建动态实时应用程序方面的强大功能。 用户友好的界面和可重用的代码相结合，可以轻松实现各种应用程序的实时数据流。

以上是在 DronaHQ 中设置 WebSocket的详细内容。更多信息请关注PHP中文网其他相关文章！