面对学生学习前端开发困难，教师难管理的问题，我们开发了一套Web前端开发实训平台。方便教师与学生进行网站的发布与浏览，平台具备在线CODE编辑器,直接输入代码完成前端开发代码的编写，系统自动生成预览的效果界面。该实训平台能与我们的物联网仿真系统联动，实现虚实结合。
物联网虚拟仿真系统准备
接线组成系统
拉入温湿度传感器，光照度传感器，PM2.5传感器，风扇，灯泡，LED屏，窗帘和网关，并接好线。
学员们在仿真软件中搭建系统，通过虚拟教学熟练监测系统的连线，为后续硬件组装奠定基础。
系统的主要设备及连线图介绍
物联网仿真系统可以帮助我们模拟和测试智能家居系统，以便在实际部署之前进行验证和优化。
网关：在物联网仿真系统中，网关是核心，负责模拟连接和管理所有智能设备。网关通过仿真网络模块模拟与其他设备的通信。
传感器设备：传感器设备如门窗传感器、烟雾传感器等通过仿真网络模块连接到网关，可以模拟环境变化的检测和触发智能家居场景的功能。
执行器：智能家居系统中的设备，通过仿真网络模块与中控设备连接，可以模拟远程控制和添加策略（传感器触发，自动开启）的功能。在物联网仿真系统中，连线图可以通过虚拟线路清晰展示各个智能设备之间的连接方式，以及设备与设备之间的连接关系。可以帮助用户理解智能家居系统的仿真架构和设备之间的通信流程
| 序号 | 设备 | 供电电压 | 数量 |
|---|---|---|---|
| 1 | 网关 | DC24V | 1 |
| 2 | 温湿度传感器 | DC24V | 1 |
| 3 | 光照度传感器 | DC24V | 1 |
| 4 | PM2.5传感器 | DC24V | 1 |
| 5 | LED屏 | DC24V | 1 |
| 6 | 风扇 | DC12V | 1 |
| 7 | 灯泡 | DC12V | 1 |
| 8 | 窗帘 | DC12V | 1 |
物联网虚拟仿真系统Websocket测试
-
登录物联网虚拟仿真客户端
-
开启Websoket模式,打开模拟实验后，并打开Websoket的端口和服务，即可看到数据传输
-
打开Websocket调试工具，可调试和测试设备。
Web前端开发在线平台连接虚拟仿真系统
Websocket前端开发在线平台实验介绍
-
HTML是负责定义页面的结构与内容
-
CSS是负责网页的样式与布局
-
Javascript是实现网页的交互性和动态功能
保存后可预览界面
最终展示
