使用esp32+micropython+microdot搭建web(http+websocket)服务器（超详细）第三部分

使用esp32+micropython+microdot搭建web(http+websocket)服务器（超详细）第三部分

• microdot文档速查 什么是Microdot?Microdot是一个可以在micropython中搭建物联网web服务器的框架
• micropyton文档api速查 Quick reference for the ESP32

实现websocket服务器

上一章的http服务有个缺点，就是每次都要发送一个请求，

如果我们让这个请求保持长连接，这样效率就提高了，

于是websocket就是为此而生的

演示视频

准备工作

和上一章一样

• esp32开发板一个
• esp32拓展板一个
• 舵机四个
• 简单组装
• 注意接口（线头颜色千万别插反了！！！）

esp32 websocket服务搭建

在MicroPython设备 新建目录结构

• lib 存放一些库文件

  • microdot.py （microdot-main\src中）前面章节有
  • microdot_websocket.py （microdot-main\src中）前面章节有

• common

  • connect_wifi.py （连接热点）前面章节有
  • servo.py （操作舵机移动角度）前面章节有

• public 存放网页内容

  • index.html 网页

• main.py （程序主入口）

microdot_websocket.py

import binascii
import hashlib
from lib.microdot import Response
​
​
class WebSocket:
    CONT = 0
    TEXT = 1
    BINARY = 2
    CLOSE = 8
    PING = 9
    PONG = 10
​
    def __init__(self, request):
        self.request = request
        self.closed = False
​
    def handshake(self):
        response = self._handshake_response()
        self.request.sock.send(b'HTTP/1.1 101 Switching Protocols\r\n')
        self.request.sock.send(b'Upgrade: websocket\r\n')
        self.request.sock.send(b'Connection: Upgrade\r\n')
        self.request.sock.send(
            b'Sec-WebSocket-Accept: ' + response + b'\r\n\r\n')
​
    def receive(self):
        while True:
            opcode, payload = self._read_frame()
            send_opcode, data = self._process_websocket_frame(opcode, payload)
            if send_opcode:  # pragma: no cover
                self.send(data, send_opcode)
            elif data:  # pragma: no branch
                return data
​
    def send(self, data, opcode=None):
        frame = self._encode_websocket_frame(
            opcode or (self.TEXT if isinstance(data, str) else self.BINARY),
            data)
        self.request.sock.send(frame)
​
    def close(self):
        if not self.closed:  # pragma: no cover
            self.closed = True
            self.send(b'', self.CLOSE)
​
    def _handshake_response(self):
        connection = False
        upgrade = False
        websocket_key = None
        for header, value in self.request.headers.items():
            h = header.lower()
            if h == 'connection':
                connection = True
                if 'upgrade' not in value.lower():
                    return self.request.app.abort(400)
            elif h == 'upgrade':
                upgrade = True
                if not value.lower() == 'websocket':
                    return self.request.app.abort(400)
            elif h == 'sec-websocket-key':
                websocket_key = value
        if not connection or not upgrade or not websocket_key:
            return self.request.app.abort(400)
        d = hashlib.sha1(websocket_key.encode())
        d.update(b'258EAFA5-E914-47DA-95CA-C5AB0DC85B11')
        return binascii.b2a_base64(d.digest())[:-1]
​
    @classmethod
    def _parse_frame_header(cls, header):
        fin = header[0] & 0x80
        opcode = header[0] & 0x0f
        if fin == 0 or opcode == cls.CONT:  # pragma: no cover
            raise OSError(32, 'Continuation frames not supported')
        has_mask = header[1] & 0x80
        length = header[1] & 0x7f
        if length == 126:
            length = -2
        elif length == 127:
            length = -8
        return fin, opcode, has_mask, length
​
    def _process_websocket_frame(self, opcode, payload):
        if opcode == self.TEXT:
            payload = payload.decode()
        elif opcode == self.BINARY:
            pass
        elif opcode == self.CLOSE:
            raise OSError(32, 'Websocket connection closed')
        elif opcode == self.PING:
            return self.PONG, payload
        elif opcode == self.PONG:  # pragma: no branch
            return None, None
        return None, payload
​
    @classmethod
    def _encode_websocket_frame(cls, opcode, payload):
        frame = bytearray()
        frame.append(0x80 | opcode)
        if opcode == cls.TEXT:
            payload = payload.encode()
        if len(payload) < 126:
            frame.append(len(payload))
        elif len(payload) < (1 << 16):
            frame.append(126)
            frame.extend(len(payload).to_bytes(2, 'big'))
        else:
            frame.append(127)
            frame.extend(len(payload).to_bytes(8, 'big'))
        frame.extend(payload)
        return frame
