长连接的钟表程序

实验要求

实现1个钟表程序（服务），多个用户可以从该程序获得时间并在本地显示，用户也可以修改时间。

（1）用户程序可以在计算机上运行，也可以在手机上运行；

（2）至少3个用户程序可同时运行，时间每秒钟刷新；

(3) 1个用户修改了时间，所有用户的时间都要随着被改变；

(4) 推荐使用JavaScript、node.js、Websocket，以及Nginx实现；

(5) 可能存在跨域问题。

实验步骤

1. 准备环境和安装依赖：

计算机上安装 Node.js 和 npm。

创建一个新的文件夹，比如 "realtime-server"，进入该文件夹。

在终端中执行以下命令以初始化一个新的 Node.js 项目：

npm init -y

安装所需的依赖：

npm install express http ws moment cors

2. 编写代码：

创建一个名为 server.js 的文件，并将提供的代码复制粘贴到该文件中。

3. 运行服务器：

在终端中运行以下命令启动服务器：

node server.js

4. 连接到服务器：

可使用任何支持 WebSocket 的客户端连接到该服务器。可以使用浏览器的控制台或者 WebSocket 客户端工具，如 wscat。

打开浏览器控制台或运行 wscat -c ws://localhost:8080（确保端口号与服务器代码中指定的一致）连接到服务器。

5. 接收当前时间：

一旦连接建立，服务器会发送当前时间给客户端。

6. 发送消息更新时间：

在客户端（浏览器控制台或 wscat）中发送一个符合 ISO 8601 格式的时间字符串，服务器会更新时间并广播给所有连接的客户端。

7. 观察时间更新：

你会看到连接的客户端接收到新的时间，并且每秒钟都会更新一次。

8. 测试不合法时间：

尝试发送一个不符合 ISO 8601 格式的字符串到服务器，你会看到服务器会打印出 "Invalid date format" 的错误信息。

9.结束实验：

关闭服务器，按下 Ctrl + C 终止运行 node server.js 的命令。

这样就能成功地建立了一个实时时间更新的 WebSocket 服务器，并能够通过客户端与其进行交互。

程序代码

服务端server.js

const express = require('express');
const http = require('http');
const WebSocket = require('ws');
const moment = require('moment');const app = express();
const server = http.createServer(app);
const wss = new WebSocket.Server({ server });
const cors = require('cors');let currentTime = moment();
let modifiedTime = null; // 变量用于存储用户修改后的时间
app.use(cors());wss.on('connection', (ws) => {ws.send(currentTime.toISOString());ws.on('message', (message) => {const messageStr = message.toString(); // 将接收到的消息转换为字符串if (moment(messageStr, moment.ISO_8601, true).isValid()) {modifiedTime = moment(messageStr);currentTime = modifiedTime; // 更新当前时间为用户修改后的时间wss.clients.forEach((client) => {if (client.readyState === WebSocket.OPEN) {client.send(currentTime.toISOString());}});} else {console.log('Invalid date format:', messageStr);}});
});setInterval(() => {if (modifiedTime) {currentTime = modifiedTime;} else {currentTime = moment();}wss.clients.forEach((client) => {if (client.readyState === WebSocket.OPEN) {client.send(currentTime.toISOString());}});
}, 1000);server.listen(8080, () => {console.log('Server started on port 8080');
});

客户端Real-clock.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Real-time Clock</title><script src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
</head>
<body><h1 id="clock"></h1><label for="newTime">Enter New Time:</label><input type="datetime-local" id="newTime" placeholder="YYYY-MM-DDTHH:mm"><button onclick="updateTime()">Update Time</button><script>const socket = new WebSocket('ws://localhost:8080');socket.onmessage = function(event) {const currentTime = moment(event.data).format('YYYY-MM-DD HH:mm:ss');document.getElementById('clock').innerText = currentTime;};function updateTime() {const inputDateTime = document.getElementById('newTime').value;const formattedDateTime = moment(inputDateTime, 'YYYY-MM-DDTHH:mm').toISOString();socket.send(formattedDateTime);}setInterval(() => {socket.send('update');}, 1000);</script>
</body>
</html>

实验截图