页面动态显示服务器时间

基础概念

页面动态显示服务器时间是指在网页上实时显示服务器当前的时间。这种功能通常通过前端页面与后端服务器进行交互来实现。服务器时间可以用于各种场景，如在线聊天、订单处理、日志记录等。

类型

轮询：前端定时向服务器发送请求，获取服务器时间并更新页面。
WebSocket：通过WebSocket协议建立持久连接，服务器可以实时推送时间更新到前端。
Server-Sent Events (SSE)：服务器可以向浏览器推送事件，前端通过监听这些事件来更新时间。

应用场景

在线聊天：显示服务器时间，确保消息的时间戳准确。
订单处理：记录订单创建和处理的时间，便于后续查询和审计。
日志记录：记录系统操作的时间，便于故障排查和分析。

实现示例

使用轮询

后端（Node.js）

const express = require('express');
const app = express();
const port = 3000;

app.get('/server-time', (req, res) => {
  const serverTime = new Date().toISOString();
  res.send(serverTime);
});

app.listen(port, () => {
  console.log(`Server running at http://localhost:${port}`);
});

前端（HTML + JavaScript）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Server Time</title>
</head>
<body>
  <h1>Server Time: <span id="server-time"></span></h1>
  <script>
    function updateServerTime() {
      fetch('/server-time')
        .then(response => response.text())
        .then(time => {
          document.getElementById('server-time').innerText = time;
        });
    }

    setInterval(updateServerTime, 1000);
    updateServerTime(); // Initial call
  </script>
</body>
</html>

使用WebSocket

后端（Node.js + WebSocket）

const express = require('express');
const http = require('http');
const { Server } = require('socket.io');

const app = express();
const server = http.createServer(app);
const io = new Server(server);

server.listen(3000, () => {
  console.log('Server running at http://localhost:3000');
});

setInterval(() => {
  const serverTime = new Date().toISOString();
  io.emit('server-time', serverTime);
}, 1000);

前端（HTML + JavaScript）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Server Time</title>
</head>
<body>
  <h1>Server Time: <span id="server-time"></span></h1>
  <script src="/socket.io/socket.io.js"></script>
  <script>
    const socket = io();

    socket.on('server-time', (time) => {
      document.getElementById('server-time').innerText = time;
    });
  </script>
</body>
</html>