使用WebSocket协议从Arduino块发布数据并在Web浏览器上读取数据
这个例子展示了如何使用Simulink®Support Packag金宝appe for金宝app Arduino®Hardware来发布和订阅来自不同Arduino块的数据到WebSocket服务器，以及在WebSocket客户端中读取web浏览器上的数据。
金宝app支持Arduino电路板
Arduino MKR 1000
Arduino MKR WIFI 1010
Arduino Nano 33物联网
介绍
这个例子展示了如何为Arduino板采用WebSocket通信协议。该协议允许web浏览器(或任何其他客户端应用程序)和web服务器之间的交互，促进与WebSocket服务器之间的即时数据传输。浏览器中运行的JavaScript代码在网页和Arduino板之间建立了WebSocket连接。在网页上使用各种用户界面与部署在Arduino板上的Simulink模型进行通信。金宝app大多数浏览器支持WebSoc金宝appket协议，包括谷歌Chrome®、Microsoft Edge®、Internet Explorer®、Firefox®、Safari®和Opera®。
输入捕获块的计数器、频率和占空比值以及数字输入块的PWM信号占空比从Arduino板发布到WebSocket服务器。然而，你可以在浏览器上运行的客户端应用程序上改变LED ON/OFF位置和PWM值。客户端应用程序将这些值发送到运行在Arduino板上的服务器应用程序。
先决条件
我们建议您完成入门Arduino硬件的例子。
所需的硬件
本例使用Arduino MKR 1000板。您可以使用任何Arduino板从支持的板列表。金宝app
微型USB电缆
任务1:硬件连接设置
使用微型USB线将主机连接到Arduino板。Arduino板和上位机必须连接在同一个无线网络上才能通信成功。
连接PWM 1引脚3到输入捕获块的引脚10。
连接PWM 2的引脚8到数字输入模块的引脚7。
任务2:配置Simulink模型金宝app
这个支持包金宝app提供了一个预先配置的模型，用于在WebSocket服务器上发布数据。
要打开模型，在MATLAB®命令窗口运行以下命令:
open_system (“arduino_websocket_tutorial”）
模型可分为两部分:WebSocket发布和WebSocket订阅．
答:WebSocket发布
本节将来自Arduino板的数据发布到由IP地址和端口标识的WebSocket服务器。发布的数据是JSON格式的，WebSocket客户端可以对其进行解释以可视化数据。
1.发布子系统:由有限的计数器、输入捕获块和数字输入块组成。
要打开子系统，请在MATLAB命令窗口中运行以下命令:
open_system (“arduino_websocket_tutorial /出版”）
您可以在Publish子系统中配置以下参数:
有限。计数器
设置上限与…相反
20.．设置样品时间来
０.１秒。
b。输入捕捉
设置输入捕获引脚编号来
10．设置样品时间来
０.１秒。
c.数字输入模块
设置密码来
7．的销模式被设置为
默认的．设置样品时间来
０.１秒。
2.WebSocket发布:在WebSocket客户端上发布来自计数器和input Capture和Digital input块的输入数据。
你可以在WebSocket Publish块中配置以下参数:
一个设置。服务器端口来9000．可以根据您的Arduino板的服务器端口进行配置。确保为WebSocket Publish和WebSocket Subscribe块配置相同的端口号。
b。设置输入数量来4，以便它们与来自Publish子系统的输入和来自input Capture块的频率输入相对应。
b . WebSocket订阅
本节订阅由IP地址和端口标识的WebSocket服务器接收的数据。接收到的数据必须是JSON格式的，WebSocket客户端可以对其进行解释以操作数据。
1.订阅子系统:由一个LED和两个输出频率为1Hz和1000Hz的PWM模块组成。
要打开子系统，请在MATLAB命令窗口中运行以下命令:
open_system (“arduino_websocket_tutorial /订阅”）
在“订阅”子系统中可以配置以下参数:
一个数字写。
设置密码来
6连接Arduino板的板载LED。
b. PWM - 1
设置密码来
3.．指定的频率并设置想要的| 1000 |赫兹频率。
c。PWM 2
设置密码来
8．指定的频率并设置想要的| 1 |赫兹频率。
2.WebSocket订阅:订阅从LED和PWM模块接收的数据。
你可以在WebSocket订阅块中配置以下参数:
一个设置。港口来9000．可以根据您的Arduino板的服务器端口进行配置。确保为WebSocket Publish和WebSocket Subscribe块配置相同的端口号。
b.将数据源设置为获取JSON数据属性通过以下方式指定输出信息参数。本例使用默认值。
c。设置数量的输出来3.，以便它们与LED和两个PWM模块的输入相对应。
d。指定数据大小和数据类型作为1和uint8，用于所有三个输出。
e。设置样品时间来0．5秒。
任务3:运行Simuli金宝appnk模型
要选择您的Arduino板，请在硬件选项卡上,单击硬件设置．在配置参数对话框中硬件实现窗格中所支持的Arduino板列表中进行选择金宝app硬件板参数。点击应用．
要设置无线网络属性，请选择配置参数>硬件实现>目标硬件资源>无线网络属性．输入详细信息并单击应用．
在硬件选项卡中的金宝app模式部分中,选择机上运行然后点击构建、部署和启动．
Simu金宝applink模型部署在Arduino板上。一旦WebSocket客户端连接上，Arduino板就开始以JSON格式从计数器和Input Capture和Digital Input块发送数据到WebSocket服务器。
任务4:从WebSocket客户端访问数据
这个例子提供了一个基于javascript的网页浏览器仪表盘，Arduino仪表板，它可以读取WebSocket服务器中JSON格式的可用数据。
要访问这个仪表板并在默认的web浏览器中打开它，请在MATLAB命令窗口中运行以下命令:
网络(“Arduino_WebSocket_DashControl.html”，“浏览器”）
提示:在谷歌Chrome或Firefox浏览器中浏览网页的效果最好。
在Web浏览器中配置Arduino IP地址
的文件路径Arduino仪表板web页面。
导航到包含Arduino_WebSocket_Dashcontrol.html页面。
在任何编辑器中打开HTML页面。
在Arduino板上部署Simulink金宝app模型后诊断查看器对话框打开。你也可以去调试选项卡并单击诊断．
复制IP地址中提到的诊断查看器对话框。
将Arduino的IP地址和端口号粘贴到var主机和var港口字段的值。
仪表板使用JavaScript预配置，以将JSON数据发送到运行在使用IP地址标识的Arduino板上的服务器应用程序192.168.0.100和端口9000．
当模型在Arduino板上运行时，您可以执行和观察这些变化Arduino仪表板页面。
切换的领导的开关观察Arduino板上的引脚6。LED根据仪表板上开关的位置开启和关闭。
使用滑块来改变的占空比PWM - 1连接到Input Capture块。观察图表中的变化PWM - 1占空比参数。
观察图形中输入捕获块的1000Hz频率设置PWM - 1频率参数。
使用上、下箭头来改变占空比PWM - 2参数连接到数字输入块。点击集应用更改。观察图表中的变化数字输入端口。
的计数器从0增加到19，然后重置为0。
请注意:PWM - 1占空比使用滑块的数字输入模块可能无法准确读取引脚8上设置的参数。
其他可以尝试的事情
自定义Arduino仪表板页面用于不同的Arduino块和用户界面。
你也可以从以下列表中选择一个网站:
