【得捷电子Follow me第4期】汇总及扩展任务：Web Server网页服务器

alanlan86

【得捷电子Follow me第4期】汇总及扩展任务：Web Server网页服务器 [复制链接]

<i class="pstatus"> 本帖最后由 alanlan86 于 2024-2-25 18:09 编辑 </i>

# 综合汇总
- 帖子链接接汇总：

[【得捷电子Follow me第4期】W5500-EVB-Pico|开箱贴](https://bbs.eeworld.com.cn/thread-1269950-1-1.html "【得捷电子Follow me第4期】W5500-EVB-Pico|开箱贴")

[【得捷电子Follow me第4期】入门任务|基础任务一：搭建环境及ping网络](https://bbs.eeworld.com.cn/thread-1271784-1-1.html "【得捷电子Follow me第4期】入门任务|基础任务一：搭建环境及ping网络")

[【得捷电子Follow me第4期】基础任务二：TCP Server服务器创建及抓包分析](https://bbs.eeworld.com.cn/thread-1272501-1-1.html " 【得捷电子Follow me第4期】基础任务二：TCP Server服务器创建及抓包分析")

[【得捷电子Follow me第4期】进阶任务：从NTP服务器获取时间并显示](https://bbs.eeworld.com.cn/thread-1272545-1-1.html "【得捷电子Follow me第4期】进阶任务：从NTP服务器获取时间并显示")

[【得捷电子Follow me第4期】终极任务：FTP服务器技术实现及分析总结](https://bbs.eeworld.com.cn/thread-1272557-1-1.html "【得捷电子Follow me第4期】终极任务：FTP服务器技术实现及分析总结")

# 扩展：Web Server测试

# 目标
- 通常的蓝牙做简单的I/O控制或者传感器数据读取，都需要依赖于一个App或者最简单也需要一个微信小程序。
- 如果对于移动端开发不了解的小伙伴，可以尝试考虑用Web的方式，将访问的界面内置在Web（html）开发上。以以太网为接口，通过浏览器即可登入开发板端，实现控制和数据访问。

- 本例程简单演示通过circuitpython实现I/O的控制。[若需要更复杂的界面或控制，可以扩展web网页界面和开发板的命令响应端]

# 硬件

![](https://micropython.org/resources/micropython-media/boards/W5500_EVB_PICO/W5500-EVB-Pico.jpg)

- 采用Pico W5500 EVB的开发板，通过以太网网线连接路由器或者交换器，即可实现通信。
- 本地端可以考虑LCD或者OLED进行显示，方便简单的人机交互。

# 软件

## 网络部分
### 库文件
- 需要用到的库有如下：

```python
import adafruit_requests as requests
from adafruit_wiznet5k.adafruit_wiznet5k import *
from adafruit_wsgi.wsgi_app import WSGIApp
import adafruit_wiznet5k.adafruit_wiznet5k_wsgiserver as server
import adafruit_wiznet5k.adafruit_wiznet5k_socket as socket

```

### W5500初始化
- 配置SPI，将W5500以太网控制器进行初始化，同时配置采用DHCP。

```python
##SPI0
SPI0_SCK = board.GP18
SPI0_TX = board.GP19
SPI0_RX = board.GP16
SPI0_CSn = board.GP17

##reset
W5x00_RSTn = board.GP20

print("Wiznet5k WebServer Test(DHCP)")

# Setup your network configuration below
# random MAC, later should change this value on your vendor ID
MY_MAC = (0x00, 0x01, 0x02, 0x03, 0x04, 0x05)
IP_ADDRESS = (192, 168, 1, 100)
SUBNET_MASK = (255, 255, 255, 0)
GATEWAY_ADDRESS = (192, 168, 1, 1)
DNS_SERVER = (8, 8, 8, 8)

led = digitalio.DigitalInOut(board.GP25)
led.direction = digitalio.Direction.OUTPUT

ethernetRst = digitalio.DigitalInOut(W5x00_RSTn)
ethernetRst.direction = digitalio.Direction.OUTPUT

# For Adafruit Ethernet FeatherWing
cs = digitalio.DigitalInOut(SPI0_CSn)

# cs = digitalio.DigitalInOut(board.D5)
spi_bus = busio.SPI(SPI0_SCK, MOSI=SPI0_TX, MISO=SPI0_RX)

# Reset W5500 first
ethernetRst.value = False
time.sleep(1)
ethernetRst.value = True

# Initialize ethernet interface without DHCP
# eth = WIZNET5K(spi_bus, cs, is_dhcp=False, mac=MY_MAC, debug=False)
# Initialize ethernet interface with DHCP
eth = WIZNET5K(spi_bus, cs, is_dhcp=True, mac=MY_MAC, debug=False)

# Set network configuration
# eth.ifconfig = (IP_ADDRESS, SUBNET_MASK, GATEWAY_ADDRESS, DNS_SERVER)

print("Chip Version:", eth.chip)
print("MAC Address:", [hex(i) for i in eth.mac_address])
print("My IP address is:", eth.pretty_ip(eth.ip_address))

```

## 网页交互
### WSGI概念

1. Web服务器和Web应用程序或框架之间的接口
2. Web服务器网关接口（Web Server Gateway Interface，缩写为WSGI）是Python应用程序或框架和Web服务器之间的一种接口，已经被广泛接受, 它已基本达成它的可移植性方面的目标。
3. WSGI 没有官方的实现, 因为WSGI更像一个协议. 只要遵照这些协议,WSGI应用(Application)都可以在任何服务器(Server)上运行, 反之亦然。
4. WSGI标准在 PEP 333中定义并被许多框架实现，其中包括现广泛使用的Django框架。

### 代码实现

- 创建Web Server服务器及WSGI,并将html页面响应及应用层控制命令响应的代码添加上实现。

```python
# Initialize a requests object with a socket and ethernet interface
requests.set_socket(socket, eth)

# Here we create our application, registering the
# following functions to be called on specific HTTP GET requests routes
web_app = WSGIApp()

html_string = '''
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RaspberryPi Pico Web server - WIZnet W5100S/W5500</title>
</head>
<body>
<div align="center">
<H1>RaspberryPi Pico Web server & WIZnet Ethernet HAT</H1>
<h2>Network Information</h2>
<p>
Chip Version is $CHIPNAME
My IP address is $IPADDRESS
</p>
<h2>Control LED</h2>
<p>
<label for="led_on"></label><a href="/led_on" id="led_on"> [ON] </a>
</p>
<p>
<label for="led_off"></label><a href="/led_off" id="led_off"> [OFF] </a>
</p>
</div>
</body>
</html>
'''

html_string = html_string.replace("$CHIPNAME",eth.chip)
html_string = html_string.replace("$IPADDRESS",eth.pretty_ip(eth.ip_address))

#HTTP Request handlers
@web_app.route("/led_on")
def led_on(request):  # pylint: disable=unused-argument
    print("LED on!")
    led.value = True
    return ("200 OK", [], " led on!")
	
@web_app.route("/led_off")
def led_off(request): # pylint: disable=unused-argument
	print("LED off!")
	led.value = False
	return ("200 OK", [], " led off!")

@web_app.route("/")
def root(request):  # pylint: disable=unused-argument
    print("Root WSGI handler")
    # return ("200 OK", [], ["Root document"])
    return ("200 OK", [], [html_string])

# Here we setup our server, passing in our web_app as the application
server.set_interface(eth)
print(eth.chip)
wsgiServer = server.WSGIServer(80, application=web_app)

print("Open this IP in your browser: ", eth.pretty_ip(eth.ip_address))

# Start the server
wsgiServer.start()

while True:
    # Our main loop where we have the server poll for incoming requests
    wsgiServer.update_poll()
    # Maintain DHCP lease
    eth.maintain_dhcp_lease()
    # Could do any other background tasks here, like reading sensors

```

## 全部源码
以下是本次测试的实验源码。

```python
import board
import busio
import digitalio
import time

import adafruit_requests as requests
from adafruit_wiznet5k.adafruit_wiznet5k import *
from adafruit_wsgi.wsgi_app import WSGIApp
import adafruit_wiznet5k.adafruit_wiznet5k_wsgiserver as server
import adafruit_wiznet5k.adafruit_wiznet5k_socket as socket

##SPI0
SPI0_SCK = board.GP18
SPI0_TX = board.GP19
SPI0_RX = board.GP16
SPI0_CSn = board.GP17