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

Guide pratique de l'application WebSocket sous le framework Flask

WBOY
Libérer: 2023-09-29 10:06:26
original
1467 Les gens l'ont consulté

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.

  1. Installez Flask-SocketIO
    Installez Flask-SockeIO via la commande pip :

    pip install flask-socketio
    Copier après la connexion
  2. 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)
    Copier après la connexion
  3. Définissez la méthode pour recevoir les messages WebSocket

    @socketio.on('message')
    def handle_message(message):
     print('received message: ' + message)
    Copier après la connexion
  4. Définir l'envoi Méthode de messages WebSocket

    def send_message(message):
     socketio.emit('message', message)
    Copier après la connexion
  5. Démarrez l'application

    if __name__ == '__main__':
     socketio.run(app)
    Copier après la connexion

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)
Copier après la connexion

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>
Copier après la connexion

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!

source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal