这个教程将会教会你怎么用Arduino搭建一个简单的Web服务器,包含了设置和运行的所有细节,让我们开始吧。
开始之前,你需要了解一些基本的HTML,不用担心,这非常简单,如果你从来没有做过HTML,可以去w3schools上看看教程。
这个服务器不会做太花哨的事情,但是想要显示连接到引脚的设备的数据或者想要从网页上与电路交互的人来说,它非常有用。如果这不能满足你的需求,可以尝试RaspberryPi网络服务器。
如果你是编码新手,或者对一些基础知识感兴趣,请继续阅读,否则你可以跳过这一节,然后到设置Web服务器与SD卡部分。
首先,定义一个mac地址,下面这个地址在大多数家庭网络中应该是可以的。如果你知道自己到底要的是什么,请随意更改。
其次,定义一个IP地址,这可以通过简单地调用IPAddress类来完成。确保IP地址不会冲突。
第
三,设置服务器监听的端口号。默认情况下,普通的HTTP运行在80端口上。如果你了默认值,那么当你在浏览器中访问网页时,你将需要使用定义端口。例如,如果你的端口是14213,那么地址就会是这样的,192.168.1.177:14213
最后,在setup函数中,初始化以太网设备。一旦初始化完成,只需调用server.begin(),现在应该能够监听连接,并在被访问时做出响应。
在循环函数中,需要在每次循环时检查是否有新的连接。如果检测到新的连接,就执行网页逻辑代码。
输出HTML可以通过调用client.println()或client.print()来完成,并将文本作为参数。
另一种选择是将HTML文件存储在SD卡上,你可以从SD卡上访问和加载。然后您可以执行AJAX请求来更新网页上的元素。
当处理完网页后,应该延迟一小段时间,以确保客户端得到数据。一秒左右的时间后,直接关闭与客户端的连接。
需要注意的是,如果您确实插入了SD卡,但没有使用,那么可能会让sketch与Arduino产生通讯问题。为了避免这种情况发生,请在设置函数中添加以下两行。
要快速让Arduino网络服务器启动并运行,只需打开sketch并复制并粘贴下面的代码。
它每5秒刷新一次Arduino的模拟引脚的值,这会儿只是随机值,除非他们连接了一个实际的设备或传感器。
如果你决定走SD卡路线的Arduino网络服务器,HTML文件需要在你的电脑上创建,然后复制到SD卡上。
从SD卡加载网页的一个好处是,你可以有更复杂的页面,而不需要写数百个client.write。它还有助于减少内存占用。
在访问SD卡之前,需要导入SD包,并在设置函数中初始化它。设置函数中的check会查看是否可以访问卡,否则会在串口监视器中抛出一个错误。
只需使用sd.open(filename)打开文件。使用if语句确保文件存在,然后循环浏览文件的内容,直到到达文件末尾。
有时候你会想通过网页控制一个设备或传感器,在本节中,我们看看如何使用AJAX执行请求和更新,页面不会整个被更新,只需更新需要更新的部分。
AJAX的工作原理是向服务器发送一个请求,然后服务器会检查头中是否存在字符串ajaxrefresh或ledstatus。如果存在,服务器生成相关数据并返回。
然后JavaScript会找到相关的具有正确id的HTML元素,然后用AJAX请求的响应替换innerHTML。
下面的例子是通过GET变量ajaxrefresh向Arduino上运行的Web服务器发送请求。如果服务器返回数据,它将替换具有idanalogue_data的元素的innerHTML。
每当通过AJAX请求服务器时,下面的两个函数就会被调用,它们非常简单,第一个函数读取模拟引脚并返回相关数据。
第二个函数将根据当前状态打开或关闭REDLED。它还会返回LED的状态,以便AJAX能够更新网页上的值。
下面的例子有所有的HTML和JavaScript完全由Arduino生成。JavaScript向Arduino服务器发出AJAX请求,服务器根据它提供的结果更新页面。
通过在Arduino上生成所有代码,Arduino会给出运行空间不足的警告,如果你想在页面上有大量的传感器,最好把HTML存放在SD卡上。