Plus ou moins

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.

Websocket

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.

Interface

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.

Spécifications

Notre programme devra donc

ouvrir un serveur websocket
accepter n'importe quelle entrée texte
- si cette entrée est invalide, envoyer un message pour le signaler
- si cette entrée est valide, envoyer un message indiquant si la solution est supérieure / inférieure / égale

À tout moment, un message envoyé par le serveur sera affiché comme un texte par l'interface.

Corrigé

Un exemple de corrigé en Rust est disponible ici : https://git.42l.fr/TDinfo/wsggrs.