Flask-WebSockets

Mit dieser Erklärung erfahren wir, was ein WebSocket ist und wie es zwischen Client und Server funktioniert. Wir werden auch lernen, wie man eine Echtzeit-Chat-Anwendung mit Hilfe des Flask-Moduls “flask_socketio” erstellt.

Erstellen Sie eine Echtzeitanwendung mit Hilfe des WebSockets flask_socketio in Flask

Ein WebSocket ist eine Möglichkeit, Sockets zwischen einem Client und einem Server zu öffnen. Mit WebSockets können wir Nachrichten in Echtzeit versenden.

Es ist nicht das typische Request-Response-Modell des Webs; Es ist, als ob immer eine offene Verbindung besteht und der Server und der Client ständig miteinander kommunizieren können.

Lassen Sie uns nun die Chat-App erstellen; Die erste Seite, die wir behandeln werden, ist die Serverseite. Es gibt zwei Seiten: Die erste ist serverseitig, die von Flask aus gehandhabt wird, und die zweite ist clientseitig, die von JavaScript aus gehandhabt wird.

Eine Erweiterung flask_socketio ermöglicht es dem Client, sich mit dem Server zu verbinden, also müssen wir das Modul flask_socketio mit dem folgenden Befehl installieren.

pip install Flask-SocketIO

Es installiert flask_socketio zusammen mit allen erforderlichen Abhängigkeiten. flask_socketio ist einer typischen Flask-App sehr ähnlich, und die Muster sind die gleichen, aber einige der Dinge, die wir verwenden, sind etwas anders.

Wir werden einige Klassen und die Funktion send importieren, um diese App zu erstellen. Dann erstellen wir eine App-Instanz, und da alle Nachrichten verschlüsselt sind, benötigen wir den geheimen Schlüssel; Wir werden den geheimen Schlüssel als einen config-Wert definieren.

Jetzt erstellen wir ein Objekt für die Klasse SocketIO() und instanziieren es, indem wir die App übergeben, und das zweite Argument ist, alle Domänen zuzulassen.

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

Jetzt definieren wir eine Route, die auf ein bestimmtes Ereignis wartet, das wir in der Route angeben, und dann erstellen wir eine Funktion, die jederzeit aufgerufen wird, wenn wir die Nachricht mit dem Funktionsnamen Text_MSG() senden.

Diese Funktion nimmt einen Parameter namens msg und wir werden ihn ausdrucken, um sicherzustellen, dass alles auf der Konsole funktioniert.

Wir nehmen die Nachricht, die von jedem kommt, und senden sie an alle, die in diesem Moment mit dem Server verbunden sind. Wir werden die Funktion send() verwenden, die zwei Parameter annehmen wird: Einer ist die msg, das ist eine Textnachricht, und der zweite ist eine broadcast, die gleich True ist.

Wenn wir False an broadcast übergeben oder dieses Argument nicht übergeben, sendet es die Nachricht standardmäßig an denjenigen, von dem wir die Nachricht ursprünglich erhalten haben.

Da wir dieselbe Nachricht, die wir von einem Kunden erhalten haben, senden und versenden, werden wir sie an alle Kunden zurücksenden, einschließlich des Kunden, von dem wir sie gerade erhalten haben.

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

Anstatt app.run() zu verwenden, verwenden wir socketio.run(app) mit zusätzlicher Funktionalität, um die Flask-App in einer Echtzeitumgebung auszuführen.

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

Lassen Sie uns in das Gebäude im Frontend einsteigen, das eine HTML-Seite sein wird. Wir werden ein paar Skripte aus einem CDN für die clientseitige socket.io-Bibliothek importieren. Wir werden auch jQuery verwenden, um das Klickereignis auf der Schaltfläche zu verarbeiten.

<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>

In das body-Tag schreiben wir den JavaScript-Code. Da wir jQuery verwenden, müssen wir die Methode ready() verwenden, und innerhalb dieses $(document).ready() müssen wir uns mit dem Server verbinden, auf dem die Flask-App ausgeführt wird.

Wir erstellen ein Objekt namens socket und instanziieren es mit connect() und übergeben die URL für den Flask-Server. Sobald wir ein Objekt erstellt haben, müssen wir sicherstellen, dass wir eine Nachricht an ihn senden können, wenn wir uns mit dem Server verbinden.

$(document).ready(function() {

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

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

});

Das bedeutet, dass wir auf ein bestimmtes Ereignis lauschen, und das Verbindungsereignis tritt auf, wenn wir uns zum ersten Mal mit dem Server verbinden, und sobald dies geschieht, ruft es diese socket.on()-Callback-Funktion auf. Diese Rückruffunktion sendet an den Server, mit dem der Benutzer verbunden ist, und der Server nimmt sie auf, um sie zu lesen und an alle zurückzusenden.

Lassen Sie uns den Code hinzufügen, um jede Nachricht zu spiegeln, die an den Server gesendet wird, damit wir auf ein anderes Ereignis warten, anstatt auf connect. Die Callback-Funktion message fügt die Nachrichten an unsere Nachrichtenliste an, und wir pinnen auch ein Listenelement mit dem Text der Nachricht.

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

Das letzte, was wir tun werden, ist das Senden einer Nachricht über die Schaltfläche zuzulassen. Wir werden also ein Klickereignis auf die Schaltfläche send setzen und die myMessage-ID mit der input-Tag-ID anhängen.

Sobald wir das gesendet haben, werden wir unsere Nachricht löschen, um Platz für eine neue Nachricht zu schaffen, indem wir die Methode val('') verwenden.

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

Jetzt werden wir es speichern und den Flask-Server ausführen, und dann werden wir eine index.html-Datei in zwei Fenstern öffnen. Wenn wir etwas Text in das Eingabefeld eingeben und auf die Schaltfläche send klicken, erhalten wir gleichzeitig Nachrichten in einem anderen Fenster.

Hinweis: Wenn Sie eine Fehlermeldung erhalten, führen Sie die folgenden Befehle im Terminal aus.

pip install --upgrade python-socketio==4.6.0

pip install --upgrade python-engineio==3.13.2

pip install --upgrade Flask-SocketIO==4.3.1

Vollständiger Python-Code:

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)

Vollständiger HTML-Code:

<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>