Flask WebSockets

Avec cette explication, nous allons apprendre ce qu’est un WebSocket et comment il fonctionne entre client et serveur. Nous apprendrons également à créer une application de chat en temps réel à l’aide du module flask_socketio dans Flask.

Créer une application en temps réel à l’aide du WebSocket flask_socketio dans Flask

Un WebSocket est un moyen d’ouvrir des sockets entre un client et un serveur. En utilisant WebSockets, nous pouvons envoyer des messages en temps réel.

Ce n’est pas le modèle typique de requête-réponse du Web ; c’est comme si une connexion ouverte existait toujours, et le serveur et le client peuvent se parler constamment.

Construisons maintenant l’application de chat ; le premier côté que nous allons gérer est le côté serveur. Il y a deux côtés : le premier côté serveur, qui sera géré depuis le Flask et le second côté client, qui sera géré depuis JavaScript.

Une extension flask_socketio permet au client de se connecter au serveur, il va donc falloir installer le module flask_socketio à l’aide de la commande suivante.

pip install Flask-SocketIO

Il installera flask_socketio avec toutes les dépendances dont il a besoin. flask_socketio est très similaire à une application flask typique, et les modèles sont les mêmes, mais certaines des choses que nous utilisons sont légèrement différentes.

Nous allons importer certaines classes et la fonction send pour créer cette application. Ensuite, nous allons créer une instance d’application, et comme tous les messages sont cryptés, nous avons besoin de la clé secrète ; nous définirons la clé secrète comme une valeur config.

Nous allons maintenant créer un objet pour la classe SocketIO() et l’instancier en passant l’application, et le deuxième argument est d’autoriser tous les domaines.

app.config["SECRET_KEY"] = "ffff111jjj52"
socketio = SocketIO(app, cors_allowed_origins="*")

Nous allons maintenant définir une route qui écoutera un événement particulier que nous spécifions à l’intérieur de la route, puis nous créerons une fonction qui sera appelée à tout moment lorsque nous enverrons le message avec le nom de fonction Text_MSG().

Cette fonction prend un paramètre appelé msg, et nous l’imprimerons pour nous assurer que tout fonctionne sur la console.

Nous prendrons le message provenant de n’importe qui et l’enverrons à toutes les personnes connectées au serveur à ce moment-là. Nous allons utiliser la fonction send(), qui prendra deux paramètres : l’un sera le msg qui est un message texte, et le second est un broadcast qui sera égal à True.

Si nous passons False à broadcast ou ne passons pas cet argument, alors il enverra par défaut le message à celui qui nous a envoyé le message en premier lieu.

Puisque nous diffusons et allons envoyer le même message que nous avons reçu d’un client, nous le renverrons à tous les clients, y compris le client dont nous venons de le recevoir.

@socketio.on("message")
def Text_MSG(msg):
    print("text-message: " + msg)
    send(msg, broadcast=True)

Au lieu d’utiliser app.run(), nous utiliserons socketio.run(app), avec des fonctionnalités supplémentaires pour exécuter l’application flask dans un environnement en temps réel.

if __name__ == "__main__":
    socketio.run(app)

Entrons dans le bâtiment du front-end, qui sera une page HTML. Nous allons importer quelques scripts d’un CDN pour la bibliothèque socket.io côté client. Nous utiliserons également jQuery pour gérer l’événement click sur le bouton.

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.4.8/socket.io.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

Dans la balise body, nous écrirons le code JavaScript. Parce que nous utilisons jQuery, nous devrons utiliser la méthode ready(), et à l’intérieur de ce $(document).ready(), nous devrons nous connecter au serveur sur lequel l’application flask est en cours d’exécution.

Nous allons créer un objet appelé socket et l’instancier à l’aide de connect() et transmettre l’URL du serveur Flask. Une fois que nous avons créé un objet, nous devons nous assurer que lorsque nous nous connectons au serveur, nous pouvons lui envoyer un message.

$(document).ready(function() {

    var socket = io.connect('http://127.0.0.1:5000');

    socket.on('connect', function() {
        socket.send('User has connected!');
    });

});

Cela signifie que nous écoutons un événement particulier, et l’événement de connexion se produit chaque fois que nous nous connectons pour la première fois au serveur, et une fois que cela se produit, il appelle cette fonction de rappel socket.on(). Cette fonction de rappel enverra au serveur que l’utilisateur s’est connecté, et le serveur le récupérera pour le lire et le renvoyer à tout le monde.

Ajoutons le code pour refléter tout message envoyé au serveur afin que nous écoutions un autre événement au lieu de connect. La fonction de rappel message ajoutera les messages à notre liste de messages, et nous épinglerons également un élément de la liste avec le texte du message.

socket.on('message', function(msg) {
    $("#messages").append('<li>'+msg+'</li>');
    console.log('Received message');
});

La dernière chose que nous ferons est d’autoriser l’envoi d’un message à l’aide du bouton. Nous allons donc mettre un événement click sur le bouton d’envoi et attacher l’id myMessage à l’id de la balise input.

Une fois que nous enverrons cela, nous effacerons notre message pour faire place à un nouveau message en utilisant la méthode val('').

$('#sendbutton').on('click', function() {
    socket.send($('#myMessage').val());
    $('#myMessage').val('');
});

Maintenant, nous allons le sauvegarder et exécuter le serveur Flask, puis nous ouvrirons un fichier index.html dans deux fenêtres. Lorsque nous mettons du texte dans le champ de saisie et que nous appuyons sur le bouton send, nous recevrons simultanément des messages dans une autre fenêtre.

Remarque : Si vous obtenez une erreur, exécutez les commandes suivantes dans le terminal.

pip install --upgrade python-socketio==4.6.0

pip install --upgrade python-engineio==3.13.2

pip install --upgrade Flask-SocketIO==4.3.1

Code Python complet :

from flask import Flask
from flask_socketio import SocketIO, send

app = Flask(__name__)
app.config["SECRET_KEY"] = "ffff111jjj52"
socketio = SocketIO(app, cors_allowed_origins="*")


@socketio.on("message")
def Text_MSG(msg):
    print("text-message: " + msg)
    send(msg, broadcast=True)


if __name__ == "__main__":
    socketio.run(app)

Code HTML complet :

<html>
<head>
<title>Chat Room</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.4.8/socket.io.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function() {

    var socket = io.connect('http://127.0.0.1:5000');

    socket.on('connect', function() {
        socket.send('User has connected!');
    });

    socket.on('message', function(msg) {
        $("#messages").append('<li>'+msg+'</li>');
        console.log('Received message');
    });

    $('#sendbutton').on('click', function() {
        socket.send($('#myMessage').val());
        $('#myMessage').val('');
    });

});
</script>
<ul id="messages"></ul>
<input type="text" id="myMessage">
<button id="sendbutton">Send</button>
</body>
</html>