Menyediakan WebSocket dalam DronaHQ

Manfaatkan kuasa data masa nyata dengan penyepaduan WebSocket DronaHQ! Tutorial ini menunjukkan membina papan pemuka interaktif untuk strim data langsung, menghapuskan keperluan untuk penyegaran halaman yang berterusan dan penyelesaian bahagian belakang yang kompleks. Kami akan memanfaatkan Objek JS Global DronaHQ untuk fungsi dan pembolehubah boleh guna semula, membolehkan kemas kini langsung yang lancar merentas aplikasi anda. Sesuai untuk pembangun yang bertujuan untuk meningkatkan penglibatan pengguna atau mencipta papan pemuka pemantauan masa nyata.

Gambaran Keseluruhan Projek: Visualisasi Data Masa Nyata

Projek ini mempamerkan:

• Penstriman data masa nyata: Sambungan terus ke titik akhir WebSocket (seperti API Binance) untuk paparan data segera. Tiada lagi kelewatan!
• Reka bentuk boleh guna semula: Logik sambungan WebSocket berada dalam Objek JS Global, digunakan dengan mudah merentas berbilang aplikasi DronaHQ.
• UI Interaktif: Antara muka dinamik memaparkan data perdagangan mata wang kripto langsung (atau mana-mana aliran data), mengemas kini secara automatik apabila data baharu tiba.

Memahami Objek JS Global

Objek JS Global DronaHQ menyediakan fungsi dan pembolehubah JavaScript boleh guna semula yang boleh diakses merentas keseluruhan akaun anda. Gunakannya dalam Pengikatan Data, Tindakan Acara, Transformasi JS dan banyak lagi. Setelah disimpan, ia tersedia dalam mana-mana apl, mempromosikan penggunaan semula dan kecekapan kod.

Kelebihan Utama:

• Fungsi dan pembolehubah JavaScript boleh guna semula.
• Kebolehcapaian global merentas semua aplikasi.
• Fleksibiliti kod dipertingkatkan dan pengurangan redundansi.

Reka Bentuk UI

Antara muka pengguna termasuk:

1. Jadual Data Masa Nyata: Memaparkan data perdagangan langsung untuk simbol yang dipilih (cth., BTCUSDT), mengemas kini secara automatik dengan data WebSocket baharu. Lajur termasuk Simbol, Masa dan Harga.
2. Butang Kawalan WebSocket: "Mula" memulakan sambungan WebSocket dan "Berhenti" menutupnya dengan selamat dan mengosongkan jadual.
3. Medan Input Simbol: Membenarkan pengguna menentukan pasangan dagangan atau pengecam data untuk sambungan WebSocket.

Pelaksanaan WebSocket

WebSockets menyediakan komunikasi dupleks penuh melalui satu sambungan TCP, membolehkan pelayan menolak data kepada pelanggan apabila ia tersedia. Ini sesuai untuk aplikasi masa nyata seperti papan pemuka kewangan dan program sembang. Penyepaduan WebSocket DronaHQ mencipta antara muka dinamik yang mengemas kini serta-merta tanpa menyegarkan atau mengundi. Untuk menyelam lebih mendalam ke dalam WebSockets dengan DronaHQ, klik di sini.

Contoh Kod: Objek 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>

Pertanyaan Data

Dalam DronaHQ, gunakan startWebSocket dan stopWebSocket dalam Pertanyaan Data untuk menyepadukan kefungsian WebSocket.

• Mulakan Pertanyaan WebSocket: Mewujudkan sambungan WebSocket untuk simbol yang diberikan.
• Hentikan Pertanyaan WebSocket: Menutup sambungan dengan selamat dan mengosongkan jadual UI.

Contoh JSCode untuk mengosongkan jadual pada beban apl:

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

Mencetuskan Tindakan WebSocket

Konfigurasikan pencetus dalam Aliran Tindakan kawalan butang anda:

1. Tambahkan tindakan "Jalankan Pertanyaan Data" pada butang "Mula" dan "Berhenti".
2. Pilih pertanyaan data yang sepadan (Mulakan WebSocket atau Hentikan WebSocket).

Aliran Kerja

1. Mula: Masukkan simbol, klik "Mula," memulakan sambungan WebSocket.
2. Pengambilan & Kemas Kini Data: Apl mengambil dan memaparkan data langsung, mengemas kini jadual secara dinamik.
3. Kemas Kini Berterusan: Sambungan WebSocket terus menstrim dan mengemas kini data.
4. Berhenti: Mengklik "Berhenti" menutup sambungan dan mengosongkan jadual.

Pertimbangan Penting

• Pengesahan & Keselamatan Kod: Sentiasa sahkan dan selamatkan kod tersuai anda.
• Penutupan Sambungan yang Betul: Tutup sambungan WebSocket untuk mengelakkan kebocoran sumber.

Projek ini menyerlahkan kuasa keupayaan WebSocket DronaHQ untuk membina aplikasi masa nyata yang dinamik. Gabungan antara muka mesra pengguna dan kod boleh guna semula memudahkan untuk melaksanakan penstriman data langsung untuk pelbagai aplikasi.

Atas ialah kandungan terperinci Menyediakan WebSocket dalam DronaHQ. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!