DronaHQ での WebSocket のセットアップ-jsチュートリアル-php.cn

DronaHQ での WebSocket のセットアップ

Barbara Streisand

リリース： 2025-01-22 22:37:13

オリジナル

365 人が閲覧しました

DronaHQ の WebSocket 統合でリアルタイムデータの力を活用しましょう! このチュートリアルでは、定期的なページ更新や複雑なバックエンドソリューションの必要性を排除して、ライブデータストリーム用の対話型ダッシュボードを構築する方法を示します。再利用可能な関数と変数に DronaHQ のグローバル JS オブジェクトを活用し、アプリケーション全体でシームレスなライブ更新を可能にします。ユーザーエンゲージメントの強化やリアルタイム監視ダッシュボードの作成を目指す開発者に最適です。

Setting up WebSocket in DronaHQ

プロジェクトの概要: リアルタイムデータ視覚化

このプロジェクトでは以下を紹介します:

リアルタイムデータストリーミング: WebSocket エンドポイント (Binance の API など) に直接接続し、即時にデータを表示します。もう遅延はありません!
再利用可能な設計: WebSocket 接続ロジックはグローバル JS オブジェクトに常駐し、複数の DronaHQ アプリケーションに簡単にデプロイできます。
インタラクティブ UI: 動的インターフェイスにはライブ暗号通貨取引データ (または任意のデータストリーム) が表示され、新しいデータが到着すると自動的に更新されます。

グローバル JS オブジェクトを理解する

DronaHQ のグローバル JS オブジェクトは、アカウント全体でアクセスできる再利用可能な JavaScript 関数と変数を提供します。データバインディング、イベントアクション、JS 変換などで使用します。保存すると、どのアプリでもすぐに利用できるようになり、コードの再利用と効率化が促進されます。

主な利点:

再利用可能な JavaScript 関数と変数。
すべてのアプリケーションにわたるグローバルなアクセシビリティ。
コードの柔軟性が強化され、冗長性が削減されます。

UI デザイン

Setting up WebSocket in DronaHQ

ユーザーインターフェースには次のものが含まれます:

リアルタイムデータテーブル: 選択したシンボル (BTCUSDT など) のライブ取引データを表示し、新しい WebSocket データで自動的に更新します。列には、シンボル、時間、価格が含まれます。
WebSocket コントロールボタン: 「開始」は WebSocket 接続を開始し、「停止」は WebSocket 接続を安全に閉じてテーブルをクリアします。
シンボル入力フィールド: ユーザーは、WebSocket 接続の取引ペアまたはデータ識別子を指定できます。

WebSocket の実装

WebSocket は単一の TCP 接続上で全二重通信を提供し、サーバーがデータを利用可能になるとクライアントにプッシュできるようにします。これは、財務ダッシュボードやチャットプログラムなどのリアルタイムアプリケーションに最適です。 DronaHQ の WebSocket 統合により、更新やポーリングを行わずに即座に更新される動的インターフェイスが作成されます。 DronaHQ を使用した WebSocket について詳しくは、ここをクリック。

コード例: グローバル JS オブジェクト

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

ログイン後にコピー

データクエリ

DronaHQ では、データクエリ内で startWebSocket と stopWebSocket を使用して WebSocket 機能を統合します。

Setting up WebSocket in DronaHQ

WebSocket クエリの開始: 指定されたシンボルの WebSocket 接続を確立します。
WebSocket クエリの停止: 接続を安全に閉じ、UI テーブルをクリアします。

アプリのロード時にテーブルをクリアする例 JSCode:

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

ログイン後にコピー