面对学生学习前端开发困难，教师难管理的问题，我们开发了一套Web前端开发实训平台。方便教师与学生进行网站的发布与浏览，平台具备在线CODE编辑器,直接输入代码完成前端开发代码的编写，系统自动生成预览的效果界面。该实训平台能与我们的物联网仿真系统联动，实现虚实结合。

物联网虚拟仿真系统准备

接线组成系统

拉入温湿度传感器，光照度传感器，PM2.5传感器，风扇，灯泡，LED屏，窗帘和网关，并接好线。

学员们在仿真软件中搭建系统，通过虚拟教学熟练监测系统的连线，为后续硬件组装奠定基础。

系统的主要设备及连线图介绍

物联网仿真系统可以帮助我们模拟和测试智能家居系统，以便在实际部署之前进行验证和优化。

网关：在物联网仿真系统中，网关是核心，负责模拟连接和管理所有智能设备。网关通过仿真网络模块模拟与其他设备的通信。

传感器设备：传感器设备如门窗传感器、烟雾传感器等通过仿真网络模块连接到网关，可以模拟环境变化的检测和触发智能家居场景的功能。

执行器：智能家居系统中的设备，通过仿真网络模块与中控设备连接，可以模拟远程控制和添加策略（传感器触发，自动开启）的功能。在物联网仿真系统中，连线图可以通过虚拟线路清晰展示各个智能设备之间的连接方式，以及设备与设备之间的连接关系。可以帮助用户理解智能家居系统的仿真架构和设备之间的通信流程

虚拟仿真系统Websocket测试

• 登录物联网虚拟仿真客户端

• 开启Websoket模式,打开模拟实验后，并打开Websoket的端口和服务，即可看到数据传输。

• 打开Websocket调试工具，可调试和测试设备。

Web前端开发在线平台连接虚拟仿真系统

Websocket前端开发在线平台实验介绍

• HTML是负责定义页面的结构与内容

• CSS是负责网页的样式与布局

• Javascript是实现网页的交互性和动态功能

保存后可预览界面

最终展示