在 DronaHQ 中設定 WebSocket-js教程-PHP中文網

透過 DronaHQ 的 WebSocket 整合利用即時資料的力量！本教學課程示範如何為即時資料流建立互動式儀表板，因此無需不斷刷新頁面和複雜的後端解決方案。我們將利用 DronaHQ 的全域 JS 物件來實現可重複使用的函數和變量，從而實現跨應用程式的無縫即時更新。非常適合旨在增強用戶參與度或建立即時監控儀表板的開發人員。

Setting up WebSocket in DronaHQ

專案概述：即時資料視覺化

此專案展示：

即時資料流：直接連接到WebSocket端點（如幣安的API）以進行即時資料顯示。不再有任何延誤！
可重複使用設計： WebSocket 連線邏輯駐留在全域 JS 物件中，可以輕鬆部署在多個 DronaHQ 應用程式中。
互動式使用者介面：動態介面顯示即時加密貨幣交易資料（或任何資料流），並在新資料到達時自動更新。

了解全域 JS 物件

DronaHQ 的全域 JS 物件提供可在整個帳戶中存取的可重複使用 JavaScript 函數和變數。在資料綁定、事件操作、JS 轉換等中使用它們。保存後，它們可以在任何應用程式中輕鬆使用，從而促進程式碼重複使用和效率。

主要優點：

可重複使用的 JavaScript 函數和變數。
所有應用程式的全域可存取性。
增強程式碼靈活性並減少冗餘。

使用者介面設計

Setting up WebSocket in DronaHQ

使用者介麵包括：

即時數據表：顯示所選交易品種（例如 BTCUSDT）的即時交易數據，並使用新的 WebSocket 數據自動更新。列包括符號、時間和價格。
WebSocket 控制按鈕：「開始」啟動 WebSocket 連接，「停止」安全地關閉它並清除表格。
符號輸入欄位：允許使用者指定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 功能。

Setting up WebSocket in DronaHQ

啟動 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>

登入後複製