​
    def _read_frame(self):
        header = self.request.sock.recv(2)
        if len(header) != 2:  # pragma: no cover
            raise OSError(32, 'Websocket connection closed')
        fin, opcode, has_mask, length = self._parse_frame_header(header)
        if length < 0:
            length = self.request.sock.recv(-length)
            length = int.from_bytes(length, 'big')
        if has_mask:  # pragma: no cover
            mask = self.request.sock.recv(4)
        payload = self.request.sock.recv(length)
        if has_mask:  # pragma: no cover
            payload = bytes(x ^ mask[i % 4] for i, x in enumerate(payload))
        return opcode, payload
​
​
def websocket_upgrade(request):
    """Upgrade a request handler to a websocket connection.
​
    This function can be called directly inside a route function to process a
    WebSocket upgrade handshake, for example after the user's credentials are
    verified. The function returns the websocket object::
​
        @app.route('/echo')
        def echo(request):
            if not authenticate_user(request):
                abort(401)
            ws = websocket_upgrade(request)
            while True:
                message = ws.receive()
                ws.send(message)
    """
    ws = WebSocket(request)
    ws.handshake()
​
    @request.after_request
    def after_request(request, response):
        return Response.already_handled
​
    return ws
​
​
def with_websocket(f):
    """Decorator to make a route a WebSocket endpoint.
​
    This decorator is used to define a route that accepts websocket
    connections. The route then receives a websocket object as a second
    argument that it can use to send and receive messages::
​
        @app.route('/echo')
        @with_websocket
        def echo(request, ws):
            while True:
                message = ws.receive()
                ws.send(message)
    """
    def wrapper(request, *args, **kwargs):
        ws = websocket_upgrade(request)
        try:
            f(request, ws, *args, **kwargs)
            ws.close()  # pragma: no cover
        except OSError as exc:
            if exc.errno not in [32, 54, 104]:  # pragma: no cover
                raise
        return ''
    return wrapper
​

main.py

# 导入Microdot
from lib.microdot import Microdot,send_file,Request
from lib.microdot_websocket import with_websocket
# 连接wifi
from common.connect_wifi import do_connect
from common.servo import Servo
import time
# 导入引脚
from machine import Pin
# 不加报错
Request.socket_read_timeout = None
​
# 对应四个电机 从左上角顺时针排序
s1 = Servo(Pin(15))
s2 = Servo(Pin(17))
s3 = Servo(Pin(25))
s4 = Servo(Pin(27))
# 复位
s1.write_angle(0)
s2.write_angle(180-0)
s3.write_angle(180-0)
s4.write_angle(0)
# esp32 引脚2是一颗自带的 led的灯
light = Pin(2,Pin.OUT)
​
# 开始连接wifi
do_connect()
# 实例化这个类
app = Microdot()
​
# get请求返回一个网页
@app.route('/')
def index(request):
    return send_file('public/index.html')
​
# 使用@with_websocket生成websocket服务
@app.route('/move')
@with_websocket
def echo(request, ws):
    while True:
        # 拿到客户端发送的数据
        data = ws.receive()
        print(data,type(data))
        s1.write_angle(int(data))
        s2.write_angle(180-int(data))
        s3.write_angle(180-int(data))
        s4.write_angle(int(data))    
        ws.send("移动："+(data))
        
​
# 启动后指示灯闪烁
def blink():
    for i in range(5):
        light.value(int(not light.value()))
        time.sleep(1)
blink()
​
# 端口号为5000
app.run(host='0.0.0.0', port=5000, debug=False, ssl=None)
​

index.html

<!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>滑动</title>
</head>
<body>
    <h1>滑动四个电机</h1>
    <input type="range" min="0" max="180" value="1" step="1" name="" id="">
    <div class="content">
​
    </div>
    <script>
​
        let ipt = document.querySelector("input")
        let content = document.querySelector(".content")
​
        // websocket连接
        const socket = new WebSocket('ws://' + location.host + '/move');
        // 防抖函数 防止服务器接受大量请求
        const throttle = (func,interval)=>{
            let last = 0;
            return function(){
                let args = arguments
                let now = Date.now();
                if(now - last > interval){
                    func.apply(this,args)
                    last = now
                }
            }
        }
        ipt.addEventListener("input",throttle((e)=>{
            // 拿到滑动条的 数据
            let value = ipt.value
            // 给服务器发送数据
            socket.send(value)
        },100))
        const setContent = (text,color)=>{
            content.innerHTML = `<span style="color: ${color}">${text}</span><br>`
        }
        socket.addEventListener('message', ev => {
            setContent('收到消息' + ev.data, 'blue');
        });
        socket.addEventListener('close', ev => {
            setContent('连接关闭' + ev.data, 'blue');
        });
    </script>
</body>
</html>
​
​

开发完成

演示视频