Le jeu de "plus ou moins" consite à faire deviner un nombre à l'utilisateur en lui indiquant à chaque proposition si la solution est supérieure ou inferieure. C'est un classique des TD de programmation et nous allons en faire une variante où l'interface est séparée de la partie fonctionnelle.
Le websocket est un standard permettant de gérer très simplement une connexion sur le réseau. Plutôt que d'écrire nous même un protocole sur UDP ou TCP, nous allons profiter du protocole HTTP pour ouvrir une connexion, mais plutôt que de se contenter d'une connexion unidirectionnelle qui se ferme après avoir transmis un contenu (par exemple un page web), nous allons garder cette connexion active pour une communication bidirectionnelle. L'avantage de cette technique est d'être facilement intégrable à des outils web.
L'interface utilisateur (front) n'est pas le sujet de ce TD, mais nous allons examiner son fonctionnement pour comprendre comment la page web gèrera la communication avec notre programme. La voici :
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>Guess through websocket</title> <style> .response { color: blue; } </style> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <h1>WebSocket guess Rust application</h1> <!-- vuejs app template --> <div id="app"> <span> After entering a number, press 'enter' </span> <br> <input type="text" v-model="text" v-on:keyup.enter="send" style="width:40em"/> <br> <span> The server responded: </span> <span class="response"> {{ response }} </span> </div> <!-- vuejs app --> <script> var app = new Vue({ el: '#app', data: { text: undefined, response: undefined, socket: undefined, }, computed: { }, methods: { openSocket: function () { // set websocket this.socket = new WebSocket("ws://127.0.0.1:3012/"); this.socket.onmessage = function (event) { app.response = event.data // store message } }, send: function () { this.socket.send(this.text); } }, }) app.openSocket(); // initialize connection </script> </body> </html>
La partie head
définit les attributs de la page et charge le framework JavaScript vuejs, qui facilite l'écriture de l'application. La partie body
contient le template qui sera rempli par l'application. La partie script
définit le comportement de l'application.
L'application comporte deux fonctions : openSocket
et send
qui servent respectivement à ouvrir la connexion websocket et à envoyer des messages à travers cette connexion. La réception des messages est cachée dans socket.onmessage
. C'est une fonction qui se contente de stocker le message dans une variable qui est affichée en bleu dans la page. La fonction send
est appelée quand l'utilisateur appuie sur la touche Enter
avec en argument le texte qu'il a entré dans la zone de saisie.
Notre programme devra donc
À tout moment, un message envoyé par le serveur sera affiché comme un texte par l'interface.
Un exemple de corrigé en Rust est disponible ici : https://git.42l.fr/TDinfo/wsggrs.