Heim >Web-Frontend >js-Tutorial >Einrichten von WebSocket in DronaHQ

Einrichten von WebSocket in DronaHQ

Barbara Streisand
Barbara StreisandOriginal
2025-01-22 22:37:13447Durchsuche

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.

Setting up WebSocket in DronaHQ

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

Setting up WebSocket in DronaHQ

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

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

Datenabfragen

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

Setting up WebSocket in DronaHQ

  • 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:

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

WebSocket-Aktionen auslösen

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

Setting up WebSocket in DronaHQ

  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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn