Bouw een realtime chatapplicatie met modulus en python

Allereerst wil ik u de laatste indruk van de chattoepassing laten zien die we aan het einde van dit artikel hebben voltooid.

We zullen de applicatie implementeren met Flask, Gunicorn voor stand-alone WSGI-applicaties en Flask-SocketIO voor real-time communicatie.

1. Scenario

Laten we een voorbeeldscenario bekijken dat we in dit artikel kunnen gebruiken terwijl we de applicatie bouwen:

  1. Alberto wil onze applicatie gebruiken, zodat hij deze in de browser opent.
  2. Hij selecteert een bijnaam en meldt zich aan om te chatten.
  3. Hij schrijft iets in het tekstgebied en drukt op invoeren
  4. De ingevoerde tekst wordt uitgezonden naar de gebruikers die momenteel zijn aangemeld bij de chat-app.

Zoals u kunt zien, is dit een zeer eenvoudige applicatie die alle basisbegrippen van een webtoepassing zal omvatten. Laten we doorgaan met het projectontwerp.

2. Vereisten

Voordat we doorgaan met de implementatie van het project, moeten we enkele vereiste afhankelijkheden en bibliotheken doornemen. Ik zal het installatieproces in Ubuntu uitvoeren om de installatie veel eenvoudiger te maken.

2.1. Python

U kunt eenvoudig Python installeren door simpelweg de volgende opdracht uit te voeren:

sudo apt-get install python-dev build-essentieel

2.2. Pip

pip is een pakketbeheersysteem dat wordt gebruikt voor het installeren en beheren van softwarepakketten die zijn geschreven in Python. We zullen dit gebruiken voor het installeren van Python-pakketten voor onze applicatie. U kunt pip installeren door het volgende commando uit te voeren:

sudo apt-get install python-pip

2.3. virtualenv

Met deze tool kunt u een geïsoleerde Python-omgeving creëren. Dit betekent dat je je context kunt omzetten naar een omgeving met Python-gerelateerde eigenschappen en terugschakelen naar je normale omgeving als je geen Python-ontwikkeling hebt. U kunt Virtualenv installeren door de volgende opdracht uit te voeren:

sudo pip install virtualenv

2.4. Gunicorn

Gunicorn staat voor Groene eenhoorn en het is een Python WSGI (web Server Gateway iknterface) HTTP-server voor UNIX. Gunicorn fungeert als een interface tussen de webserver en uw Python-toepassing. We zullen dit gebruiken om onze Flask-applicatie uit te voeren als zelfstandige WSGI-applicatie. We moeten gebruiken [email protected] omdat nieuwere versies enkele problemen hebben die moeten worden opgelost.

sudo pip install gunicorn == 18.0

We zijn klaar met het installatiedeel. Laten we doorgaan met het instellen van het project.

3. Projectinstellingen

Maak een projectmap zoals je wilt;

mkdir realtimepythonchat

Ga naar de nieuw aangemaakte map en maak een virtuele omgeving voor Python-ontwikkeling zoals deze:

virtualenv realtimepythonchat_env

U kunt de naam van de omgeving naar behoefte wijzigen. Virtuele omgeving is gemaakt maar is nog niet geactiveerd. Als u het volgende commando uitvoert;

bron realtimepythonchat_env / bin / activate

Uw virtuele Python-omgeving wordt geactiveerd en we zijn klaar om vereisten binnen deze virtuele omgeving te installeren. Om zeker te zijn van de virtuele omgeving, kunt u uw opdrachtregel starten met de naam van de virtuele omgeving tussen haakjes en u ziet het volgende;

3.1. Afhankelijkheid installatie

We moeten een aantal afhankelijke bibliotheken installeren voor ons project. Maak een bestand met de naam requirements.txt in de hoofdmap van uw project en zet de volgende inhoud in het bestand:

Kolf == 0.10.1 Kolf-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 zijn gevaarlijk == 0.23 ujson == 1.33

Deze afhankelijkheden zullen ons helpen om een ​​real-time webapplicatie te maken. Laten we nu de afhankelijkheden installeren met de volgende opdracht

pip install -r requirements.txt

3.2 Project skelet

Tot nu toe hebben we een project gemaakt en de vereiste software geïnstalleerd. Laten we nu projectspecifieke bestanden toevoegen.

Voeg een bestand toe met de naam server.py en leg de volgende inhoud erin:

from gevent import monkey monkey.patch_all () from flask import Flask, render_template, session, request from flask.ext.socketio import 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 ('login.html') @ socketio.on ('message', namespace = "/ chat") def chat_message (bericht): emit ('message', 'data': message ['data'], broadcast = Waar) @ socketio.on ('connect', namespace = "/ chat") def test_connect (): emit ('mijn antwoord', 'data': 'Connected', 'count': 0) if __name__ == '__main__': socketio.run (app) 

Dit is een eenvoudige Flask-toepassing die door de Flask-SocketIO-module loopt. De eerste en tweede route dienen voor het weergeven van de hoofdpagina en de inlogpagina. De derde route is voor het afhandelen van de bericht evenement op de babbelen kanaal. 

