**Ceci est une ancienne révision du document !**
Table des matières
Activité : première application websocket avec Flask-socketio
Les dossiers du projet
Je crée les dossiers de mon projet :
- la gestion du Websocket côté client se réalise en javascript, dans le fichier websocket.js.
Programme javascript de base du client : la page index.html
La page index.html contient le code HTML ainsi que le code javascript pour gérer les échanges côté client.
Dans la page Web HTML, le script javascript va créer un client WebSocket en utilisant la bibliothèque (API) WebSocket afin de communiquer avec le serveur WebSocket grâce au protocole WebSocket.
Création d'un objet Websocket
L'instruction suivante permet d'ouvrir une connexion websocket vers le serveur en connaissant son adresse IP. Pour cette activité, le serveur sera situé sur le même ordinateur que le client : l'adresse IP est donc 127.0.0.1 .(localhost) :
var websockets = new WebSocket("ws://127.0.0.1:5678/");
Explications :
- la variable websocket va contenir la connexion vers le serveur,
- le protocole est ws suivi de l'adresse IP et du port d'écoute du serveur websocket.
Recevoir des données du serveur
Quand un message arrive du serveur, un événement (event) message est envoyé à la fonction onmessage(). Pour utiliser ce message voici un exemple de code :
ws.onmessage = function (event) { //afficheEtat(event.data); alert(event.data); };
Envoyer des données au serveur
Les messages sont envoyés avec la fonction send(). Cependant, les connexions étant asynchrones, l'envoi du premier message immédiatement après la création de la connexion peut échouer. Il est alors préférable …
ws.onopen = function (event) { ws.send("J'envoie un premier message au serveur."); };
Le code complet de ce premier exemple dans le fichier javascript websocket.js
- websocket.js
// selectionner la balise <span> avec son id var affichemessage = document.getElementById('messagerecu'); // creation du websocket client vers le websocket serveur du Raspnerry var ws = new WebSocket("ws://127.0.0.1:5678/"); // envoi d'un message au serveur dès la premiere connexion ws.onopen = function (event) { ws.send("J'envoie un premier message au serveur."); }; // gestion des message reçus ws.onmessage = function (event) { //affiche le message recu dans la balise <span> affichemessage.innerHTML = event.data; }; // fonction qui envoie un message au serveur function envoyerMessage() { ws.send("J'envoie message au serveur."); }
La page index.html qui utilise le fichier websocket.js
Voici le code HTML complet de ce premier exemple. Une balise %%%% est utilisé pour visualiser la réponse du serveur : <file html index.html> <!DOCTYPE html> <html lang=“fr”> <head> <meta charset=“UTF-8”> <title>Websocket</title> </head> <body> En attente d'un message du serveur «script type=“text/javascript” src=“websocket.js”></script> </body> </html> </file> ===== L'application sur le serveur ===== <file python app.py> from flask import Flask, rendertemplate from flasksocketio import SocketIO app = Flask(name) app.config['SECRET_KEY'] = 'secret!' socketio = SocketIO(app) @app.route('/') def index(): “”“Fournir la page index.html”“” return render_template('index.html') if name == 'main': socketio.run(app, debug=True) </file>
Les messages textuels échangés lors d'une connexion Websocket sont au format UTF-8.
==== Activité Les langages pour créer des sites Web … ====