DronaHQ에서 WebSocket 설정-JS 튜토리얼-php.cn

DronaHQ에서 WebSocket 설정

Barbara Streisand

풀어 주다： 2025-01-22 22:37:13

원래의

408명이 탐색했습니다.

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은 단일 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>

로그인 후 복사