ArtemiaandClaude Opus 5.5
f4a80f4d5b
M7 : modes Wi-Fi, requête HTTP. M8 : échanges navigateur/serveur, HTTP vs WebSocket. M9 : modèle GATT, session BLE. Diagrammes de séquence plus lisibles (étiquettes sur fond blanc, boîtes à la largeur du nom). Gabarit : figures pleine largeur par défaut. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
59 lines
3.1 KiB
Python
59 lines
3.1 KiB
Python
"""Module 8 — Serveur web embarqué."""
|
|
from matplotlib.patches import Rectangle
|
|
|
|
from outils import boite, fleche, sequence, toile
|
|
from style import BLEU, GRIS, ORANGE, ROUGE, VERT, Figure
|
|
|
|
|
|
def echanges_serveur():
|
|
acteurs = ["Navigateur (mobile)", "ESP32-S3 — WebServer", "LED NeoPixel"]
|
|
messages = [
|
|
("Navigateur (mobile)", "ESP32-S3 — WebServer", "GET / (saisie de http://192.168.1.42)"),
|
|
("ESP32-S3 — WebServer", "Navigateur (mobile)", "200 OK + page HTML (4 boutons)", True),
|
|
("Navigateur (mobile)", "ESP32-S3 — WebServer", "clic « Rouge » → GET /rouge"),
|
|
("ESP32-S3 — WebServer", "LED NeoPixel", "changerCouleur(255, 0, 0)"),
|
|
("ESP32-S3 — WebServer", "Navigateur (mobile)", "200 OK + page HTML (rechargée)", True),
|
|
]
|
|
fig, ax = sequence(acteurs, messages, largeur_cm=16, pas_cm=0.95,
|
|
couleurs={"Navigateur (mobile)": GRIS, "LED NeoPixel": ROUGE})
|
|
ax.text(8.0, 0.15, "serveur.on(\"/rouge\", …) associe chaque URL (route) à une fonction ; "
|
|
"handleClient() traite les requêtes dans loop()", ha="center", fontsize=7.2, color=GRIS, style="italic")
|
|
return fig
|
|
|
|
|
|
def http_vs_websocket():
|
|
fig, ax = toile(16, 7.2)
|
|
for x0, titre, c in ((0.3, "HTTP classique", ORANGE), (8.3, "WebSocket", VERT)):
|
|
ax.text(x0 + 3.7, 6.85, titre, ha="center", fontsize=10, fontweight="bold", color=c)
|
|
for dx, nom in ((0.9, "Navigateur"), (6.5, "ESP32-S3")):
|
|
boite(ax, x0 + dx, 6.2, 1.9, 0.6, nom, couleur=GRIS if nom == "Navigateur" else BLEU, taille=8)
|
|
ax.plot([x0 + dx] * 2, [0.85, 5.85], color=GRIS, lw=1, ls=(0, (3, 3)))
|
|
# HTTP : une requête par échange
|
|
g, d = 1.2, 6.8
|
|
y = 5.4
|
|
for req, rep in (("GET /mesure", "200 OK « 21,5 °C »"), ("GET /mesure", "200 OK « 21,6 °C »"),
|
|
("GET /mesure", "200 OK « 21,6 °C »")):
|
|
fleche(ax, (g, y), (d, y), req, taille=7.3, decalage=0.05)
|
|
fleche(ax, (d, y - 0.55), (g, y - 0.55), rep, taille=7.3, pointille=True, decalage=0.05)
|
|
y -= 1.5
|
|
ax.text(4.0, 0.15, "le navigateur doit redemander\n(nouvelle requête à chaque fois)", ha="center",
|
|
fontsize=7.3, color=ORANGE)
|
|
# WebSocket : une connexion persistante
|
|
g, d = 9.2, 14.8
|
|
fleche(ax, (g, 5.4), (d, 5.4), "ouverture (handshake)", taille=7.3, decalage=0.05)
|
|
fleche(ax, (d, 4.85), (g, 4.85), "connexion acceptée", taille=7.3, pointille=True, decalage=0.05)
|
|
ax.add_patch(Rectangle((g, 0.75), d - g, 3.75, color=VERT, alpha=0.08))
|
|
for k, (sens, txt) in enumerate(((1, "21,5 °C"), (1, "21,6 °C"), (-1, "« rouge »"), (1, "21,7 °C"), (1, "21,7 °C"))):
|
|
yy = 4.1 - k * 0.7
|
|
a, b = (d, g) if sens == 1 else (g, d)
|
|
fleche(ax, (a, yy), (b, yy), txt, taille=7.3, couleur=VERT if sens == 1 else ROUGE, decalage=0.05)
|
|
ax.text(12.0, 0.15, "connexion ouverte en permanence :\nla carte envoie dès qu'une valeur change",
|
|
ha="center", fontsize=7.3, color=VERT)
|
|
return fig
|
|
|
|
|
|
FIGURES = [
|
|
Figure("m08-echanges-serveur", echanges_serveur),
|
|
Figure("m08-http-vs-websocket", http_vs_websocket),
|
|
]
|