福州网站制作怎样,台州快速建站公司,gif图片制作器,江苏建设官方网站实验要求
实现1个钟表程序#xff08;服务#xff09;#xff0c;多个用户可以从该程序获得时间并在本地显示#xff0c;用户也可以修改时间。
#xff08;1#xff09;用户程序可以在计算机上运行#xff0c;也可以在手机上运行#xff1b;
#xff08;2#xff…实验要求
实现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 langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleReal-time Clock/titlescript srchttps://cdn.jsdelivr.net/momentjs/latest/moment.min.js/script
/head
bodyh1 idclock/h1label fornewTimeEnter New Time:/labelinput typedatetime-local idnewTime placeholderYYYY-MM-DDTHH:mmbutton onclickupdateTime()Update Time/buttonscriptconst 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实验截图
打开 HTML 页面
将提供的 HTML 代码保存为Real-clock.html 文件并在浏览器中打开。
2. 初始显示
页面加载后你会看到一个标题为 Real-time Clock 的页面以及一个空白的时钟显示区域和一个用于输入新时间的输入框。 钟表程序 3. 连接到服务器
页面加载后客户端会尝试连接到 ws://localhost:8080 这个 WebSocket 服务器。
4. 接收当前时间
一旦连接建立服务器会发送当前时间给客户端并显示在页面上的时钟区域。
三个浏览器窗口模拟三个进程 三个浏览器窗口模拟三个进程 5. 输入新时间
在 Enter New Time 输入框中输入一个新的时间格式为 YYYY-MM-DDTHH
例如 2024-06-15T10:00。 6. 更新时间
点击 Update Time 按钮客户端会将新时间发送到服务器服务器接收并更新时间。
7. 观察时钟更新
页面上的时钟区域会显示为新输入的时间。 8. 定时更新
每隔一秒客户端会向服务器发送一个 update 消息服务器会将当前时间发送回客户端页面上的时钟区域会持续更新。
9. 结束交互
关闭浏览器标签或停止服务器结束交互。
存在的问题
在这个实验中存在一些潜在的问题和改进空间
- 时区处理当前实现中并未考虑时区的处理如果需要支持不同时区的用户需要进一步处理时区转换和显示。
- 客户端错误处理客户端发送的新时间格式错误时并未提供友好的提示用户可能无法得知输入的格式有误。
- 服务器端数据持久化当前实现中服务器端并未对时间数据进行持久化一旦服务器重启时间会被重置。可以考虑使用数据库或者其他持久化方式来保存时间数据。 实验展望
虽然这个实验已经实现了基本的实时时间更新功能但仍有一些方面可以进一步改进和扩展
- 用户体验优化可以进一步改进页面布局和交互方式使用户能够更方便地输入新时间并提供更友好的界面反馈。
- 安全性考虑在生产环境中需要考虑 WebSocket 连接的安全性防止恶意攻击和非授权访问。可以考虑添加身份验证、消息加密等安全机制。
- 性能优化当前的实现每秒都向客户端发送时间更新即使时间并未发生变化。可以通过在服务器端和客户端实现更智能的逻辑减少不必要的数据传输从而提升性能和效率。
实验总结
在这个实验中我们成功地构建了一个实时时间更新的 WebSocket 服务器并通过一个 HTML 页面与之进行交互。以下是实验的主要收获和总结
- 功能实现通过使用 Express、WebSocket 和 Moment.js 等技术我们成功地创建了一个实时时间更新的服务器并能够通过 WebSocket 实现与客户端的实时通信。
- 页面交互在 HTML 页面中我们通过 WebSocket 接收来自服务器的时间更新并能够通过输入框向服务器发送新的时间来更新时钟显示。
- 定时更新我们实现了定时向服务器发送更新请求的功能以保持页面上的时钟实时更新。 笔者将会非常感谢大家来完善这个程序
