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.
Ce projet présente :
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 :
L'interface utilisateur comprend :
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.
<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>
Dans DronaHQ, utilisez startWebSocket
et stopWebSocket
dans les requêtes de données pour intégrer la fonctionnalité WebSocket.
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>
Configurez les déclencheurs dans le flux d'action de vos contrôles de boutons :
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!