Erstellen Sie eine Echtzeit-Chat-Anwendung mit Modulus und Python

Lassen Sie mich Ihnen zunächst das endgültige Aussehen der Chat-Anwendung zeigen, das wir bis zum Ende dieses Artikels fertigstellen werden.

Wir implementieren die Anwendung mit Flask, Gunicorn für eine eigenständige WSGI-Anwendung und Flask-SocketIO für Echtzeitkommunikation.

1. Szenario

Schauen wir uns ein Beispielszenario an, das wir in diesem Artikel beim Erstellen der Anwendung verwenden können:

  1. Alberto möchte unsere Anwendung verwenden, damit er sie im Browser öffnet.
  2. Er wählt einen Spitznamen aus und meldet sich zum Chat an.
  3. Er schreibt etwas in den Textbereich und drückt Eingeben
  4. Der eingegebene Text wird an die Benutzer gesendet, die aktuell in der Chat-App angemeldet sind.

Wie Sie sehen, ist dies eine sehr einfache Anwendung, die alle Grundlagen einer Webanwendung abdeckt. Fahren wir mit dem Projektdesign fort.

2. Voraussetzungen

Bevor Sie mit der Implementierung des Projekts fortfahren, müssen wir einige erforderliche Abhängigkeiten und Bibliotheken überprüfen. Ich werde den Installationsprozess in Ubuntu durchführen, um die Installation zu vereinfachen.

2.1. Python

Sie können Python einfach installieren, indem Sie einfach den folgenden Befehl ausführen:

sudo apt-get install python-dev build-essential

2.2. Pip

pip ist ein Paketverwaltungssystem, das zum Installieren und Verwalten von in Python geschriebenen Softwarepaketen verwendet wird. Wir werden dies zur Installation von Python-Paketen für unsere Anwendung verwenden. Sie können pip installieren, indem Sie den folgenden Befehl ausführen:

sudo apt-get install python-pip

2.3. Virtualenv

Mit diesem Tool können Sie eine isolierte Python-Umgebung erstellen. Das bedeutet, Sie können Ihren Kontext in eine Umgebung mit Python-bezogenen Eigenschaften umschalten und in Ihre normale Umgebung zurückwechseln, wenn Sie keine Python-Entwicklung haben. Sie können Virtualenv installieren, indem Sie den folgenden Befehl ausführen:

sudo pip installiere virtualenv

2.4. Gunicorn

Gunicorn steht für Grünes Einhorn und es ist eine Python-WSGI (Web Simmer Gauf dem Weg ichnterface) HTTP-Server für UNIX. Gunicorn fungiert als Schnittstelle zwischen dem Webserver und Ihrer Python-Anwendung. Wir werden dies verwenden, um unsere Flask-Anwendung als eigenständige WSGI-Anwendung auszuführen. Wir müssen verwenden [email protected] weil neuere Versionen einige Probleme haben, die gelöst werden müssen.

sudo pip install gunicorn == 18.0

Wir sind mit der Installation fertig. Fahren wir mit dem Projekt-Setup fort.

3. Projekteinrichtung

Erstellen Sie ein Projektverzeichnis wie gewünscht.

mkdir realtimepythonchat

Wechseln Sie in das neu erstellte Verzeichnis und erstellen Sie eine virtuelle Umgebung für die Python-Entwicklung wie folgt:

virtualenv realtimepythonchat_env

Sie können den Namen der Umgebung entsprechend Ihren Anforderungen ändern. Die virtuelle Umgebung wurde erstellt, aber noch nicht aktiviert. Wenn Sie folgenden Befehl ausführen;

source realtimepythonchat_env / bin / aktivieren

Ihre virtuelle Python-Umgebung wird aktiviert, und wir können die Anforderungen in dieser virtuellen Umgebung installieren. Um die virtuelle Umgebung sicher zu stellen, können Sie überprüfen, ob die Befehlszeile mit dem Namen der virtuellen Umgebung in Klammern beginnt. Folgendes wird angezeigt:

3.1. Abhängigkeitsinstallation

Wir müssen einige abhängige Bibliotheken für unser Projekt installieren. Erstellen Sie eine Datei mit dem Namen anforderungen.txt im Wurzelverzeichnis Ihres Projekts und fügen Sie folgenden Inhalt in die Datei ein:

