在 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 物件

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 };

資料查詢

在 DronaHQ 中，在資料查詢中使用 startWebSocket 和 stopWebSocket 來整合 WebSocket 功能。

• 啟動 WebSocket 查詢： 為給定交易品種建立 WebSocket 連線。
• 停止 WebSocket 查詢：安全關閉連線並清除 UI 表。

在應用程式載入時清除表格的範例 JSCode：

async function JSCode(output) {
    if (typeof Formbuilder === "undefined") {
        JSOBJECTS.stopWebSocket();
    }
    UTILITY.SETCTRLVALUE([{ name: "tablegrid", value: [] }]);
    return output;
}

觸發 WebSocket 操作

在按鈕控制項的操作流程中設定觸發器：

1. 為「開始」和「停止」按鈕新增「執行資料查詢」操作。
2. 選擇對應的資料查詢（Start WebSocket 或 Stop WebSocket）。

工作流程

1. 開始：輸入符號，點選“開始”，啟動WebSocket連線。
2. 資料取得與更新：應用程式取得並顯示即時數據，動態更新表格。
3. 持續更新： WebSocket 連線不斷傳輸和更新資料。
4. 停止：按一下「停止」將關閉連線並清除表格。

重要注意事項

• 程式碼驗證與安全：始終驗證並保護您的自訂程式碼。
• 正確的連線關閉：關閉WebSocket連線以防止資源洩漏。

此專案突顯了 DronaHQ 的 WebSocket 功能在建立動態即時應用程式方面的強大功能。 使用者友善的介面和可重複使用的程式碼相結合，可以輕鬆實現各種應用程式的即時資料流。

以上是在 DronaHQ 中設定 WebSocket的詳細內容。更多資訊請關注PHP中文網其他相關文章！