Maison > interface Web > js tutoriel > Configuration de WebSocket dans DronaHQ

Configuration de WebSocket dans DronaHQ

Barbara Streisand
Libérer: 2025-01-22 22:37:13
original
364 Les gens l'ont consulté

Exploitez la puissance des données en temps réel avec l'intégration WebSocket de DronaHQ ! Ce didacticiel montre la création d'un tableau de bord interactif pour les flux de données en direct, éliminant ainsi le besoin d'actualisations constantes des pages et de solutions back-end complexes. Nous exploiterons les objets Global JS de DronaHQ pour les fonctions et variables réutilisables, permettant des mises à jour en direct transparentes dans vos applications. Idéal pour les développeurs souhaitant améliorer l'engagement des utilisateurs ou créer des tableaux de bord de surveillance en temps réel.

Setting up WebSocket in DronaHQ

Aperçu du projet : Visualisation des données en temps réel

Ce projet présente :

  • Diffusion de données en temps réel : Connexion directe aux points de terminaison WebSocket (comme l'API de Binance) pour un affichage instantané des données. Fini les retards !
  • Conception réutilisable : La logique de connexion WebSocket réside dans les objets Global JS, facilement déployés sur plusieurs applications DronaHQ.
  • UI interactive : Une interface dynamique affiche les données commerciales de crypto-monnaie en direct (ou tout flux de données), mises à jour automatiquement à mesure que de nouvelles données arrivent.

Comprendre les objets Global JS

Les objets JS globaux de DronaHQ fournissent des fonctions et des variables JavaScript réutilisables accessibles sur l'ensemble de votre compte. Utilisez-les dans la liaison de données, les actions d'événement, la transformation JS, etc. Une fois enregistrés, ils sont facilement disponibles dans n'importe quelle application, favorisant la réutilisation et l'efficacité du code.

Avantages clés :

  • Fonctions et variables JavaScript réutilisables.
  • Accessibilité mondiale sur toutes les applications.
  • Flexibilité du code améliorée et redondance réduite.

Conception de l'interface utilisateur

Setting up WebSocket in DronaHQ

L'interface utilisateur comprend :

  1. Tableau de données en temps réel : Affiche les données commerciales en direct pour le symbole sélectionné (par exemple, BTCUSDT), mises à jour automatiquement avec les nouvelles données WebSocket. Les colonnes incluent le symbole, l'heure et le prix.
  2. Boutons de contrôle WebSocket : "Démarrer" initie la connexion WebSocket et "Arrêter" la ferme en toute sécurité et vide la table.
  3. Champ de saisie du symbole : Permet aux utilisateurs de spécifier la paire de trading ou l'identifiant de données pour la connexion WebSocket.

Implémentation WebSocket

Les WebSockets fournissent une communication en duplex intégral sur une seule connexion TCP, permettant aux serveurs de transmettre les données aux clients dès qu'elles deviennent disponibles. C'est parfait pour les applications en temps réel telles que les tableaux de bord financiers et les programmes de chat. L'intégration WebSocket de DronaHQ crée des interfaces dynamiques qui se mettent à jour instantanément sans actualisation ni interrogation. Pour une analyse plus approfondie des WebSockets avec DronaHQ, cliquez ici.

Exemple de code : objet JS global

<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>
Copier après la connexion

Requêtes de données

Dans DronaHQ, utilisez startWebSocket et stopWebSocket dans les requêtes de données pour intégrer la fonctionnalité WebSocket.

Setting up WebSocket in DronaHQ

  • Démarrer la requête WebSocket : Établit la connexion WebSocket pour un symbole donné.
  • Arrêtez la requête WebSocket : Ferme la connexion en toute sécurité et efface la table de l'interface utilisateur.

Exemple JSCode pour vider la table lors du chargement de l'application :

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

Déclenchement d'actions WebSocket

Configurez les déclencheurs dans le flux d'action de vos contrôles de boutons :

Setting up WebSocket in DronaHQ

  1. Ajoutez une action « Exécuter une requête de données » aux boutons « Démarrer » et « Arrêter ».
  2. Sélectionnez la requête de données correspondante (Démarrer WebSocket ou Arrêter WebSocket).

Flux de travail

  1. Démarrer : Entrez un symbole, cliquez sur "Démarrer", initiant la connexion WebSocket.
  2. Récupération et mise à jour des données : L'application récupère et affiche les données en direct, mettant à jour la table de manière dynamique.
  3. Mises à jour continues : La connexion WebSocket diffuse et met à jour les données en continu.
  4. Arrêter : Cliquer sur "Stop" ferme la connexion et efface le tableau.

Considérations importantes

  • Validation et sécurité du code : Validez et sécurisez toujours votre code personnalisé.
  • Fermeture correcte des connexions : Fermez les connexions WebSocket pour éviter les fuites de ressources.

Ce projet met en évidence la puissance des capacités WebSocket de DronaHQ pour créer des applications dynamiques en temps réel. La combinaison d'une interface conviviale et d'un code réutilisable facilite la mise en œuvre du streaming de données en direct pour diverses applications.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal