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 연결을 시작하고 "중지"는 연결을 안전하게 닫고 테이블을 지웁니다.
3. 기호 입력 필드: 사용자가 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 기능을 통합합니다.

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

WebSocket 작업 트리거

버튼 컨트롤의 작업 흐름에서 트리거를 구성하세요.

1. "시작" 및 "중지" 버튼에 "데이터 쿼리 실행" 작업을 추가합니다.
2. 해당 데이터 쿼리를 선택합니다(WebSocket 시작 또는 WebSocket 중지).

워크플로우

1. 시작: 기호를 입력하고 "시작"을 클릭하면 WebSocket 연결이 시작됩니다.
2. 데이터 가져오기 및 업데이트: 앱이 실시간 데이터를 가져오고 표시하며 테이블을 동적으로 업데이트합니다.
3. 지속적인 업데이트: WebSocket 연결은 지속적으로 데이터를 스트리밍하고 업데이트합니다.
4. 중지: "중지"를 클릭하면 연결이 닫히고 테이블이 지워집니다.

중요 고려사항

• 코드 검증 및 보안: 항상 사용자 정의 코드를 검증하고 보호하세요.
• 적절한 연결 종료: 리소스 누출을 방지하려면 WebSocket 연결을 닫으세요.

이 프로젝트는 동적 실시간 애플리케이션 구축을 위한 DronaHQ의 WebSocket 기능의 힘을 강조합니다. 사용자 친화적인 인터페이스와 재사용 가능한 코드의 조합으로 다양한 애플리케이션에 대한 라이브 데이터 스트리밍을 쉽게 구현할 수 있습니다.

위 내용은 DronaHQ에서 WebSocket 설정의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!