DronaHQ での WebSocket のセットアップ

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

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

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

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

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

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

主な利点:

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

UI デザイン

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

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

WebSocket の実装

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

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

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

データクエリ

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

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

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

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

WebSocket アクションのトリガー

ボタン コントロールのアクション フローでトリガーを構成します:

1. 「開始」ボタンと「停止」ボタンに「データ クエリの実行」アクションを追加します。
2. 対応するデータ クエリを選択します (WebSocket の開始または WebSocket の停止)。

ワークフロー

1. 開始: シンボルを入力し、[開始] をクリックすると、WebSocket 接続が開始されます。
2. データの取得と更新: アプリはライブ データを取得して表示し、テーブルを動的に更新します。
3. 継続的更新: WebSocket 接続はデータを継続的にストリーミングし、更新します。
4. 停止: 「停止」をクリックすると接続が閉じられ、テーブルがクリアされます。

重要な考慮事項

• コードの検証とセキュリティ: カスタム コードを常に検証して保護します。
• 適切な接続の終了: リソース リークを防ぐために WebSocket 接続を閉じます。

このプロジェクトは、動的なリアルタイム アプリケーションを構築するための DronaHQ の WebSocket 機能の威力を強調します。 ユーザーフレンドリーなインターフェイスと再利用可能なコードを組み合わせることで、さまざまなアプリケーションにライブ データ ストリーミングを簡単に実装できます。

以上がDronaHQ での WebSocket のセットアップの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。