#

luxiaotao1123

2024-06-08 23336250ab602a8931bd80a3c67941e2357b6ff0

#

 .env

@@ -1,2 +1,3 @@
COOL_API_BASE_URL = 'http://192.168.2.46:9090'
# COOL_API_BASE_URL = 'http://localhost:9090'
COOL_BASE_IP = '192.168.2.46'

COOL_BASE_PORT = 9090

 src/config/setting.js

@@ -1,4 +1,10 @@
export const API_BASE_URL = import.meta.env.COOL_API_BASE_URL;
export const IP = import.meta.env.COOL_BASE_IP;

export const PORT = import.meta.env.COOL_BASE_PORT;

export const API_BASE_URL = 'http://' + IP + ':' + PORT + '';

export const WEBSOCKET_BASE_URL = 'ws://' + IP + ':' + PORT + '';

export const TOKEN_HEADER_NAME = 'Authorization';


 src/core/warehouse.jsx

@@ -1,6 +1,7 @@
import { useState, useEffect, useRef, useMemo } from 'react';
import { useFrame } from '@react-three/fiber';
import * as THREE from 'three';
import WebSocketClient from './websocket'
import Tunnel from '../components/tunnel';
import Area from '../components/area';
import Shelf from '../components/shelf';
@@ -13,7 +14,7 @@
import agvRealDataList from '@/assets/data/agv';
import { getBoxData } from '../api/box';
import { getAgvData } from '../api/agv';
import { INTERVAL_TIME } from '@/config/setting'
import { INTERVAL_TIME, WEBSOCKET_BASE_URL, IP, PORT } from '@/config/setting'

let index = 0;

@@ -25,6 +26,8 @@
    const [boxData, setBoxData] = useState([])

    useEffect(() => {


        const timer = setInterval(() => {
            getBoxData().then(res => {
                // res.push({

 src/core/websocket.js

New file
@@ -0,0 +1,83 @@
import { WEBSOCKET_BASE_URL } from '@/config/setting';

export default class WebSocketClient {

    constructor(path) {
        this.url = WEBSOCKET_BASE_URL + path;
        this.webSocket = null;
        this.heartbeatInterval = null; // Store the interval ID
        this.heartbeatFrequency = 30000; // Heartbeat every 30 seconds
    }

    connect() {
        if (!this.url) {
            console.error('WebSocketClient: Cannot connect without url.');
            return;
        }

        this.webSocket = new WebSocket(this.url);

        this.webSocket.onopen = (event) => {
            console.log('websocket connection opened.');
            // Start the heartbeat
            this.startHeartbeat();
        };

        this.webSocket.onmessage = (event) => {
            // console.log('websocket message received:', event.data);
            this.onMessage(event.data);
        };

        this.webSocket.onerror = (event) => {
            console.error('websocket error observed:', event);
        };

        this.webSocket.onclose = (event) => {
            console.log('websocket connection closed!');
            // Clear the heartbeat
            this.stopHeartbeat();   
            this.reconnect();
        };
    }

    sendMessage(message) {
        if (this.webSocket && this.webSocket.readyState === WebSocket.OPEN) {
            this.webSocket.send(message);
        } else {
            console.error('WebSocketClient: Cannot send message, WebSocket connection is not open.');
        }
    }

    // Override
    onMessage(data) {
    }

    close() {
        if (this.webSocket && this.webSocket.readyState === WebSocket.OPEN) {
            this.webSocket.close();
        }
    }

    reconnect() {
        setTimeout(() => {
            console.log('WebSocketClient: Attempting to reconnect...');
            this.connect();
        }, 3000);
    }

    startHeartbeat() {
        if(this.heartbeatInterval) {
            clearInterval(this.heartbeatInterval);
        }
        this.heartbeatInterval = setInterval(() => {
            this.sendMessage('1');
        }, this.heartbeatFrequency);
    }

    stopHeartbeat() {
        if (this.heartbeatInterval) {
            clearInterval(this.heartbeatInterval);
            this.heartbeatInterval = null;
        }
    }
}