前端无须后端协助即可获取服务器时间

2023-12-06 23:33:05

没有后端支持，前端获取服务器时间的确可能面临挑战。传统的解决方案通常需要前端与后端交互，增加后端工作量。然而，随着技术的发展，现在有一种巧妙的方法可以绕过此限制，让前端直接获取服务器时间。

JSONP 技术

JSONP（JSON with Padding）是一种巧妙的技术，允许前端通过<script>标签跨域获取数据。它的工作原理是利用回调函数，服务器端返回的数据被包裹在一个回调函数中，而前端定义了这个回调函数。

前端代码如下：

function getServerTime(callback) {
  var script = document.createElement('script');
  script.src = 'https://example.com/time.php?callback=' + callback;
  document.body.appendChild(script);
}

后端代码如下（使用 PHP）：

<?php
$callback = $_GET['callback'];
echo "$callback(" . time() . ");";
?>

前端可以通过以下方式调用 getServerTime 函数：

getServerTime(function(time) {
  console.log(time); // 服务器时间
});

利用浏览器缓存

另一种方法是利用浏览器的缓存机制。当前端请求一个资源（例如图像或 CSS 文件）时，浏览器会将其缓存一段时间。前端可以利用这一点来获取服务器时间。

后端代码如下（使用 Nginx）：

location /time.png {
  add_header Cache-Control "public, max-age=3600";
  expires 3600;
  return 200 'PNG';
}

前端代码如下：

function getServerTime() {
  var img = new Image();
  img.onload = function() {
    console.log(this.lastModified); // 服务器时间
  };
  img.src = 'https://example.com/time.png';
}

使用 WebSockets

WebSockets 是一种双向通信协议，允许前端与后端建立持续连接。前端可以通过 WebSocket 连接向后端发送请求并接收响应，包括服务器时间。

后端代码如下（使用 Node.js）：

var WebSocketServer = require('websocket').server;
var server = new WebSocketServer({
  httpServer: require('http').createServer()
});

server.on('request', function(request) {
  var connection = request.accept('time-protocol');
  connection.sendUTF(Date.now().toString());
});

前端代码如下：

function getServerTime() {
  var ws = new WebSocket('ws://example.com:8080/time');
  ws.onmessage = function(event) {
    console.log(event.data); // 服务器时间
  };
}

其他方法

还有其他方法可以获取服务器时间，包括：