Wanneer de client een bericht naar dit eindpunt verzendt, wordt deze naar de verbonden clients verzonden. Dit wordt gedaan door zenden () commando. De eerste parameter is de payload van het bericht en de tweede parameter voor het instellen van de broadcast-waarde. Als het waar is, wordt een bericht naar de clients verzonden. De vierde router is voor eenvoudig ACK-bericht voor de clientzijde om ervoor te zorgen dat de client op de socket is aangesloten.

3.3 Sjablonen

We hebben twee pagina's - chat.html en login.html. U kunt de inhoud van de bekijken login.html hieronder:

              

Kies een bijnaam om naar de chat te gaan

Dit is een eenvoudig inlogsysteem dat gebruikersinformatie bevat die is opgeslagen in de cookie. Wanneer u een bijnaam selecteert en doorgaat, wordt uw bijnaam opgeslagen in de cookie en wordt u omgeleid naar de chatpagina. Laten we eens kijken chat.html.

                

Realtime Chat-toepassing met Flask, SocketIO



Chatgeschiedenis

Zoals we al zeiden, kan de client-side de SocketIO JavaScript-implementatie op de front-end gebruiken. De vereiste client-side bibliotheek wordt opgehaald van CDN. In feite worden alle CSS- en JavaSCript-bestanden opgehaald van een CDN om de toepassing sneller te maken en de projectomvang te verkleinen. U kunt dit project klonen en gemakkelijk op uw lokale computer uitvoeren.

Wanneer u naar de chatpagina gaat na een succesvolle aanmelding, wordt de cookie gecontroleerd om te zien of de gebruiker is ingelogd of niet. Als dit niet het geval is, wordt de gebruiker opnieuw omgeleid naar de aanmeldingspagina. Als u met succes naar de chatpagina gaat, is er een socketverbinding tussen client en server. SocketIO wordt gebruikt aan de clientzijde en de serverkant is al geïmplementeerd in bovenstaande secties. Wanneer gebruiker op klikt invoeren toets of drukt op de invoeren knop, de tekst geschreven in het berichtgebied zal zijn zenden () naar de server-kant. Het bericht wordt aan de serverzijde behandeld en via de server naar de verbonden clients uitgezonden babbelen kanaal. 

4. Project uitvoeren

We zullen dit project uitvoeren als zelfstandige WSGI-applicatie. Om dit te doen, kunt u de volgende opdracht gebruiken:

gunicorn --worker-class socketio.sgunicorn.GeventSocketIOWorker server: app

We zijn aan het rennen gunicorn commando met twee argumenten. De eerste is de arbeidersklasse en die komt van gevent-socketio. De tweede is de applicatie naam met zijn module. Hier is de module server.py en de applicatie naam is app (die op de achtste regel staat) server.py). Wanneer je bovenstaande opdracht uitvoert, zul je de uitvoer als volgt zien:

Wanneer je moet http://127.0.0.1:8000, je ziet het volgende scherm:

5. Implementatie

We zullen Modulus gebruiken voor onze inzetomgeving. Maak eerst een account op Modulus en ga naar het Dashboard om een ​​nieuw project te maken. Vul de Naam van het project en selecteer Python vak van projecttypen en klik CREËER PROJECT. 

Nadat een account is gemaakt, kunnen we doorgaan met de implementatie. U kunt op twee manieren gebruikmaken van Modulus:

  1. Zip uw project en upload het vanuit uw Modulus-dashboard
  2. Installeer Modulus-client en implementeer vanaf de opdrachtregel

Ik gebruik de opdrachtregelimplementatie voor dit project. Installeer eerst Node.js op uw computer. 

Wanneer we onze implementatie naar Modulus beginnen, zal Modulus het volgende commando uitvoeren aan hun kant:

pip install -r requirements.txt

We hebben al een afhankelijkheidsbestand nodig - requirements.txt en dan zal het volgende uitvoeren om het geïmplementeerde project te starten:

./manage.py migreren

We moeten deze opdracht echter overschrijven om onze applicatie op te zetten. Maak een bestand met de naam app.json en zet het volgende opdrachtbestand in:

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

Nu zijn we klaar om het bestand te uploaden naar Modulus. Open een opdrachtregelconsole en voer het volgende commando uit.

npm install-g modulus

U bent klaar om Modulus CLI te gebruiken, voert het volgende commando uit om Modulus in te loggen.

modulus login

U wordt gevraagd om uw gebruikersnaam / e-mailadres en wachtwoord. Voer de vereiste inloggegevens in en het is tijd om in te zetten. Ga naar je projectdirectory en voer het volgende commando uit.

modulus deploy -p "uw projectnaam"

Bovenstaande opdracht zal het huidige project toepassen op de modulus die u eerder hebt gemaakt. Vergeet niet om de projectnaam te vervangen door de naam die je eerder hebt gemaakt. Als alles in orde is, ziet u een bericht over succes in de console en test u uw toepassing door de URL te volgen die is opgegeven in het bericht in de console..

6. Conclusie

Het belangrijkste doel van deze tutorial was om je te laten zien hoe je een real-time chat-applicatie maakt met Flask en SocketIO. We hebben de Modulus for PaaS-provider gebruikt en het heeft heel eenvoudige stappen om uw applicatie in de productieomgeving te implementeren.