{"id":2653,"date":"2024-06-22T09:54:33","date_gmt":"2024-06-22T07:54:33","guid":{"rendered":"https:\/\/www.domotic.phdata.fr\/domotic\/?p=2653"},"modified":"2024-06-23T16:18:38","modified_gmt":"2024-06-23T14:18:38","slug":"websockets","status":"publish","type":"post","link":"https:\/\/www.domotic.phdata.fr\/domotic\/websockets\/","title":{"rendered":"WebSockets"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"2653\" class=\"elementor elementor-2653\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4b2215fd e-flex e-con-boxed e-con e-parent\" data-id=\"4b2215fd\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-20135fc0 elementor-widget elementor-widget-image\" data-id=\"20135fc0\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"545\" height=\"294\" src=\"https:\/\/www.domotic.phdata.fr\/domotic\/wp-content\/uploads\/2024\/06\/Websockets.webp\" class=\"attachment-large size-large wp-image-2655\" alt=\"\" srcset=\"https:\/\/www.domotic.phdata.fr\/domotic\/wp-content\/uploads\/2024\/06\/Websockets.webp 545w, https:\/\/www.domotic.phdata.fr\/domotic\/wp-content\/uploads\/2024\/06\/Websockets-300x162.webp 300w, https:\/\/www.domotic.phdata.fr\/domotic\/wp-content\/uploads\/2024\/06\/Websockets-150x81.webp 150w\" sizes=\"(max-width: 545px) 100vw, 545px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8fe5219 elementor-widget elementor-widget-menu-anchor\" data-id=\"8fe5219\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"menu\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-7f721a7a e-flex e-con-boxed e-con e-parent\" data-id=\"7f721a7a\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-106905c elementor-widget elementor-widget-text-editor\" data-id=\"106905c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-46439e83 e-flex e-con-boxed e-con e-parent\" data-id=\"46439e83\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-62676e4a e-con-full e-flex e-con e-child\" data-id=\"62676e4a\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3b9316b7 elementor-widget elementor-widget-image\" data-id=\"3b9316b7\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"280\" height=\"280\" src=\"https:\/\/www.domotic.phdata.fr\/domotic\/wp-content\/uploads\/2024\/06\/logo-websockets.webp\" class=\"attachment-large size-large wp-image-2656\" alt=\"\" srcset=\"https:\/\/www.domotic.phdata.fr\/domotic\/wp-content\/uploads\/2024\/06\/logo-websockets.webp 280w, https:\/\/www.domotic.phdata.fr\/domotic\/wp-content\/uploads\/2024\/06\/logo-websockets-150x150.webp 150w\" sizes=\"(max-width: 280px) 100vw, 280px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-6efb6643 e-con-full e-flex e-con e-child\" data-id=\"6efb6643\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6588ce30 elementor-widget elementor-widget-heading\" data-id=\"6588ce30\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h1 class=\"elementor-heading-title elementor-size-default\">WebSockets<\/h1>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-d7fd78b e-flex e-con-boxed e-con e-parent\" data-id=\"d7fd78b\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b094654 elementor-widget elementor-widget-button\" data-id=\"b094654\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"#ESPAsyncWebServer\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Exemple de code WebSocket avec ESPAsyncWebServer<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-539b56b4 elementor-widget elementor-widget-heading\" data-id=\"539b56b4\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h5 class=\"elementor-heading-title elementor-size-default\">Comment fonctionne WebSocket<\/h5>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-821177c elementor-widget elementor-widget-text-editor\" data-id=\"821177c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Les WebSockets sont un protocole de communication bidirectionnelle qui permet une interaction en temps r\u00e9el entre un client (g\u00e9n\u00e9ralement un navigateur web) et un serveur. Contrairement aux requ\u00eates HTTP traditionnelles qui sont unidirectionnelles (le client envoie une requ\u00eate, le serveur r\u00e9pond), les WebSockets permettent une connexion persistante o\u00f9 les deux parties peuvent envoyer des messages \u00e0 tout moment.<\/p><p>Voici un aper\u00e7u de leur fonctionnement :<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d1b813a elementor-widget elementor-widget-heading\" data-id=\"d1b813a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">\u00c9tablissement de la Connexion<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6c0b874 elementor-widget elementor-widget-text-editor\" data-id=\"6c0b874\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<ol><li><strong>Initialisation via HTTP<\/strong> :<ul><li>La connexion WebSocket commence par une requ\u00eate HTTP classique (upgrade request) du client au serveur. Le client demande au serveur de passer du protocole HTTP au protocole WebSocket.<\/li><li>La requ\u00eate contient un en-t\u00eate sp\u00e9cial <code>Upgrade: websocket<\/code>.<\/li><\/ul><\/li><li><strong>R\u00e9ponse du Serveur<\/strong> :<ul><li>Si le serveur supporte les WebSockets, il r\u00e9pond avec un code d&rsquo;\u00e9tat HTTP 101 (Switching Protocols) et confirme le changement de protocole.<\/li><\/ul><\/li><\/ol><p><!-- notionvc: 9a6d9547-47d4-4131-8154-99145246bd23 --><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a79c8b9 elementor-widget elementor-widget-heading\" data-id=\"a79c8b9\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Communication Bidirectionnelle<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c47d018 elementor-widget elementor-widget-text-editor\" data-id=\"c47d018\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<ol><li><strong>Connexion Persistante<\/strong> :<ul><li>Une fois la connexion \u00e9tablie, elle reste ouverte, permettant une communication en temps r\u00e9el et bidirectionnelle. Les messages peuvent \u00eatre \u00e9chang\u00e9s \u00e0 tout moment sans la surcharge des requ\u00eates HTTP classiques.<\/li><\/ul><\/li><li><strong>\u00c9change de Messages<\/strong> :<ul><li>Les messages WebSocket sont encapsul\u00e9s dans des frames. Chaque frame contient une charge utile (payload) et des m\u00e9tadonn\u00e9es, telles que le type de donn\u00e9es (texte, binaire) et si c&rsquo;est le dernier fragment d&rsquo;un message.<\/li><li>Le client et le serveur peuvent envoyer des frames de donn\u00e9es ind\u00e9pendamment l&rsquo;un de l&rsquo;autre.<\/li><\/ul><\/li><\/ol><p><!-- notionvc: 55ca8f5e-7c81-4c73-959c-134807ef404e --><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-47a8fcb elementor-widget elementor-widget-heading\" data-id=\"47a8fcb\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Fermeture de la Connexion<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-734bdc0 elementor-widget elementor-widget-text-editor\" data-id=\"734bdc0\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>La connexion peut \u00eatre ferm\u00e9e par l&rsquo;une ou l&rsquo;autre des parties en envoyant un frame de fermeture (close frame). Une fois la fermeture initi\u00e9e, l&rsquo;autre partie doit r\u00e9pondre avec un frame de fermeture pour terminer proprement la connexion.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-801c660 elementor-widget elementor-widget-heading\" data-id=\"801c660\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Avantages des WebSockets<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1ff1f69 elementor-widget elementor-widget-text-editor\" data-id=\"1ff1f69\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<ul><li><strong>Faible Latence<\/strong> : Gr\u00e2ce \u00e0 la connexion persistante, il n&rsquo;y a pas de latence li\u00e9e \u00e0 l&rsquo;\u00e9tablissement de connexions r\u00e9p\u00e9t\u00e9es.<\/li><li><strong>Communication Temps R\u00e9el<\/strong> : Permet des mises \u00e0 jour instantan\u00e9es, ce qui est crucial pour les applications comme les jeux en ligne, les chats, ou les notifications en temps r\u00e9el.<\/li><li><strong>R\u00e9duction de la Surcharge<\/strong> : Moins de surcharge de r\u00e9seau par rapport aux requ\u00eates HTTP r\u00e9p\u00e9t\u00e9es, ce qui am\u00e9liore l&rsquo;efficacit\u00e9.<\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-5638dc58 e-flex e-con-boxed e-con e-parent\" data-id=\"5638dc58\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-8670e55 elementor-widget elementor-widget-heading\" data-id=\"8670e55\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Exemple de Code : Client (JavaScript)<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4ab2978 elementor-widget elementor-widget-text-editor\" data-id=\"4ab2978\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"cpp\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">const WebSocket = require('ws');\n\nconst server = new WebSocket.Server({ port: 8080 });\n\nserver.on('connection', (socket) => {\n    console.log('Client connect\u00e9');\n\n    socket.on('message', (message) => {\n        console.log('Message re\u00e7u : ', message);\n        socket.send('Bonjour client!');\n    });\n\n    socket.on('close', () => {\n        console.log('Connexion ferm\u00e9e');\n    });\n\n    socket.on('error', (error) => {\n        console.log('Erreur : ', error);\n    });\n});\n<\/pre>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f443077 elementor-widget elementor-widget-heading\" data-id=\"f443077\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Serveur (Node.js avec 'ws' library)<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-dbf685d elementor-widget elementor-widget-text-editor\" data-id=\"dbf685d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"cpp\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">const socket = new WebSocket('ws:\/\/example.com\/socket');\n\n\/\/ \u00c9v\u00e9nements de connexion\nsocket.onopen = (event) => {\n    console.log('Connexion ouverte');\n    socket.send('Bonjour serveur!');\n};\n\n\/\/ R\u00e9ception des messages\nsocket.onmessage = (event) => {\n    console.log('Message re\u00e7u : ', event.data);\n};\n\n\/\/ Fermeture de la connexion\nsocket.onclose = (event) => {\n    console.log('Connexion ferm\u00e9e : ', event);\n};\n\n\/\/ Gestion des erreurs\nsocket.onerror = (error) => {\n    console.log('Erreur : ', error);\n};\n<\/pre>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c0ecf9a elementor-widget elementor-widget-heading\" data-id=\"c0ecf9a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Conclusion<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c362d6c elementor-widget elementor-widget-text-editor\" data-id=\"c362d6c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Les WebSockets sont particuli\u00e8rement utiles dans les applications n\u00e9cessitant une interaction en temps r\u00e9el et une faible latence, rendant l&rsquo;exp\u00e9rience utilisateur plus fluide et interactive.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a100e05 elementor-widget elementor-widget-menu-anchor\" data-id=\"a100e05\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"ESPAsyncWebServer\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ad382d6 elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"ad382d6\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f2c7f41 elementor-widget elementor-widget-heading\" data-id=\"f2c7f41\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Exemple de code WebSocket avec ESPAsyncWebServer<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4f54312d elementor-widget elementor-widget-text-editor\" data-id=\"4f54312d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"cpp\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">#include <WiFi.h> \/\/ Utilisez <ESP8266WiFi.h> pour ESP8266\n#include <ESPAsyncTCP.h>\n#include <ESPAsyncWebServer.h>\n\n\/\/ Remplacez par vos informations de r\u00e9seau\nconst char* ssid = \"votre_SSID\";\nconst char* password = \"votre_mot_de_passe\";\n\n\/\/ Cr\u00e9ez un objet serveur web asynchrone sur le port 80\nAsyncWebServer server(80);\n\/\/ Cr\u00e9ez un objet WebSocket sur le chemin \"\/ws\"\nAsyncWebSocket ws(\"\/ws\");\n\n\/\/ Gestion des \u00e9v\u00e9nements WebSocket\nvoid onWsEvent(AsyncWebSocket *server, AsyncWebSocketClient *client, AwsEventType type, void *arg, uint8_t *data, size_t len) {\n  if (type == WS_EVT_CONNECT) {\n    Serial.println(\"Client connect\u00e9\");\n    client->text(\"Bienvenue au WebSocket server!\");\n  } else if (type == WS_EVT_DISCONNECT) {\n    Serial.println(\"Client d\u00e9connect\u00e9\");\n  } else if (type == WS_EVT_DATA) {\n    Serial.println(\"Message re\u00e7u\");\n    client->text(\"Message re\u00e7u\");\n  }\n}\n\nvoid setup() {\n  \/\/ Initialisez la communication s\u00e9rie pour le d\u00e9bogage\n  Serial.begin(115200);\n\n  \/\/ Connectez-vous au Wi-Fi\n  WiFi.begin(ssid, password);\n  while (WiFi.status() != WL_CONNECTED) {\n    delay(1000);\n    Serial.println(\"Connexion au Wi-Fi...\");\n  }\n  Serial.println(\"Connect\u00e9 au Wi-Fi!\");\n\n  \/\/ D\u00e9finir la fonction de gestion des \u00e9v\u00e9nements WebSocket\n  ws.onEvent(onWsEvent);\n  \/\/ Ajouter le gestionnaire WebSocket au serveur\n  server.addHandler(&ws);\n\n  \/\/ D\u00e9marrez le serveur\n  server.begin();\n}\n\nvoid loop() {\n  \/\/ Rien \u00e0 faire dans la boucle principale\n}\n<\/pre>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9c1a51f elementor-widget elementor-widget-heading\" data-id=\"9c1a51f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Explication de l'exemple<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-436aed2 elementor-widget elementor-widget-text-editor\" data-id=\"436aed2\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<ol><li><strong>Configuration Wi-Fi<\/strong> :<ul><li>Connecte l&rsquo;ESP8266 ou ESP32 au r\u00e9seau Wi-Fi.<\/li><\/ul><\/li><li><strong>Cr\u00e9ation du serveur Web et WebSocket<\/strong> :<ul><li><code>AsyncWebServer server(80);<\/code> : Cr\u00e9e un serveur web asynchrone sur le port 80.<\/li><li><code>AsyncWebSocket ws(\"\/ws\");<\/code> : Cr\u00e9e un WebSocket sur le chemin <code>\/ws<\/code>.<\/li><\/ul><\/li><li><strong>Gestion des \u00e9v\u00e9nements WebSocket<\/strong> :<ul><li><code>onWsEvent<\/code> est une fonction qui g\u00e8re les \u00e9v\u00e9nements WebSocket tels que la connexion, la d\u00e9connexion et la r\u00e9ception de messages.<\/li><\/ul><\/li><li><strong>D\u00e9marrage du serveur<\/strong> :<ul><li>Le serveur Web et le WebSocket sont d\u00e9marr\u00e9s, pr\u00eats \u00e0 g\u00e9rer les connexions des clients.<\/li><\/ul><\/li><\/ol><h3>Utilisations courantes des WebSockets<\/h3><ul><li><strong>Applications en temps r\u00e9el<\/strong> : Chats, notifications en direct, jeux en ligne.<\/li><li><strong>Tableaux de bord et monitoring<\/strong> : Mises \u00e0 jour instantan\u00e9es des donn\u00e9es de capteurs, visualisation en temps r\u00e9el.<\/li><li><strong>Collaborations<\/strong> : \u00c9diteurs de documents en temps r\u00e9el, applications collaboratives.<\/li><\/ul><p>Les WebSockets sont puissants pour les applications n\u00e9cessitant une communication instantan\u00e9e et bidirectionnelle entre le client et le serveur, offrant une exp\u00e9rience utilisateur plus fluide et r\u00e9active.<\/p><p><!-- notionvc: a67485ef-7a0c-40bd-822c-ac153f4070ce --><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-ddda2a7 e-flex e-con-boxed e-con e-parent\" data-id=\"ddda2a7\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-cd394ad elementor-view-default elementor-widget elementor-widget-icon\" data-id=\"cd394ad\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"icon.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-icon-wrapper\">\n\t\t\t<a class=\"elementor-icon\" href=\"#menu\">\n\t\t\t<i aria-hidden=\"true\" class=\"fas fa-arrow-up\"><\/i>\t\t\t<\/a>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-042bdc0 e-flex e-con-boxed e-con e-parent\" data-id=\"042bdc0\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-655f4e2f elementor-widget elementor-widget-text-editor\" data-id=\"655f4e2f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"2509\" class=\"elementor elementor-2509\">\n\t\t\t\t<div class=\"elementor-element elementor-element-dc37c4c e-flex e-con-boxed e-con e-parent\" data-id=\"dc37c4c\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;gradient&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-31250bc elementor-widget elementor-widget-image\" data-id=\"31250bc\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"1000\" height=\"140\" src=\"https:\/\/www.domotic.phdata.fr\/domotic\/wp-content\/uploads\/2024\/06\/pied-de-page.webp\" class=\"attachment-large size-large wp-image-3167\" alt=\"\" srcset=\"https:\/\/www.domotic.phdata.fr\/domotic\/wp-content\/uploads\/2024\/06\/pied-de-page.webp 1000w, https:\/\/www.domotic.phdata.fr\/domotic\/wp-content\/uploads\/2024\/06\/pied-de-page-300x42.webp 300w, https:\/\/www.domotic.phdata.fr\/domotic\/wp-content\/uploads\/2024\/06\/pied-de-page-768x108.webp 768w, https:\/\/www.domotic.phdata.fr\/domotic\/wp-content\/uploads\/2024\/06\/pied-de-page-150x21.webp 150w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-da41007 elementor-widget elementor-widget-text-editor\" data-id=\"da41007\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p style=\"text-align: center;\"><strong>Domotique &#8211; informatique &#8211; \u00e9lectronique &#8211; dictionnaire &#8211; projets<\/strong><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8a0e2d2 elementor-widget elementor-widget-text-editor\" data-id=\"8a0e2d2\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Copyright 2024<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>WebSockets Exemple de code WebSocket avec ESPAsyncWebServer Comment fonctionne WebSocket Les WebSockets sont un protocole de communication bidirectionnelle qui permet une interaction en temps r\u00e9el entre un client (g\u00e9n\u00e9ralement un navigateur web) et un serveur. Contrairement aux requ\u00eates HTTP traditionnelles qui sont unidirectionnelles (le client envoie une requ\u00eate, le serveur r\u00e9pond), les WebSockets permettent une [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_eb_attr":"","ocean_post_layout":"","ocean_both_sidebars_style":"","ocean_both_sidebars_content_width":0,"ocean_both_sidebars_sidebars_width":0,"ocean_sidebar":"","ocean_second_sidebar":"","ocean_disable_margins":"enable","ocean_add_body_class":"","ocean_shortcode_before_top_bar":"","ocean_shortcode_after_top_bar":"","ocean_shortcode_before_header":"","ocean_shortcode_after_header":"","ocean_has_shortcode":"","ocean_shortcode_after_title":"","ocean_shortcode_before_footer_widgets":"","ocean_shortcode_after_footer_widgets":"","ocean_shortcode_before_footer_bottom":"","ocean_shortcode_after_footer_bottom":"","ocean_display_top_bar":"default","ocean_display_header":"default","ocean_header_style":"","ocean_center_header_left_menu":"","ocean_custom_header_template":"","ocean_custom_logo":0,"ocean_custom_retina_logo":0,"ocean_custom_logo_max_width":0,"ocean_custom_logo_tablet_max_width":0,"ocean_custom_logo_mobile_max_width":0,"ocean_custom_logo_max_height":0,"ocean_custom_logo_tablet_max_height":0,"ocean_custom_logo_mobile_max_height":0,"ocean_header_custom_menu":"","ocean_menu_typo_font_family":"","ocean_menu_typo_font_subset":"","ocean_menu_typo_font_size":0,"ocean_menu_typo_font_size_tablet":0,"ocean_menu_typo_font_size_mobile":0,"ocean_menu_typo_font_size_unit":"px","ocean_menu_typo_font_weight":"","ocean_menu_typo_font_weight_tablet":"","ocean_menu_typo_font_weight_mobile":"","ocean_menu_typo_transform":"","ocean_menu_typo_transform_tablet":"","ocean_menu_typo_transform_mobile":"","ocean_menu_typo_line_height":0,"ocean_menu_typo_line_height_tablet":0,"ocean_menu_typo_line_height_mobile":0,"ocean_menu_typo_line_height_unit":"","ocean_menu_typo_spacing":0,"ocean_menu_typo_spacing_tablet":0,"ocean_menu_typo_spacing_mobile":0,"ocean_menu_typo_spacing_unit":"","ocean_menu_link_color":"","ocean_menu_link_color_hover":"","ocean_menu_link_color_active":"","ocean_menu_link_background":"","ocean_menu_link_hover_background":"","ocean_menu_link_active_background":"","ocean_menu_social_links_bg":"","ocean_menu_social_hover_links_bg":"","ocean_menu_social_links_color":"","ocean_menu_social_hover_links_color":"","ocean_disable_title":"default","ocean_disable_heading":"default","ocean_post_title":"","ocean_post_subheading":"","ocean_post_title_style":"","ocean_post_title_background_color":"","ocean_post_title_background":0,"ocean_post_title_bg_image_position":"","ocean_post_title_bg_image_attachment":"","ocean_post_title_bg_image_repeat":"","ocean_post_title_bg_image_size":"","ocean_post_title_height":0,"ocean_post_title_bg_overlay":0.5,"ocean_post_title_bg_overlay_color":"","ocean_disable_breadcrumbs":"default","ocean_breadcrumbs_color":"","ocean_breadcrumbs_separator_color":"","ocean_breadcrumbs_links_color":"","ocean_breadcrumbs_links_hover_color":"","ocean_display_footer_widgets":"default","ocean_display_footer_bottom":"default","ocean_custom_footer_template":"","_jetpack_memberships_contains_paid_content":false,"ocean_post_oembed":"","ocean_post_self_hosted_media":"","ocean_post_video_embed":"","ocean_link_format":"","ocean_link_format_target":"self","ocean_quote_format":"","ocean_quote_format_link":"post","ocean_gallery_link_images":"on","ocean_gallery_id":[],"footnotes":""},"categories":[1],"tags":[],"class_list":["post-2653","post","type-post","status-publish","format-standard","hentry","category-bienvenue","entry"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.domotic.phdata.fr\/domotic\/wp-json\/wp\/v2\/posts\/2653","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.domotic.phdata.fr\/domotic\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.domotic.phdata.fr\/domotic\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.domotic.phdata.fr\/domotic\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.domotic.phdata.fr\/domotic\/wp-json\/wp\/v2\/comments?post=2653"}],"version-history":[{"count":94,"href":"https:\/\/www.domotic.phdata.fr\/domotic\/wp-json\/wp\/v2\/posts\/2653\/revisions"}],"predecessor-version":[{"id":3279,"href":"https:\/\/www.domotic.phdata.fr\/domotic\/wp-json\/wp\/v2\/posts\/2653\/revisions\/3279"}],"wp:attachment":[{"href":"https:\/\/www.domotic.phdata.fr\/domotic\/wp-json\/wp\/v2\/media?parent=2653"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.domotic.phdata.fr\/domotic\/wp-json\/wp\/v2\/categories?post=2653"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.domotic.phdata.fr\/domotic\/wp-json\/wp\/v2\/tags?post=2653"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}