如何确保JavaScript中的时间同步？

JS 时间同步源码详解

在前端开发中，获取当前时间通常使用new Date()，这种方式获取的是操作系统的时间，用户可以随意修改系统时间，导致时间不准确，当需要与服务器时间进行对比时，前端展示可能会出错，尤其是处理过期数据和缓存时，使用服务器时间来同步前端时间变得尤为重要。

源码解析

1. synctime工具

一个典型的时间同步工具是synctime，通过fetch 请求从服务器获取时间并同步到前端，以下是其核心代码：

import { sync, time, date } from 'synctime';
async function getJSON() {
    let url = 'https://www.npmjs.com/search?q=';
    try {
        let response = await fetch(url);
        console.log(response.headers.get('date')); // 打印服务器时间
        sync(response.headers.get('date')); // 同步时间
    } catch (error) {
        // 错误处理
    }
    return response.body;
}
getJSON(); // 调用函数

2. 实现细节

let diffMillisecond: number = 0; // 初始化时间差值
// 获取当前时间的函数
const getCurrentTime = (): number => (new Date()).getTime();
// 同步时间的函数
const sync = (time: Date | string): void => {
    if (!time) {
        diffMillisecond = 0;
        return;
    }
    const syncTime = time instanceof Date ? time.getTime() : new Date(time).getTime();
    diffMillisecond = syncTime  getCurrentTime(); // 计算时间差值
};
// 获取同步后的时间戳
const time = () => getCurrentTime() + diffMillisecond;
// 获取同步后的日期对象
const date = () => new Date(time());

示例应用

1. 显示当前时间

function showTime() {
    setInterval(() => {
        var nowTime = new Date();
        var nowYear = nowTime.getFullYear().toString();
        var nowMonth = (nowTime.getMonth() + 1).toString();
        if (nowMonth < 10) nowMonth = "0" + nowMonth;
        var nowDate = nowTime.getDate().toString();
        if (nowDate < 10) nowDate = "0" + nowDate;
        var nowHours = nowTime.getHours().toString();
        if (nowHours < 10) nowHours = "0" + nowHours;
        var nowMinutes = nowTime.getMinutes().toString();
        if (nowMinutes < 10) nowMinutes = "0" + nowMinutes;
        var nowSeconds = nowTime.getSeconds().toString();
        if (nowSeconds < 10) nowSeconds = "0" + nowSeconds;
        document.getElementById("clock").innerHTML = nowYear + "/" + nowMonth + "/" + nowDate + " " + nowHours + ":" + nowMinutes + ":" + nowSeconds;
    }, 1000);
}
showTime();

2. 同步本地时间和服务器时间

模拟初始化本地时间和服务器时间，并计算时间差值：

let initLocalTime = new Date('2018/10/10 12:00'); // 模拟初始化本地时间
let serverTime = new Date(); // 模拟当前服务器时间
let timeDiff = serverTime  initLocalTime; // 计算时间差值

每次初始化moment 对象时加上差值，再返回对象：

const localMoment = moment().add(timeDiff, 'milliseconds'); // 同步后的moment对象

相关问题与解答

问题1: 为什么需要使用服务器时间而不是前端时间？

答：因为前端时间可以通过用户手动修改操作系统时间来进行篡改，而服务器时间相对稳定且不易被篡改，在需要进行精确时间计算或验证的场景下，使用服务器时间可以确保数据的准确性和一致性。

问题2: 如何处理网络延迟对时间同步的影响？

答：网络延迟是不可避免的，可以通过以下方式尽量减少其影响：选择低延迟的网络环境；多次请求取平均值；使用高精度的时间同步协议如 NTP（Network Time Protocol），还可以在客户端缓存服务器时间，以减少频繁请求带来的延迟。