Maison > Article > développement back-end > Guide pratique de l'application WebSocket sous le framework Flask

Guide pratique de l'application WebSocket sous le framework Flask

WBOYoriginal: 2023-09-29 10:06:261439parcourir

Guide pratique de lapplication WebSocket sous le framework Flask

WebSocket Application Practice Guide under the Flask Framework

Résumé : WebSocket est un protocole de communication bidirectionnelle en temps réel, qui peut établir une connexion persistante entre le navigateur et le serveur. Lorsque vous utilisez le framework Flask pour développer des applications Web, combiné à WebSocket, des mises à jour de données en temps réel, une messagerie instantanée et d'autres fonctions peuvent être réalisées. Cet article explique comment utiliser WebSocket dans le framework Flask et fournit des exemples de code.

Introduction :
Avec le développement d'Internet, les exigences en temps réel sont de plus en plus élevées, et le modèle requête-réponse HTTP traditionnel n'est plus en mesure de répondre à cette demande. Dans le passé, afin d'obtenir une communication en temps réel, une interrogation longue ou une interrogation courte était souvent utilisée. Mais cette méthode est inefficace et gaspille de la bande passante. L'émergence du protocole WebSocket résout ce problème, permettant d'établir une connexion persistante en duplex intégral entre le navigateur et le serveur pour établir une communication en temps réel.

1. Introduction au principe WebSocket :
Le protocole WebSocket est un protocole basé sur TCP, qui peut établir un canal de communication bidirectionnel entre le navigateur et le serveur. Le protocole HTTP traditionnel est un modèle « requête-réponse », c'est-à-dire que le client envoie une requête au serveur, et le serveur traite la requête après l'avoir reçue et renvoie une réponse au client. Le protocole WebSocket peut établir directement une connexion bidirectionnelle persistante entre le client et le serveur. Les clients et les serveurs peuvent effectuer des transferts de données en temps réel via cette connexion sans attendre la même surcharge de performances que les requêtes HTTP.

2. Flask intègre WebSocket :
Dans le framework Flask, la prise en charge de WebSocket peut être obtenue via le plug-in Flask-SocketIO. Flask-SocketIO est une extension du framework Flask qui fournit la fonctionnalité WebSocket. Vous trouverez ci-dessous les étapes pour intégrer WebSocket.

Installez Flask-SocketIO
Installez Flask-SockeIO via la commande pip :
```
pip install flask-socketio
```

Importez Flask-SocketIO et créez un objet d'application

from flask import Flask
from flask_socketio import SocketIO

app = Flask(__name__)
socketio = SocketIO(app)

Définissez la méthode pour recevoir les messages WebSocket

@socketio.on('message')
def handle_message(message):
 print('received message: ' + message)

Définir l'envoi Méthode de messages WebSocket

def send_message(message):
 socketio.emit('message', message)

Démarrez l'application

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

3. Exemple d'application WebSocket :
Ce qui suit est un exemple simple de salle de discussion pour montrer comment utiliser WebSocket pour implémenter la fonction de discussion en temps réel.

from flask import Flask, render_template
from flask_socketio import SocketIO

app = Flask(__name__)
app.config['SECRET_KEY'] = 'secret!'
socketio = SocketIO(app)

@app.route('/')
def index():
    return render_template('index.html')

@socketio.on('message')
def handle_message(message):
    socketio.emit('message', message)

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

Dans index.html, vous pouvez interagir avec le serveur via du code JavaScript pour réaliser la fonction de chat en temps réel.

<!DOCTYPE html>
<html>
    <head>
        <title>Flask Websocket Chat</title>
        <script src="//cdnjs.cloudflare.com/ajax/libs/socket.io/1.3.6/socket.io.min.js"></script>
        <script>
            var socket = io.connect('http://' + document.domain + ':' + location.port);

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

            socket.on('message', function(data) {
                var new_message = document.createElement('div');
                new_message.innerHTML = data;
                document.querySelector('#messages').appendChild(new_message);
            });

            function sendMessage() {
                var message = document.querySelector('#message_input').value;
                socket.send(message);
            }
        </script>
    </head>
    <body>
        <h1>Flask Websocket Chat</h1>
        <div id="messages"></div>
        <input type="text" id="message_input">
        <button onclick="sendMessage()">Send</button>
    </body>
</html>

En exécutant le code ci-dessus, vous pouvez implémenter une simple salle de discussion WebSocket.

Conclusion :
Cet article présente comment intégrer WebSocket dans le framework Flask et fournit un exemple simple de salle de discussion. Grâce au plug-in Flask-SocketIO, WebSocket peut être facilement utilisé pour implémenter des fonctions de communication en temps réel. Lors du développement d'applications Web, la combinaison de WebSocket peut améliorer l'expérience utilisateur et réaliser des mises à jour de données en temps réel, une messagerie instantanée et d'autres fonctions. J'espère que cet article vous aidera à utiliser WebSocket dans le framework Flask.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

JavaScript flask html pip 对象 http websocket

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Flask vs FastAPI : le meilleur choix pour créer des API efficacesArticle suivant：Flask vs FastAPI : le meilleur choix pour créer des API efficaces

Articles Liés

Voir plus