<template>
    <div>
        <h1>當(dāng)前時(shí)間: {{ currentTime }}</h1>
    </div>
</template>

<script lang="ts" setup>
    import { ref, onMounted, onUnmounted } from 'vue';
    const currentTime = ref('');
    let intervalId;

    const fetchServerTime = async () => {
        try {
            const response = await fetch('/api/server-time'); // 替換為實(shí)際的API地址
            const data = await response.json();
            currentTime.value = new Date(data.serverTime).toLocaleString();
        } catch (error) {
            console.error('獲取服務(wù)器時(shí)間失敗:', error);
        }
    };

    onMounted(() => {
        fetchServerTime();
        intervalId = setInterval(fetchServerTime, 60000); // 每分鐘請(qǐng)求一次
    });

    onUnmounted(() => {
        clearInterval(intervalId);
    });
</script>

<template>
    <div>
        <h1>當(dāng)前時(shí)間: {{ currentTime }}</h1>
    </div>
</template>

<script lang="ts" setup>
    import { ref, onMounted, onUnmounted } from 'vue';
    const currentTime = ref('');
    let socket;

    const updateTime = (time) => {
        currentTime.value = new Date(time).toLocaleString();
    };

    onMounted(() => {
        socket = new WebSocket('ws://your-websocket-url'); // 替換為實(shí)際的WebSocket地址

        socket.onmessage = (event) => {
            const data = JSON.parse(event.data);
            updateTime(data.serverTime);
        };

        socket.onopen = () => {
            console.log('WebSocket連接已打開');
        };

        socket.onclose = () => {
            console.log('WebSocket連接已關(guān)閉');
        };
    });

    onUnmounted(() => {
        if (socket) {
            socket.close(); // 關(guān)閉WebSocket連接
        }
    });
</script>

<template>
    <div>
        <h1>校正后的當(dāng)前時(shí)間: {{ correctedTime }}</h1>
    </div>
</template>

<script lang="ts" setup>
    import { ref, onMounted } from 'vue';
    const correctedTime = ref('');
    let timeOffset = 0;

    const fetchServerTime = async () => {
        try {
            const response = await fetch('/api/server-time'); // 替換為實(shí)際的API地址
            const data = await response.json();
            const serverTime = new Date(data.serverTime).getTime();
            const localTime = Date.now();
            timeOffset = serverTime - localTime; // 計(jì)算時(shí)間差
        } catch (error) {
            console.error('獲取服務(wù)器時(shí)間失敗:', error);
        }
    };

    const updateCorrectedTime = () => {
        const now = new Date(Date.now() + timeOffset);
        correctedTime.value = now.toLocaleString();
    };

    onMounted(() => {
        fetchServerTime().then(() => {
            updateCorrectedTime();
            setInterval(updateCorrectedTime, 1000); // 每秒更新一次
        });
    });
</script>

<template>
    <div>
        <h1>當(dāng)前時(shí)間: {{ currentTime }}</h1>
    </div>
</template>

<script lang="ts" setup>
    import { ref, onMounted } from 'vue';
    import { NTPClient } from 'ntpjs'; // 需要安裝ntpjs庫
    const currentTime = ref('');

    const fetchNTPTime = async () => {
        const client = new NTPClient();
        try {
            const time = await client.getTime();
            currentTime.value = new Date(time).toLocaleString();
        } catch (error) {
            console.error('獲取NTP時(shí)間失敗:', error);
        }
    };

    onMounted(() => {
        fetchNTPTime();
        setInterval(fetchNTPTime, 60000); // 每分鐘請(qǐng)求一次
    });
</script>

<template>
    <div>
        <h1>當(dāng)前時(shí)間: {{ currentTime }}</h1>
    </div>
</template>

<script lang="ts" setup>
    import { ref, onMounted, onUnmounted } from 'vue';
    const currentTime = ref('');
    let eventSource;

    onMounted(() => {
        eventSource = new EventSource('/api/time-stream'); // 替換為實(shí)際的SSE地址

        eventSource.onmessage = (event) => {
            const data = JSON.parse(event.data);
            currentTime.value = new Date(data.serverTime).toLocaleString(); // 假設(shè)服務(wù)器發(fā)送的時(shí)間為ISO格式
        };

        eventSource.onerror = (error) => {
            console.error('SSE連接錯(cuò)誤:', error);
        };
    });

    onUnmounted(() => {
        if (eventSource) {
            eventSource.close(); // 關(guān)閉SSE連接
        }
    });
</script>