add ServerSendEvent

Readme.md

@@ -21,11 +21,15 @@ include_toc: true
    
    1. [Communications Client-Serveur](./Web/X%20-%20Communications%20Client-Serveur/index.md)
       
-      - [ ] REST
+      - [ ] Le serveur Web
+      
+      - [ ] REST + routes {name} cf Moodle
+        
+        - [ ]  OPTI REST API (cf youtube)
       
       - [ ] WebSocket
       
-      - [ ] ServerEvent
+      - [ ] Move optimisation 2 [F]
 
 5. <mark>[F]</mark> Perfs et SEO - [partie opti de com' Client-Serveur]
 
@@ -37,7 +41,7 @@ include_toc: true
 
 3. [<mark>D-TS</mark>] TS avancé
 
-4. [X] WebComponents en vrai / Animations / transitions / canvas
+4. [X] WebComponents en vrai / Animations / transitions / canvas / WebWorker
 
 5. [X] WebPack / CI/CD / unit tests / tests de recettes (en pratique) / validation des données runtime
 

Web/X - Communications Client-Serveur/index.md

@@ -138,4 +138,89 @@ BDD API/FileAPI
 
 ## Websocket
 
-## Server event
+🚩 [TODO]
+
+## Server Send Event
+
+
+
+Contrairement aux WebSockets, les *Server Send Events* ne permettent qu'une communication unidirectionnelle du serveur vers le client. Il est utilisé lorsque le serveur doit régulièrement envoyer des informations au client, sans attendre de réponses, e.g. envoyer des logs en temps réel.
+
+Le principe est très simple, il s'agit d'une requête et d'une réponse HTTP normales, à l'exception que la réponse HTTP est maintenue en vie (`keep-alive`) et est écrite petit à petit (`text/event-stream`). Le corps de la réponse suit le format suivant :
+
+
+```
+event: $EVENT_NAME
+data: $DATA
+
+event: $EVENT_NAME
+data: $DATA
+
+event: $EVENT_NAME
+data: $DATA
+```
+
+Côté client, l'utilisation est très simple, il suffit d'écouter des événements d'un `EventSource`.
+
+
+
+```javascript
+// [JS] JavaScript
+
+// Client
+const servEvent = new EventSource($URL);
+servEvent.addEventListener($EVENT_NAME, function(ev) {
+    console.log(ev.data)
+});
+servEvent.close(); // termine la communication.
+
+
+// Serveur (helper)
+class SSE {
+    constructor(res) {
+        this.res = res;
+        this.#setHeaders
+    }
+    #setHeaders() {
+        this.res.set({
+            'Cache-Control': 'no-cache',
+            'Content-Type' : 'text/event-stream',
+            'Connection'   : 'keep-alive'
+        });
+        this.res.flushHeaders();
+    }
+    dispatchEvent(name, data) {
+        this.res.write(`event: ${name}\n${data}\n\n`);
+    }
+}
+
+// Serveur
+app.get($URL, async function(req, res) {
+    
+    const sse = new SSE(res);
+
+    sse.dispatchEvent($EVENT_NAME, $DATA); // Envoyer un event.
+});
+```
+
+```python
+# [🐍] Python
+
+# Client
+def handler(ev):
+    console.log(ev.data)
+
+const servEvent = EventSource.new($URL);
+servEvent.addEventListener($EVENT_NAME, handler);
+servEvent.close(); # termine la communication.
+
+# Serveur
+# pip3 install aiohttp_sse
+from aiohttp_sse import sse_response
+
+
+async def GET(request):
+    req = sse_response(request)
+    
+    req.send($DATA, event=$EVENT_NAME) # Envoyer un event.
+```