我们最近添加了一个 HTTP WebSocket 网站示例
您可以从此链接下载项目:
https://github.com/MicrochipTech/PIC32MZW1_WebSocket_HTTP_Website
此应用程序演示了用户如何使用 WFI32-IoT 板上的 HTTP 网站运行 WebSocket 服务器。 板载温度传感器（MCP9808）和板载光传感器（OPT3001）数值通过websocket连接发送到浏览器并实时显示在图表上。 系统默认进入SoftAP模式，用户可以将电脑连接到WFI32-IoT Board，通过输入IP地址http://192.168.1.1浏览网页监控传感器值。 用户还可以在网站上将设备配置为STA模式连接目标AP，并通过输入设备IP地址访问网页监控传感器值。
AJAX VS WebSocket
我们一般會使用 AJAX 技术或 WebSocket 协议来支持浏览器上的实时数据传输。 PIC32MZW1/ WFI32E01 WiFi模块可以根据客户的需要, 支持 AJAX 和 WebSocket 协议。
与 AJAX 技术相比，WebSocket 具有以下优点：
1. 延迟时间短（快速响应），因为网页不需要不断轮询服务器来获取事件/数据, 也无需每次都创建新连接
2. 降低网络开销從而提高了网络性能
3. 允许服务器(设备端)发送数据而客户端(浏览器)不需发请求的信息。
使用 AJAX 技术，网页（客户端）向服务器（WFI32E设备）发送 HTTP 请求消息，服务器将数据传送到到网页，需要轮询来保持事件/数据的更新。
使用 WebSocket 技术，网页（客户端）创建与服务器（WFI32E设备)的 websocket 连接。 连接保持活动状态并提供双向通信。 服务器可以在没有客户端请求的情况下随时向客户端发送数据。 在这种情况下不需要轮询。
Websocket Integration
要启用 WebSocket 连接功能，用户需要确保通过 Harmony3 配置器(MHC)将 Web Socket Server Service 组件添加到 WFI32 项目中。
PIC32MZW1/WFI32E软件代码每500ms读取一次温度和光照强度传感器值，当websocket连接建立时，它會将传感器值以JSON格式发送到浏览器。
在网页中，javascripts 文件 web_pages\javascripts\get_temperature_and_light.js 會创建连接到 PIC32MZW1/WFI32 WebSocket 服务器的 WebSocket 通道，处理从 PIC32MZW1/WFI32 WebSocket 服务器接收到的数据并将其显示在图表中。 下面是相关的js代码：
运行应用程序
步骤:
1. 使用 MPLAB X IDE, 打开项目, 编译生成的代码并将其编程到硬件中
2. 在计算机上打开终端应用程序（例如：Tera 术语）。
连接到 COM 端口并配置串行设置，如下所示：
波特率：115200
数据：8位
奇偶校验：无
停止 : 1 位
流量控制：无
3. 开发板将以 AP 模式启动，SSID 为“DEMO_AP_SOFTAP”
4. 使用密码“password”将电脑连接到 开发板 AP SSID “DEMO_AP_SOFTAP”
5. 在电脑上打开浏览器，输入网址http://192.168.1.1
6. 单击左侧面板中的 "WebSocket Test"，温度和光照强度将显示在图表上并实时更新。
|
楼主
