{"id":3810,"date":"2023-03-14T14:24:23","date_gmt":"2023-03-14T13:24:23","guid":{"rendered":"https:\/\/blog.alwaysdata.com\/?p=3810"},"modified":"2023-03-14T14:24:24","modified_gmt":"2023-03-14T13:24:24","slug":"accrochez-vous-a-vos-chaussettes-hebergement-de-donnees-a-grande-vitesse-avec-websockets","status":"publish","type":"post","link":"https:\/\/blog.alwaysdata.com\/fr\/2023\/03\/14\/accrochez-vous-a-vos-chaussettes-hebergement-de-donnees-a-grande-vitesse-avec-websockets\/","title":{"rendered":"Accrochez-vous \u00e0 vos chaussettes : h\u00e9bergement de donn\u00e9es \u00e0 grande vitesse avec WebSockets"},"content":{"rendered":"\n

Cr\u00e9\u00e9 par WHATWG<\/a> en 2011 et normalis\u00e9 par l\u2019IETF<\/a> la m\u00eame ann\u00e9e, le protocole WebSocket<\/a> offre depuis plus de 10 ans la possibilit\u00e9 aux d\u00e9veloppeurs d\u2019applications Web de s\u2019affranchir du mod\u00e8le Client\/Server TCP traditionnel pour le transfert de donn\u00e9es en temps r\u00e9el.<\/p>\n\n\n\n

Dans ce mod\u00e8le initial, le client requ\u00eate aupr\u00e8s du serveur une ressource, ce dernier la lui retourne, fin de la communication. Il n\u2019est notamment pas possible pour le serveur de \u00ab pousser \u00bb facilement des messages au client (comme des notifications).<\/p>\n\n\n\n

WebSocket apporte le support d\u2019une communication bidirectionnelle (dite full-duplex<\/em>) dans laquelle le serveur peut d\u00e9sormais spontan\u00e9ment \u00ab pousser \u00bb de la donn\u00e9e vers le client ; et o\u00f9 le client peut souscrire aux messages qui l\u2019int\u00e9ressent pour y r\u00e9agir ensuite. L\u2019interactivit\u00e9 applicative, directement dans le navigateur !<\/p>\n\n\n\n

En 2023, h\u00e9berger une application serveur WebSocket, comment \u00e7a marche ?<\/p>\n\n\n

\n

Attention ch\u00e9rie, \u00e7a va trancher<\/h2>\n\n\n\n

Revenons aux fondamentaux : WebSocket est un protocole r\u00e9seau dans la couche application (dans le fameux mod\u00e8le OSI<\/a>). Pas besoin d\u2019\u00eatre expert en r\u00e9seau pour l\u2019utiliser, donc : c\u2019est au niveau du code que tout va se passer. Il exploite une connexion TCP traditionnelle entre le client et le serveur, et l\u2019architecture HTTP.<\/p>\n\n\n\n

Pour faire simple :<\/p>\n\n\n\n

    \n
  1. le client va charger aupr\u00e8s du serveur une premi\u00e8re ressource applicative (HTML + JS) ;<\/li>\n\n\n\n
  2. cette ressource va \u00eatre en charge d\u2019\u00e9tablir une communication aupr\u00e8s du serveur WebSocket pour en recevoir les notifications ;<\/li>\n\n\n\n
  3. le serveur WebSocket va enregistrer le client dans ses destinataires et lui poussera la data concern\u00e9e quand ce sera n\u00e9cessaire ;<\/li>\n\n\n\n
  4. le client, jusqu\u2019alors en attente, recevra les flux de data en provenance du serveur et pourra traiter cette donn\u00e9e.<\/li>\n<\/ol>\n\n\n\n

    On notera que dans WebSocket, il y a Web<\/em> : l\u2019architecture n\u2019est pas diff\u00e9rente des applications Web traditionnelles. On exploite toujours HTTP\/TCP, on utilise juste un autre protocole applicatif. Ce qui signifie que l\u2019on va devoir utiliser des librairies d\u00e9di\u00e9es.<\/p>\n\n\n\n

    Un service qui fait \u00ab pong \u00bb<\/h2>\n\n\n\n

    Il existe plein de biblioth\u00e8ques capables de vous proposer le support WebSocket, dans \u00e0 peu pr\u00e8s tous les langages Web disponibles. Pour les besoins de la d\u00e9monstration1)<\/sup><\/a><\/span><\/span>, nous allons impl\u00e9menter un petit serveur WebSocket en Node.js, puis en Python. Libre \u00e0 vous de le r\u00e9aliser en PHP, en Ruby, en Java, en Perl\u2026<\/p>\n\n\n\n

    Notre exemple est tout simple : une fois connect\u00e9, notre client pourra envoyer le message ping<\/code> au serveur, qui renverra alors pong<\/code> \u00e0 tous les clients connect\u00e9s, une seconde plus tard. Ce simple exemple d\u00e9montre l\u2019interactivit\u00e9 entre tous les \u00e9l\u00e9ments connect\u00e9s (c\u2019est \u00e0 dire du broadcasting<\/em>) de notre application.<\/p>\n\n\n\n

    En Node.js\u2026<\/h3>\n\n\n\n

    \u00c0 l\u2019heure actuelle la librairie la plus r\u00e9put\u00e9e pour r\u00e9aliser une application serveur WebSocket en Node.js est websockets\/ws<\/a>. Ajoutez le paquet ws<\/code> \u00e0 votre projet via npm<\/code>2)<\/sup><\/a><\/span><\/span>, et cr\u00e9ez un fichier wss.js<\/code> pour votre serveur WebSocket :<\/p>\n\n\n\n

    import WebSocket, { WebSocketServer } from 'ws';\n\nconst wss = new WebSocketServer({\n  host: process.env.IP || '',\n  port: process.env.PORT || 8080\n});<\/code><\/pre>\n\n\n\n
    Nous attachons le serveur WebSocket au couple IP<\/code>\/PORT<\/code> expos\u00e9 dans les variables d\u2019environnement pour plus de flexibilit\u00e9, avec un fallback vers le port 8080<\/code> pour faciliter le d\u00e9veloppement.<\/p>\n\n\n\n
    Notre serveur est pr\u00eat, reste \u00e0 le doter de ses fonctionnalit\u00e9s. Tout d\u2019abord, il doit pouvoir recevoir les connexions des clients :<\/p>\n\n\n\n
    wss.on('connection', (ws) => {\n  \/\/ log as an error any exception\n  ws.on('error', console.error);\n});<\/code><\/pre>\n\n\n\n
    Ensuite, lorsqu\u2019un client enverra le message ping<\/code>, il devra renvoyer pong<\/code> \u00e0 tous les clients actifs :<\/p>\n\n\n\n
    wss.on('connection', (ws) => {\n  \/* ... *\/\n  ws.on('message', (data) => {\n    \/\/ only react to `ping` message\n    if (data != 'ping') { return }\n    wss.clients.forEach3)<\/sup><\/a><\/span><\/span><\/code><\/pre>\n\n\n\n
    D\u00e9finissons maintenant nos fonctionnalit\u00e9s : enregistrement des clients et diffusion du message lors d\u2019un ping<\/code>. Enrichissez la m\u00e9thode handler<\/code> qui contient la logique de notre serveur :<\/p>\n\n\n\n
    connected = set()\n\n\nasync def handler(websocket):\n    if websocket not in connected:\n        connected.add(websocket)\n    async for message in websocket:\n        if message == 'ping':\n            await asyncio.sleep(1)\n            websockets.broadcast(connected, 'pong')<\/code><\/pre>\n\n\n\n
    Le client Web<\/h3>\n\n\n\n
    Notre client va rester simple : une page web embarquant directement le JavaScript \u00e0 ex\u00e9cuter pour se connecter au serveur WebSocket, et envoyer un ping<\/code> lors de la connexion. Il disposera aussi d\u2019une m\u00e9thode pour renvoyer un nouveau ping<\/code> manuellement.<\/p>\n\n\n\n
    Cr\u00e9ez un fichier index.html<\/code> pour votre client :<\/p>\n\n\n\n
    <!DOCTYPE html>\n<script>\n\tWS_SERVER = 'localhost:8080'\n\tdateFormatter = new Intl.DateTimeFormat('en-US', {\n\t\thour: \"numeric\",\n\t\tminute: \"numeric\",\n\t\tsecond: \"numeric\"\n\t})\n\n\tconst websocket = new WebSocket(`ws:\/\/${WS_SERVER}\/`)\n\n\tconst ping = (msg) => {\n\t\tmsg = msg || 'ping'\n\t\tconsole.log(\"Send message\", msg)\n\t\twebsocket.send(msg)\n\t}\n\n\twebsocket.addEventListener('message', ({data}) => {\n\t\tconsole.log(\"Recv message\", data, dateFormatter.format(Date.now()))\n\t})\n\n\twebsocket.addEventListener('open', () => ping())\n<\/script>\n<p>Open the developer console and run the <code>ping()<\/code> function<\/p><\/code><\/pre>\n\n\n\n
    Lancez votre serveur WebSocket (Python ou Node.js) et ouvrez cette page HTML avec les devtools ouverts. Vous devriez voir appara\u00eetre les messages de ping<\/code>\/pong<\/code> dans la console. Essayez en ex\u00e9cutant manuellement la fonction ping()<\/code> dans les devtools.<\/p>\n\n\n\n
    Ouvrez maintenant une seconde fois cette page HTML dans un autre onglet, devtools ouverts. Ex\u00e9cutez la fonction ping()<\/code> indiff\u00e9remment dans l\u2019un des deux onglets. Les deux vont recevoir le pong<\/code> depuis le serveur.<\/p>\n\n\n\n
    F\u00e9licitations, vous avez un premier niveau de communication broadcast bi-directionnelle client\/serveur en full-duplex<\/em> via WebSocket !<\/p>\n\n\n
    \n    
    Noot Noot : WebSite ou WebService ?<\/h2>\n\n\n\n
    Il nous reste \u00e0 d\u00e9ployer ce serveur WebSocket et le client dans un environnement de production.<\/p>\n\n\n\n
    Chez alwaysdata<\/strong> nous proposons plusieurs solutions pour d\u00e9ployer des outils devant \u00eatre ex\u00e9cut\u00e9s en temps long, c\u2019est \u00e0 dire de mani\u00e8re joignable dans le futur par un client : les Sites<\/em>, et les Services<\/em>.<\/p>\n\n\n\n
    Pour les Sites<\/em>, pas besoin de faire un dessin : il s\u2019agit de d\u00e9ployer un serveur Web (Apache, WSGI, Node, etc.) qui sera requ\u00eat\u00e9 ult\u00e9rieurement par un client pour obtenir diff\u00e9rentes ressources via HTTP. Le Web historique traditionnel.<\/p>\n\n\n\n
    Les Services<\/em>, eux, sont destin\u00e9s \u00e0 ex\u00e9cuter des processus longs, potentiellement joignables autrement que par HTTP, dans l\u2019environnement de votre compte (un serveur de d\u00e9p\u00f4ts Git over SSH avec soft-serve<\/a> ou un syst\u00e8me de surveillance \/ filtrage de messagerie, par exemple).<\/p>\n\n\n\n
    Alors, pour un serveur WebSocket, Sites<\/em>, ou Services<\/em> ?<\/p>\n\n\n\n
    Si on pourrait imaginer que les services sont le bon endroit\u200a\u2014\u200aun processus long potentiellement joignable de l\u2019ext\u00e9rieur<\/em>\u200a\u2014\u200aje le r\u00e9p\u00e8te ici : dans WebSocket, il y a Web<\/em> ! Le protocole WebSocket est logiciel et exploite HTTP\/TCP, comme n\u2019importe quel Site<\/em>.<\/p>\n\n\n\n
    Un plan sans accroc<\/h3>\n\n\n\n
    Votre application se compose de deux briques : un client, et un serveur WebSocket. Le serveur WebSocket ne peut pas servir de ressource comme un serveur Web traditionnel (ce n\u2019est pas son r\u00f4le), il va donc vous falloir deux sites :<\/p>\n\n\n\n
      \n
    1. un site de type Fichiers statiques<\/em> qui va servir votre client index.html<\/code> ;<\/li>\n\n\n\n
    2. un second site adapt\u00e9 au langage de votre serveur WebSocket pour ex\u00e9cuter ce dernier.<\/li>\n<\/ol>\n\n\n\n
      Pour le serveur WebSocket, utilisez une adresse du type : [mon-compte].alwaysdata.net\/wss<\/code>. Votre client WebSocket devra se connecter \u00e0 cette adresse. Puisque celui-ci se trouve derri\u00e8re un pathUrl<\/code> (et non \u00e0 la racine), pensez \u00e0 cocher la case extraire le chemin<\/em>. Il vous faut aussi passer la valeur du temps d\u2019inactivit\u00e9<\/em> \u00e0 0<\/code> pour garantir que celui-ci ne sera jamais arr\u00eat\u00e9 par le syst\u00e8me, et maintenir actives les  connexions vers les clients, m\u00eame en cas d\u2019absence d\u2019activit\u00e9 prolong\u00e9e.<\/p>\n\n\n
      \n
      <\/a>
      Site WebSocket (python)<\/figcaption><\/figure><\/div>\n\n
      \n
      <\/a>
      Site WebSocket, r\u00e9glages avanc\u00e9s : temps d\u2019inactivit\u00e9 \u00e0 0, et exclure le chemin<\/figcaption><\/figure><\/div>\n\n\n
      Modifiez ensuite le fichier index.html<\/code> pour renseigner l\u2019url du serveur WebSocket dans la variable WS_SERVER<\/code>. Cr\u00e9ez ensuite un site Fichiers statiques<\/em> avec l\u2019adresse [mon-compte].alwaysdata.net<\/code> pour servir ce fichier.<\/p>\n\n\n
      \n
      <\/a>
      Site client statique<\/figcaption><\/figure><\/div>\n\n\n
      Rendez-vous maintenant sur cette adresse : votre communication WebSocket est fonctionnelle !<\/p>\n\n\n\n
      \n\n\n
      \n    
        \n
      1. WebSocket permet une communication bi-directionnelle et multi-cliente simultan\u00e9e.<\/li>\n\n\n\n
      2. Un serveur WebSocket tourne en parall\u00e8le du serveur Web de l\u2019application. Ce dernier se charge de distribuer l\u2019application au navigateur, qui va la d\u00e9marrer ; mais c\u2019est le premier qui est responsable du transit des flux de donn\u00e9es m\u00e9tier.<\/li>\n\n\n\n
      3. M\u00eame s\u2019il semble \u00eatre un protocole diff\u00e9rent, WebSocket exploite les fondamentaux du Web, ses briques sous-jacentes, et ses protocoles robustes.<\/li>\n<\/ol>\n\n\n\n
        Vous n\u2019avez pas besoin d\u2019\u00eatre un expert r\u00e9seau pour d\u00e9velopper avec WebSocket. Vous utiliserez ce que vous connaissez d\u00e9j\u00e0 bien du Web<\/em>, avec son mod\u00e8le d\u2019\u00e9v\u00e8nements.<\/p>\n\n\n\n
        Libre \u00e0 vous de trouver maintenant les bons usages, adapt\u00e9s \u00e0 vos besoins ; d\u2019ajouter du traitement de donn\u00e9es ; faire transiter des formats JSON ou binaires ; de supporter une authentification\u2026 Tout ce que vous savez d\u00e9j\u00e0 faire en Web est applicable.<\/p>\n\n\n\n
        \u00c0 vos claviers, et bon dev !<\/p>\n
         
        Notes<\/span>[+<\/a>]<\/span><\/p><\/div> 
         \n\n
        Notes<\/caption> 
         \u2191<\/span>1<\/a><\/th> et pour ne pas toujours refaire la m\u00eame chose<\/td><\/tr>\n\n
         \u2191<\/span>2<\/a><\/th> ou pnpm<\/code>, ou yarn<\/code><\/td><\/tr>\n\n
         \u2191<\/span>3<\/a><\/th> client) => {\n      \/\/ send to active clients only\n      if (client.readyState != WebSocket.OPEN) { return }\n      setTimeout(() => client.send(\u201cpong\u201d), 1000); }); }); });\n\n\n\n
        Rien de plus. Pour lancer le serveur WebSocket, ex\u00e9cutez simplement le fichier wss.js<\/code> avec Node.js :<\/p>\n\n\n\n
        $ node wss.js<\/code><\/pre>\n\n\n\n
        \u2026 ou en Python !<\/h3>\n\n\n\n
        Pour changer un peu des exemples habituels, r\u00e9alisons le m\u00eame serveur WebSocket en Python, \u00e0 l\u2019aide d\u2019asyncio<\/em> et de websockets<\/a>. Commencez par installer le paquet websockets<\/code> \u00e0 l\u2019aide de pip<\/code> dans votre venv<\/em>, puis cr\u00e9ez un fichier wss.py<\/code>.<\/p>\n\n\n\n
        #!\/usr\/bin\/env python\n\nimport os\n\nimport asyncio\nimport websockets\n\n\nasync def handler(websocket): pass\n\n\nasync def main():\n    async with websockets.serve(\n        handler,\n        os.environ.get('IP', ''),\n        os.environ.get('PORT', 8080)\n    ):\n        # Run forever\n        await asyncio.Future()\n\n\nif name == \"__main__\":\n    asyncio.run(main(<\/code><\/pre><\/td><\/tr>\n\n <\/tbody> <\/table> <\/div><\/div>