Kolben == 0.10.1 Flask-SocketIO Jinja2 == 2.7.2 MarkupSafe == 0,18 Werkzeug == 0,9,4 Gevent == 1,0 Gevent-Socketio == 0,3,6 Gevent-Websocket == 0,9,2 Greenlet = 0,4. 2 sein gefährlich == 0,23 ujson == 1,33

Diese Abhängigkeiten helfen uns, eine Echtzeit-Webanwendung zu erstellen. Nun lassen Sie uns Abhängigkeiten mit folgendem Befehl installieren

pip install -r Requirements.txt

3.2 Projektskelett

Bisher haben wir ein Projekt erstellt und die erforderliche Software installiert. Nun fügen wir projektspezifische Dateien hinzu.

Fügen Sie eine Datei mit dem Namen hinzu server.py und füge folgenden Inhalt hinzu:

from gevent import monkey monkey.patch_all () from flask import Flask, render_template, session, request von flask.ext.socketio importieren SocketIO, emit, join_room app = Flask (__ name__) app.debug = True app.config ['SECRET_KEY'] = 'nuttertools' socketio = SocketIO (app) @ app.route ('/') def chat (): return render_template ('chat.html') @ app.route ('/ login') def login (): return render_template zurück ('login.html') @ socketio.on ('message', namespace = "/ chat") def chat_message (message): emit ('message', 'data': message ['data']), broadcast = True) @ socketio.on ('connect', namespace = "/ chat") def test_connect (): emit ('meine Antwort', 'data': 'Connected', 'count': 0) wenn __name__ == '__main__': socketio.run (App) 

Dies ist eine einfache Flask-Anwendung, die durch das Flask-SocketIO-Modul läuft. Die erste und zweite Route dient zum Rendern der Hauptseite und der Anmeldeseite. Der dritte Weg ist für die Handhabung der Botschaft Veranstaltung auf der Plaudern Kanal. 

Wenn der Client eine Nachricht an diesen Endpunkt sendet, wird diese an die verbundenen Clients gesendet. Dies geschieht durch emittieren() Befehl. Der erste Parameter ist die Nachrichtennutzlast und der zweite Parameter dient zum Einstellen des Broadcast-Werts. Wenn dies der Fall ist, wird die Nachricht an die Clients gesendet. Der vierte Router ist eine einfache ACK-Nachricht für die Clientseite, um sicherzustellen, dass der Client mit dem Socket verbunden ist.

3.3 Vorlagen

Wir haben zwei Seiten - chat.html und login.html. Sie können den Inhalt der sehen login.html unten:

              

Wählen Sie einen Spitznamen, um den Chat zu betreten

Dies ist ein einfaches Anmeldesystem, das Benutzerinformationen enthält, die im Cookie gespeichert sind. Wenn Sie einen Spitznamen auswählen und fortfahren, wird Ihr Spitzname im Cookie gespeichert und Sie werden zur Chat-Seite weitergeleitet. Lass uns einen Blick darauf werfen chat.html.

                

Echtzeit-Chat-Anwendung mit Flask, SocketIO



Chatverlauf

Wie bereits erwähnt, kann der Client die SocketIO-JavaScript-Implementierung im Frontend verwenden. Die erforderliche clientseitige Bibliothek wird von CDN abgerufen. Tatsächlich werden alle CSS- und JavaSCript-Dateien von einem CDN abgerufen, um die Anwendung zu beschleunigen und die Projektgröße zu reduzieren. Sie können dieses Projekt klonen und problemlos auf Ihrem lokalen Computer ausführen.

Wenn Sie nach einer erfolgreichen Anmeldung zur Chat-Seite wechseln, wird das Cookie daraufhin überprüft, ob der Benutzer angemeldet ist oder nicht. Wenn nicht, wird der Benutzer erneut zur Anmeldeseite weitergeleitet. Wenn Sie die Chat-Seite erfolgreich aufrufen, besteht eine Socket-Verbindung zwischen Client und Server. SocketIO wird auf der Clientseite verwendet, und die Serverseite wurde bereits in den obigen Abschnitten implementiert. Wenn der Benutzer auf die Schaltfläche klickt Eingeben Taste oder drückt die Eingeben Schaltfläche wird der in den Nachrichtenbereich geschriebene Text angezeigt emittieren() zur Server-Seite. Die Nachricht wird serverseitig verarbeitet und über hte an die verbundenen Clients gesendet Plaudern Kanal. 

