Setting up WebSocket in DronaHQ

Harness the power of real-time data with DronaHQ's WebSocket integration! This tutorial demonstrates building an interactive dashboard for live data streams, eliminating the need for constant page refreshes and complex backend solutions. We'll leverage DronaHQ's Global JS Objects for reusable functions and variables, enabling seamless live updates across your applications. Ideal for developers aiming to enhance user engagement or create real-time monitoring dashboards.

Project Overview: Real-time Data Visualization

This project showcases:

• Real-time data streaming: Direct connection to WebSocket endpoints (like Binance's API) for instant data display. No more delays!
• Reusable design: WebSocket connection logic resides in Global JS Objects, easily deployed across multiple DronaHQ applications.
• Interactive UI: A dynamic interface displays live cryptocurrency trade data (or any data stream), updating automatically as new data arrives.

Understanding Global JS Objects

DronaHQ's Global JS Objects provide reusable JavaScript functions and variables accessible across your entire account. Use them in Data Binding, Event Actions, JS Transform, and more. Once saved, they're readily available in any app, promoting code reuse and efficiency.

Key Advantages:

• Reusable JavaScript functions and variables.
• Global accessibility across all applications.
• Enhanced code flexibility and reduced redundancy.

UI Design

The user interface includes:

1. Real-time Data Table: Displays live trade data for the selected symbol (e.g., BTCUSDT), updating automatically with new WebSocket data. Columns include Symbol, Time, and Price.
2. WebSocket Control Buttons: "Start" initiates the WebSocket connection, and "Stop" safely closes it and clears the table.
3. Symbol Input Field: Allows users to specify the trading pair or data identifier for the WebSocket connection.

WebSocket Implementation

WebSockets provide full-duplex communication over a single TCP connection, enabling servers to push data to clients as it becomes available. This is perfect for real-time applications like financial dashboards and chat programs. DronaHQ's WebSocket integration creates dynamic interfaces that update instantly without refreshing or polling. For a deeper dive into WebSockets with DronaHQ, click here.

Code Example: Global JS Object

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

Data Queries

In DronaHQ, use startWebSocket and stopWebSocket within Data Queries to integrate WebSocket functionality.

• Start WebSocket Query: Establishes the WebSocket connection for a given symbol.
• Stop WebSocket Query: Safely closes the connection and clears the UI table.

Example JSCode for clearing the table on app load:

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

Triggering WebSocket Actions

Configure triggers in the Action Flow of your button controls:

1. Add a "Run Data Query" action to the "Start" and "Stop" buttons.
2. Select the corresponding data query (Start WebSocket or Stop WebSocket).

Workflow

1. Start: Enter a symbol, click "Start," initiating the WebSocket connection.
2. Data Fetch & Update: The app fetches and displays live data, updating the table dynamically.
3. Continuous Updates: The WebSocket connection continuously streams and updates data.
4. Stop: Clicking "Stop" closes the connection and clears the table.

Important Considerations

• Code Validation & Security: Always validate and secure your custom code.
• Proper Connection Closure: Close WebSocket connections to prevent resource leaks.

This project highlights the power of DronaHQ's WebSocket capabilities for building dynamic, real-time applications. The combination of a user-friendly interface and reusable code makes it easy to implement live data streaming for various applications.

The above is the detailed content of Setting up WebSocket in DronaHQ. For more information, please follow other related articles on the PHP Chinese website!