Einrichten von WebSocket in DronaHQ

Nutzen Sie die Leistungsfähigkeit von Echtzeitdaten mit der WebSocket-Integration von DronaHQ! Dieses Tutorial zeigt den Aufbau eines interaktiven Dashboards für Live-Datenströme, wodurch ständige Seitenaktualisierungen und komplexe Backend-Lösungen überflüssig werden. Wir nutzen die globalen JS-Objekte von DronaHQ für wiederverwendbare Funktionen und Variablen und ermöglichen so nahtlose Live-Updates für Ihre Anwendungen. Ideal für Entwickler, die die Benutzereinbindung verbessern oder Echtzeit-Überwachungs-Dashboards erstellen möchten.

Projektübersicht: Echtzeit-Datenvisualisierung

Dieses Projekt zeigt:

• Echtzeit-Datenstreaming: Direkte Verbindung zu WebSocket-Endpunkten (wie der Binance-API) für sofortige Datenanzeige. Keine Verzögerungen mehr!
• Wiederverwendbares Design: Die WebSocket-Verbindungslogik befindet sich in globalen JS-Objekten und kann problemlos über mehrere DronaHQ-Anwendungen hinweg bereitgestellt werden.
• Interaktive Benutzeroberfläche: Eine dynamische Schnittstelle zeigt Live-Kryptowährungshandelsdaten (oder einen beliebigen Datenstrom) an und aktualisiert sich automatisch, wenn neue Daten eintreffen.

Globale JS-Objekte verstehen

DronaHQs globale JS-Objekte bieten wiederverwendbare JavaScript-Funktionen und -Variablen, auf die in Ihrem gesamten Konto zugegriffen werden kann. Verwenden Sie sie für Datenbindung, Ereignisaktionen, JS-Transformation und mehr. Sobald sie gespeichert sind, sind sie in jeder App verfügbar, was die Wiederverwendung und Effizienz von Code fördert.

Hauptvorteile:

• Wiederverwendbare JavaScript-Funktionen und -Variablen.
• Globale Zugänglichkeit für alle Anwendungen.
• Erhöhte Codeflexibilität und reduzierte Redundanz.

UI-Design

Die Benutzeroberfläche umfasst:

1. Echtzeit-Datentabelle: Zeigt Live-Handelsdaten für das ausgewählte Symbol (z. B. BTCUSDT) an und wird automatisch mit neuen WebSocket-Daten aktualisiert. Zu den Spalten gehören Symbol, Zeit und Preis.
2. WebSocket-Steuerschaltflächen: „Start“ initiiert die WebSocket-Verbindung und „Stop“ schließt sie sicher und löscht die Tabelle.
3. Symboleingabefeld: Ermöglicht Benutzern die Angabe des Handelspaars oder der Datenkennung für die WebSocket-Verbindung.

WebSocket-Implementierung

WebSockets bieten Vollduplex-Kommunikation über eine einzige TCP-Verbindung und ermöglichen es Servern, Daten an Clients zu übertragen, sobald diese verfügbar sind. Dies ist perfekt für Echtzeitanwendungen wie Finanz-Dashboards und Chat-Programme. Die WebSocket-Integration von DronaHQ erstellt dynamische Schnittstellen, die sofort aktualisiert werden, ohne dass eine Aktualisierung oder Abfrage erforderlich ist. Für einen tieferen Einblick in WebSockets mit DronaHQ klicken Sie hier.

Codebeispiel: Globales JS-Objekt

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

Datenabfragen

Verwenden Sie in DronaHQ startWebSocket und stopWebSocket innerhalb von Datenabfragen, um die WebSocket-Funktionalität zu integrieren.

• WebSocket-Abfrage starten: Stellt die WebSocket-Verbindung für ein bestimmtes Symbol her.
• WebSocket-Abfrage stoppen: Schließt die Verbindung sicher und löscht die UI-Tabelle.

Beispiel JSCode für das Löschen der Tabelle beim Laden der App:

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

WebSocket-Aktionen auslösen

Konfigurieren Sie Auslöser im Aktionsfluss Ihrer Schaltflächensteuerelemente:

1. Fügen Sie den Schaltflächen „Start“ und „Stopp“ eine Aktion „Datenabfrage ausführen“ hinzu.
2. Wählen Sie die entsprechende Datenabfrage aus (WebSocket starten oder WebSocket stoppen).

Workflow

1. Start: Geben Sie ein Symbol ein, klicken Sie auf „Start“, um die WebSocket-Verbindung zu initiieren.
2. Datenabruf und -aktualisierung: Die App ruft Live-Daten ab, zeigt sie an und aktualisiert die Tabelle dynamisch.
3. Kontinuierliche Updates: Die WebSocket-Verbindung streamt und aktualisiert kontinuierlich Daten.
4. Stop: Durch Klicken auf „Stop“ wird die Verbindung geschlossen und die Tabelle gelöscht.

Wichtige Überlegungen

• Codevalidierung und Sicherheit:Validieren und sichern Sie immer Ihren benutzerdefinierten Code.
• Richtiger Verbindungsabschluss:Schließen Sie WebSocket-Verbindungen, um Ressourcenlecks zu verhindern.

Dieses Projekt unterstreicht die Leistungsfähigkeit der WebSocket-Funktionen von DronaHQ für die Erstellung dynamischer Echtzeitanwendungen. Die Kombination aus einer benutzerfreundlichen Oberfläche und wiederverwendbarem Code erleichtert die Implementierung von Live-Datenstreaming für verschiedene Anwendungen.

Das obige ist der detaillierte Inhalt vonEinrichten von WebSocket in DronaHQ. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!