4. Projekt ausführen

Wir werden dieses Projekt als eigenständige WSGI-Anwendung ausführen. Dazu können Sie den folgenden Befehl verwenden:

gunicorn --worker-class socketio.sgunicorn.GeventSocketIOWorker Server: App

Wir rennen Gunicorn Befehl mit zwei Argumenten. Die erste ist die Arbeiterklasse und sie kommt von Gevent-Socketio. Der zweite ist der Anwendungsname mit seinem Modul. Hier ist das Modul server.py und der Name der Anwendung lautet app (die sich in der achten Zeile befindet server.py). Wenn Sie den obigen Befehl ausführen, sehen Sie folgende Ausgabe:

Als du gekommen bist http://127.0.0.1:8000, Sie sehen den folgenden Bildschirm:

5. Bereitstellung

Wir werden Modulus für unsere Implementierungsumgebung verwenden. Erstellen Sie zunächst ein Konto bei Modulus, und wechseln Sie zum Dashboard, um ein neues Projekt zu erstellen. Füllen Sie das aus Projektname und wählen Sie Python Feld von Projekttypen und klicken Sie auf PROJEKT ERSTELLEN. 

Nach einer erfolgreichen Kontoerstellung können wir mit der Bereitstellung fortfahren. Sie können die Bereitstellung auf Modul auf zwei Arten durchführen:

  1. Zippen Sie Ihr Projekt und laden Sie es aus Ihrem Modulus-Dashboard hoch
  2. Installieren Sie den Modulus-Client und stellen Sie ihn über die Befehlszeile bereit

Ich werde die Befehlszeilenbereitstellung für dieses Projekt verwenden. Installieren Sie zunächst Node.js auf Ihrem Computer. 

Wenn wir mit der Bereitstellung auf Modulus beginnen, führt Modulus auf seiner Seite den folgenden Befehl aus:

pip install -r Requirements.txt

Wir haben bereits eine Abhängigkeitsdatei benötigt - anforderungen.txt und dann wird Folgendes ausgeführt, um das bereitgestellte Projekt zu starten:

./manage.py migrieren

Wir müssen diesen Befehl jedoch überschreiben, um unsere Anwendung zu erstellen. Erstellen Sie eine Datei mit dem Namen app.json und folgenden Befehl in die Datei einfügen:

"scripts": "start": "gunicorn -b unix: /mnt/home/app.sock --worker-class socketio.sgunicorn.GeventSocketIOWorker server: app"

Nun können wir die Datei in Modulus hochladen. Öffnen Sie eine Befehlszeilenkonsole und führen Sie den folgenden Befehl aus.

npm install -g modulus

Sie sind bereit, Modulus CLI zu verwenden.

modul login

Sie werden aufgefordert, Ihren Benutzernamen / Ihre E-Mail-Adresse und Ihr Passwort einzugeben. Geben Sie die erforderlichen Anmeldeinformationen ein, und es ist Zeit für die Bereitstellung. Gehen Sie in Ihr Projektverzeichnis und führen Sie den folgenden Befehl aus.

modulus deploy -p "Ihr Projektname"

Mit dem obigen Befehl wird das aktuelle Projekt in dem zuvor erstellten Modul bereitgestellt. Vergessen Sie nicht, den Projektnamen durch den zuvor erstellten zu ersetzen. Wenn alles in Ordnung ist, wird eine Erfolgsmeldung in der Konsole angezeigt. Testen Sie Ihre Anwendung, indem Sie der URL folgen, die in der erfolgreichen Meldung in der Konsole angegeben ist.

6. Schlussfolgerung

Der Hauptzweck dieses Lernprogramms bestand darin, Ihnen zu zeigen, wie Sie eine Echtzeit-Chat-Anwendung mit Flask und SocketIO erstellen. Wir haben Modulus für den PaaS-Provider verwendet und es sind sehr einfache Schritte erforderlich, um Ihre Anwendung in der Produktionsumgebung bereitzustellen.