[{"data":1,"prerenderedAt":408},["ShallowReactive",2],{"i-ic:outline-arrow-upward":3,"Footer_afPiwGMwNiEyV4syWzw87ovzxHAgs4iwKtCn4zqBf8E":8,"episode-\u002Fpodcasts\u002Frealtime":16,"github-sponsor":310,"i-material-symbols:home":385,"i-ic:baseline-play-circle-filled-white":387,"i-material-symbols:ios-share":389,"i-cbi:deezer-logo":391,"i-vscode-icons:file-type-rss":393,"i-ri:heart-3-fill":396,"Brand_dlIOZD2O03VXPoFYukMOJnSnZRMTmJ0YwMKY5fNK8":398,"Duration_WwkINuuEmHrlAomB5fJ4BLBEu5n6vBuB4kOQTYCdiU":403},{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":7},0,24,false,"\u003Cpath fill=\"currentColor\" d=\"m4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8z\"\u002F>",["Island",9],{"key":10,"result":11},"Footer_afPiwGMwNiEyV4syWzw87ovzxHAgs4iwKtCn4zqBf8E",{"head":12},{"style":13},[14],{"innerHTML":15},":where(.i-mdi\\:github){display:inline-block;width:1em;height:1em;background-color:currentColor;-webkit-mask-image:var(--svg);mask-image:var(--svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;--svg:url(\"data:image\u002Fsvg+xml,%3Csvg xmlns='http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M12 2A10 10 0 0 0 2 12c0 4.42 2.87 8.17 6.84 9.5c.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34c-.46-1.16-1.11-1.47-1.11-1.47c-.91-.62.07-.6.07-.6c1 .07 1.53 1.03 1.53 1.03c.87 1.52 2.34 1.07 2.91.83c.09-.65.35-1.09.63-1.34c-2.22-.25-4.55-1.11-4.55-4.92c0-1.11.38-2 1.03-2.71c-.1-.25-.45-1.29.1-2.64c0 0 .84-.27 2.75 1.02c.79-.22 1.65-.33 2.5-.33s1.71.11 2.5.33c1.91-1.29 2.75-1.02 2.75-1.02c.55 1.35.2 2.39.1 2.64c.65.71 1.03 1.6 1.03 2.71c0 3.82-2.34 4.66-4.57 4.91c.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0 0 12 2'\u002F%3E%3C\u002Fsvg%3E\")}",{"id":17,"title":18,"author":19,"body":20,"categories":289,"description":291,"dsSlug":292,"duration":293,"episodeArtwork":294,"episodeNumber":295,"episodeType":296,"explicit":6,"extension":297,"guid":293,"links":298,"meta":299,"navigation":300,"path":301,"publicationDate":302,"season":276,"seo":303,"status":304,"stem":305,"subtitle":306,"tags":307,"videoLink":308,"__hash__":309},"podcasts\u002Fpodcasts\u002F117.realtime\u002Findex.md","Développer des applications Realtime","Double Slash",{"type":21,"value":22,"toc":274},"minimark",[23,27,30,35,45,50,127,130,134,148,152,198,202,205,230,234,248,252,271],[24,25,26],"p",{},"Un exemple d'utilisation : dans une application de commande de pizza, le pizzaiolo n'a pas la possibilité d'interagir avec l'écran puisqu'il a les mains dans les ingrédients. Un tableau de bord qui affiche les commandes au fur et à mesure est une bonne solution pour l'aider.",[24,28,29],{},"D'autres exemples : chat, résultats sportifs, trading, collaborations en direct.",[31,32,34],"h3",{"id":33},"les-points-clés","Les points clés",[36,37,38,42],"ul",{},[39,40,41],"li",{},"Afficher les informations en temps réel dès qu'un événement survient.",[39,43,44],{},"Éviter les rafraîchissements de page inutiles.",[46,47,49],"h2",{"id":48},"les-différentes-approches-pour-implémenter-du-temps-réel","Les différentes approches pour implémenter du temps réel",[51,52,53,70,83,102],"ol",{},[39,54,55,59],{},[56,57,58],"strong",{},"WebSockets",[36,60,61,64,67],{},[39,62,63],{},"Fonctionnement bi-directionnel : 1 client vers 1 serveur et N clients.",[39,65,66],{},"Problèmes potentiels : gestion des connexions, déconnexion automatique par le navigateur, nécessité d'auto-reconnexion.",[39,68,69],{},"Limitations : serveur centralisé, problèmes avec les serveurs sans état.",[39,71,72,75],{},[56,73,74],{},"PUB\u002FSUB (Publication\u002FAbonnement) avec Redis",[36,76,77,80],{},[39,78,79],{},"Utilisation de Redis comme système de message.",[39,81,82],{},"Problèmes liés aux clients non connectés et aux événements perdus.",[39,84,85,88],{},[56,86,87],{},"SSE (Server-Sent Events)",[36,89,90,93,96,99],{},[39,91,92],{},"protocole HTTP",[39,94,95],{},"Fonctionnement uni-directionnel : 1 serveur vers N clients.",[39,97,98],{},"Avantages : simple à mettre en œuvre, possibilité de stocker temporairement les abonnés.",[39,100,101],{},"Limitations : uniquement pour l'envoi de serveur à client.",[39,103,104,107],{},[56,105,106],{},"Solutions Toutes Prêtes",[36,108,109,115,121],{},[39,110,111,114],{},[56,112,113],{},"Pusher"," : offre une surcouche de WebSocket, client JS disponible, protocole supporté, mais limitations sur le free tier.",[39,116,117,120],{},[56,118,119],{},"Ably"," : similaire à Pusher, avec un free tier disponible.",[39,122,123,126],{},[56,124,125],{},"Soketi"," : solution open source, auto-hébergée, avec une installation en un clic.",[24,128,129],{},"Les développeurs web disposent de plusieurs technologies et solutions pour implémenter des fonctionnalités en temps réel. Le choix dépendra des besoins spécifiques du projet, de la scalabilité requise et des compétences de l'équipe.",[31,131,133],{"id":132},"les-défis-techniques","Les défis techniques",[36,135,136,139,142,145],{},[39,137,138],{},"Gestion des déconnexions et reconnexions.",[39,140,141],{},"Persistence des messages et gestion des conflits d'états.",[39,143,144],{},"Sécurité et authentification.",[39,146,147],{},"Afficher les informations à la bonne personne.",[46,149,151],{"id":150},"quelques-liens","Quelques Liens",[36,153,154,163,170,177,184,191],{},[39,155,156,157],{},"Nitro Websocket ",[158,159,160],"a",{"href":160,"rel":161},"https:\u002F\u002Fnitro.build\u002Fguide\u002Fwebsocket",[162],"nofollow",[39,164,165,166],{},"Laravel Reverb ",[158,167,168],{"href":168,"rel":169},"https:\u002F\u002Freverb.laravel.com",[162],[39,171,172,173],{},"Redis Pub\u002FSub ",[158,174,175],{"href":175,"rel":176},"https:\u002F\u002Fredis.io\u002Fdocs\u002Flatest\u002Fdevelop\u002Fpubsub",[162],[39,178,179,180],{},"Server Sent Event MDM ",[158,181,182],{"href":182,"rel":183},"https:\u002F\u002Fdeveloper.mozilla.org\u002Ffr\u002Fdocs\u002FWeb\u002FAPI\u002FServer-sent_events\u002FUsing_server-sent_events",[162],[39,185,186,187],{},"SSE example avec Laravel ",[158,188,189],{"href":189,"rel":190},"https:\u002F\u002Fdev.to\u002Fayowandeapp\u002Freal-time-notifications-with-server-sent-events-sse-in-laravel-and-vuejs-40pf",[162],[39,192,193,194],{},"Ably Laravel ",[158,195,196],{"href":196,"rel":197},"https:\u002F\u002Flaravel.com\u002Fdocs\u002F12.x\u002Fbroadcasting#ably",[162],[46,199,201],{"id":200},"quelques-services-disponibles","Quelques services disponibles",[31,203,113],{"id":204},"pusher",[36,206,207,210,224,227],{},[39,208,209],{},"Surcouche de web socket",[39,211,212,213],{},"+\u002F - opensource\n",[36,214,215,218,221],{},[39,216,217],{},"Client JS",[39,219,220],{},"Pas server",[39,222,223],{},"Protocol oui",[39,225,226],{},"$$",[39,228,229],{},"Free tier",[31,231,233],{"id":232},"ably","ABLY",[36,235,236,242,245],{},[39,237,238],{},[158,239,240],{"href":240,"rel":241},"https:\u002F\u002Fably.com",[162],[39,243,244],{},"$$$$",[39,246,247],{},"Free Tier",[31,249,251],{"id":250},"soketi","SOKETI",[36,253,254,260,263],{},[39,255,256],{},[158,257,258],{"href":258,"rel":259},"https:\u002F\u002Fsoketi.app",[162],[39,261,262],{},"Full open source",[39,264,265,266],{},"Self hosted\n",[36,267,268],{},[39,269,270],{},"Coolify one click install  😜",[24,272,273],{},"Bonne écoute !",{"title":275,"searchDepth":276,"depth":276,"links":277},"",2,[278,280,283,284],{"id":33,"depth":279,"text":34},3,{"id":48,"depth":276,"text":49,"children":281},[282],{"id":132,"depth":279,"text":133},{"id":150,"depth":276,"text":151},{"id":200,"depth":276,"text":201,"children":285},[286,287,288],{"id":204,"depth":279,"text":113},{"id":232,"depth":279,"text":233},{"id":250,"depth":279,"text":251},[290],"Technology","Pour offrir une meilleure expérience à vos utilisateurs, il est possible d'implémenter un rafraîchissement des données automatique. L'utilisateur voit donc les informations se mettre à jour sans faire aucune action.","DS_117_realtime",null,"https:\u002F\u002Fres.cloudinary.com\u002Fdoubleslash\u002Fimage\u002Fupload\u002Fv1755771163\u002Fepisode\u002FART_117_evajtf.png",117,"full","md",[],{},true,"\u002Fpodcasts\u002Frealtime","2025-08-21",{"title":18,"description":291},"published","podcasts\u002F117.realtime\u002Findex","Développer des applications Realtime avec rafraîchissement des données automatiques",[],"E-cxziu6zBg","qnZUMbiR3zbAERD7XCTnea_AtVqRbOEVX3LFBuvjWiE",{"data":311},{"organization":312},{"sponsorsListing":313},{"name":314,"fullDescriptionHTML":315,"url":316,"shortDescription":317,"activeGoal":318,"isPublic":300,"sponsorable":322},"sponsors-double-slash-podcast","\u003Cp>Le podcast des dev pour dev par des dev !\u003C\u002Fp>\n\u003Cp>Des podcasts et des videos sur les technologie WEB modernes.\u003C\u002Fp>\n\u003Cp>A deux ou avec un invité, on discute des tendances, des nouvelles technologies, des meilleures pratiques actuelles.\u003C\u002Fp>\n\u003Cp>🎥 \u003Ca href=\"https:\u002F\u002Fwww.youtube.com\u002Fchannel\u002FUCp5DGBAX2XNJXeOVAo7bICQ\">Youtube\u003C\u002Fa>\u003Cbr>\n🎙️ \u003Ca href=\"https:\u002F\u002Fspoti.fi\u002F317wtvD\">Spotify\u003C\u002Fa> ▪️ \u003Ca href=\"https:\u002F\u002Fapple.co\u002F3fTguFo\">Apple Podcast\u003C\u002Fa> ▪️ \u003Ca href=\"https:\u002F\u002Fbit.ly\u002F3i0hDgy\">Deezer\u003C\u002Fa> ▪️ \u003Ca href=\"https:\u002F\u002Fbit.ly\u002F31aKKYd\">Google Podcast\u003C\u002Fa>\u003Cbr>\n🌐 \u003Ca href=\"https:\u002F\u002Fdouble-slash.dev\u002F\">Double Slash DEV\u003C\u002Fa>\u003C\u002Fp>","https:\u002F\u002Fgithub.com\u002Fsponsors\u002Fdouble-slash-podcast","Le podcast des dev pour les dev par des dev !",{"description":319,"percentComplete":320,"targetValue":320,"title":321},"L'ensemble des charges seront couvertes. Service de stockage et abonnement aux services utilisés.",70,"$70 per month",{"sponsors":323},{"edges":324},[325,331,337,343,349,355,361,367,373,379],{"node":326},{"id":327,"name":328,"url":329,"avatarUrl":330},"MDQ6VXNlcjEwMDMwNw==","Clément Delmas","https:\u002F\u002Fgithub.com\u002Fclem","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F100307?u=878ed4b7cdf920879b57046f19e434fea2c7d296&v=4",{"node":332},{"id":333,"name":334,"url":335,"avatarUrl":336},"MDQ6VXNlcjI3NTYwOQ==","Thibaud Lepretre","https:\u002F\u002Fgithub.com\u002Fkakawait","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F275609?v=4",{"node":338},{"id":339,"name":340,"url":341,"avatarUrl":342},"MDQ6VXNlcjE5MTQxNjA=","David Pollet","https:\u002F\u002Fgithub.com\u002Fdavidpollet","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F1914160?u=4b3da16383b9fa810fd0980f756000709403ab45&v=4",{"node":344},{"id":345,"name":346,"url":347,"avatarUrl":348},"MDQ6VXNlcjYzMzMzOTY=","Eric","https:\u002F\u002Fgithub.com\u002Fericledonge","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F6333396?u=e9e541a6b9125d8e8b558fdd914c847eb36db695&v=4",{"node":350},{"id":351,"name":352,"url":353,"avatarUrl":354},"MDQ6VXNlcjg4OTk3Njg=","François Gardien","https:\u002F\u002Fgithub.com\u002FYoutch","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F8899768?u=85ae8c4299c380bcec02e99e9364624f3ce333c7&v=4",{"node":356},{"id":357,"name":358,"url":359,"avatarUrl":360},"MDQ6VXNlcjEwMTc2NjI2","Antharuu","https:\u002F\u002Fgithub.com\u002Fantharuu","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F10176626?u=3f6ef490b330d5a9bbaa3137560b5d1d4cf13a4a&v=4",{"node":362},{"id":363,"name":364,"url":365,"avatarUrl":366},"MDQ6VXNlcjEwMTg2OTkz","Adrien Zaganelli","https:\u002F\u002Fgithub.com\u002FadrienZ","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F10186993?u=08189ef8cf708a61445b6a57cf7a2aa361d484af&v=4",{"node":368},{"id":369,"name":370,"url":371,"avatarUrl":372},"MDQ6VXNlcjI2MTQyMzgz","Thomas Lemoine","https:\u002F\u002Fgithub.com\u002Fthomaslemoine","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F26142383?u=4c68175459b0ae1f8c68c48c40f2ae148747675d&v=4",{"node":374},{"id":375,"name":376,"url":377,"avatarUrl":378},"MDQ6VXNlcjY1NzM3MTMx","Valentin Grenier","https:\u002F\u002Fgithub.com\u002Fvalentin-grenier","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F65737131?u=0ba0cc828412f6655a948c6a82f69b9c909f8fd9&v=4",{"node":380},{"id":381,"name":382,"url":383,"avatarUrl":384},"U_kgDOBipZwA","Hebrard Frederic","https:\u002F\u002Fgithub.com\u002Ffrederichebrard","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F103438784?v=4",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":386},"\u003Cpath fill=\"currentColor\" d=\"M4 21V9l8-6l8 6v12h-6v-7h-4v7z\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":388},"\u003Cpath fill=\"currentColor\" d=\"M12 2C6.475 2 2 6.475 2 12s4.475 10 10 10s10-4.475 10-10S17.525 2 12 2m-2 14.5v-9l6 4.5z\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":390},"\u003Cpath fill=\"currentColor\" d=\"M6 22q-.825 0-1.412-.587T4 20V10q0-.825.588-1.412T6 8h3v2H6v10h12V10h-3V8h3q.825 0 1.413.588T20 10v10q0 .825-.587 1.413T18 22zm5-6V4.825l-1.6 1.6L8 5l4-4l4 4l-1.4 1.425l-1.6-1.6V16z\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":392},"\u003Cpath fill=\"currentColor\" d=\"M18.774 5.051c.185-1.072.457-1.747.757-1.748c.561 0 1.015 2.341 1.015 5.228s-.455 5.229-1.016 5.229c-.23 0-.443-.4-.614-1.064c-.27 2.439-.831 4.115-1.48 4.115c-.5 0-.953-1.007-1.256-2.594c-.207 3.018-.727 5.161-1.334 5.161c-.381 0-.73-.848-.987-2.231C13.55 20 12.834 22 12 22s-1.551-2-1.86-4.853c-.255 1.383-.6 2.231-.986 2.231c-.609 0-1.128-2.142-1.335-5.161c-.3 1.587-.752 2.594-1.256 2.594c-.649 0-1.21-1.676-1.481-4.115c-.169.668-.382 1.064-.613 1.064c-.562 0-1.017-2.34-1.017-5.229S3.908 3.3 4.471 3.3c.3 0 .57.676.758 1.748C5.527 3.2 6.014 2 6.564 2c.653 0 1.219 1.7 1.487 4.168c.262-1.8.658-2.941 1.1-2.941c.624 0 1.154 2.252 1.351 5.393C10.874 7.01 11.41 6 12 6s1.128 1.011 1.5 2.62c.2-3.141.727-5.393 1.351-5.393c.444 0 .84 1.145 1.1 2.941C16.219 3.7 16.785 2 17.439 2c.547 0 1.035 1.2 1.335 3.051m-16.2 5.3C2.258 10.355 2 9.31 2 8.017s.258-2.337.576-2.337s.578 1.044.578 2.337s-.254 2.338-.578 2.338Zm18.848 0c-.32 0-.577-1.045-.577-2.338s.257-2.337.577-2.337S22 6.724 22 8.017s-.258 2.338-.576 2.338Z\"\u002F>",{"left":4,"top":4,"width":394,"height":394,"rotate":4,"vFlip":6,"hFlip":6,"body":395},32,"\u003Cdefs>\u003ClinearGradient id=\"SVGvSi4fdXe\" x1=\"30.06\" x2=\"225.94\" y1=\"30.06\" y2=\"225.94\" gradientTransform=\"matrix(.11 0 0 .11 2 2)\" gradientUnits=\"userSpaceOnUse\">\u003Cstop offset=\"0\" stop-color=\"#e3702d\"\u002F>\u003Cstop offset=\".11\" stop-color=\"#ea7d31\"\u002F>\u003Cstop offset=\".35\" stop-color=\"#f69537\"\u002F>\u003Cstop offset=\".5\" stop-color=\"#fb9e3a\"\u002F>\u003Cstop offset=\".7\" stop-color=\"#ea7c31\"\u002F>\u003Cstop offset=\".89\" stop-color=\"#de642b\"\u002F>\u003Cstop offset=\"1\" stop-color=\"#d95b29\"\u002F>\u003C\u002FlinearGradient>\u003C\u002Fdefs>\u003Crect width=\"28\" height=\"28\" x=\"2\" y=\"2\" fill=\"#cc5d15\" rx=\"6.01\" ry=\"6.01\"\u002F>\u003Crect width=\"26.91\" height=\"26.91\" x=\"2.54\" y=\"2.54\" fill=\"#f49c52\" rx=\"5.47\" ry=\"5.47\"\u002F>\u003Crect width=\"25.82\" height=\"25.82\" x=\"3.1\" y=\"3.1\" fill=\"url(#SVGvSi4fdXe)\" rx=\"5.14\" ry=\"5.14\"\u002F>\u003Cpath fill=\"#fff\" d=\"M6.82 6.16v3.83a15.31 15.31 0 0 1 15.3 15.3h3.83A19.14 19.14 0 0 0 6.81 6.17zm0 6.45v3.72a8.97 8.97 0 0 1 8.96 8.97h3.72A12.69 12.69 0 0 0 6.81 12.6zm2.62 7.44a2.63 2.63 0 0 0-2.63 2.62a2.63 2.63 0 0 0 2.63 2.63a2.63 2.63 0 0 0 2.63-2.63a2.63 2.63 0 0 0-2.63-2.63z\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":397},"\u003Cpath fill=\"currentColor\" d=\"M16.5 3C19.538 3 22 5.5 22 9c0 7-7.5 11-10 12.5C9.5 20 2 16 2 9c0-3.5 2.5-6 5.5-6C9.36 3 11 4 12 5c1-1 2.64-2 4.5-2\"\u002F>",["Island",399],{"key":400,"result":401},"Brand_dlIOZD2O03VXPoFYukMOJnSnZRMTmJ0YwMKY5fNK8",{"head":402},{},["Island",404],{"key":405,"result":406},"Duration_WwkINuuEmHrlAomB5fJ4BLBEu5n6vBuB4kOQTYCdiU",{"head":407},{},1785405174636]