Costruisci un'applicazione di chat in tempo reale con modulo e Python

Prima di tutto, lascia che ti mostri l'aspetto finale dell'applicazione di chat che completeremo entro la fine di questo articolo.

Implementeremo l'applicazione con Flask, Gunicorn per l'applicazione WSGI standalone e Flask-SocketIO per la comunicazione in tempo reale.

1. Scenario

Diamo un'occhiata a uno scenario di esempio che possiamo utilizzare in questo articolo mentre costruiamo l'applicazione:

  1. Alberto vuole usare la nostra applicazione in modo che la apra nel browser.
  2. Seleziona un nickname e accede alla chat.
  3. Scrive qualcosa nell'area di testo e preme accedere
  4. Il testo inserito verrà trasmesso agli utenti che sono attualmente connessi all'app di chat.

Come puoi vedere, questa è un'applicazione molto semplice che coprirà tutte le basi di un'applicazione web. Continuiamo con la progettazione del progetto.

2. Prerequisiti

Prima di procedere con l'implementazione del progetto, è necessario rivedere alcune dipendenze e librerie richieste. Eseguirò il processo di installazione in Ubuntu per rendere l'installazione molto più semplice.

2.1. Pitone

Puoi semplicemente installare Python semplicemente eseguendo il seguente comando:

sudo apt-get installa python-dev build-essential

2.2. seme

pip è un sistema di gestione dei pacchetti usato per installare e gestire pacchetti software scritti in Python. Lo useremo per installare pacchetti Python per la nostra applicazione. È possibile installare pip eseguendo il seguente comando:

sudo apt-get install python-pip

2.3. vIRTUALENV

Questo strumento ti consente di creare un ambiente Python isolato. Ciò significa che puoi passare il contesto all'ambiente che ha proprietà relative a Python e tornare al tuo ambiente normale se non hai lo sviluppo di Python. È possibile installare Virtualenv eseguendo il seguente comando:

sudo pip installa virtualenv

2.4. Gunicorn

Gunicorn sta per Unicorno verde ed è un WSFI Python (Web Server solateway ionterface) Server HTTP per UNIX. Gunicorn agisce come un'interfaccia tra il server web e l'applicazione Python. Lo useremo per eseguire la nostra applicazione Flask come applicazione WSGI autonoma. Dobbiamo usare [email protected] perché le versioni più recenti hanno alcuni problemi che devono essere risolti.

sudo pip installa gunicorn == 18.0

Abbiamo finito con la parte di installazione. Continuiamo con la configurazione del progetto.

3. Impostazione del progetto

Crea una directory di progetto come vuoi;

mkdir realtimepythonchat

Vai alla directory appena creata e crea un ambiente virtuale per lo sviluppo di Python come questo:

virtualenv realtimepythonchat_env

È possibile modificare il nome dell'ambiente in base alle proprie esigenze. L'ambiente virtuale viene creato ma non ancora attivato. Se si esegue il seguente comando;

fonte realtimepythonchat_env / bin / activate

Il tuo ambiente virtuale Python verrà attivato e siamo pronti a installare i requisiti all'interno di questo ambiente virtuale. Per essere sicuri dell'ambiente virtuale, puoi verificare che la riga di comando inizi con il nome dell'ambiente virtuale tra parentesi e vedrai quanto segue;

3.1. Installazione delle dipendenze

Abbiamo bisogno di installare alcune librerie dipendenti per il nostro progetto. Crea un file chiamato requirements.txt nella directory principale del tuo progetto e inserisci il seguente contenuto all'interno del file:

Flask == 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 itsdangerous == 0.23 ujson == 1.33

Queste dipendenze ci aiuteranno a creare un'applicazione web in tempo reale. Ora installiamo le dipendenze con il seguente comando

pip installa -r requirements.txt

3.2 Scheletro del progetto

Finora, abbiamo creato un progetto e installato il software richiesto. Ora, aggiungiamo i file specifici del progetto.

Aggiungi un file chiamato server.py e inserire il seguente contenuto in esso:

da gevent import scimmia monkey.patch_all () da flask import Flask, render_template, session, request da 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 (): restituisce render_template ('chat.html') @ app.route ('/ login') def login (): restituisci render_template ('login.html') @ socketio.on ('message', namespace = "/ chat") def chat_message (message): emit ('message', 'data': message ['data'], broadcast = Vero) @ socketio.on ('connect', namespace = "/ chat") def test_connect (): emit ('my response', 'data': 'Connected', 'count': 0) se __name__ == '__main__': socketio.run (app) 

Questa è una semplice applicazione Flask che attraversa il modulo Flask-SocketIO. Il primo e il secondo percorso servono per il rendering della pagina principale e della pagina di accesso. Il terzo percorso è per la gestione del Messaggio evento sul Chiacchierare canale. 

Quando il client invia un messaggio a questo endpoint, verrà trasmesso ai client connessi. Questo è fatto da emettere() comando. Il primo parametro è il carico utile del messaggio e il secondo è per l'impostazione del valore di trasmissione. Se è vero, il messaggio verrà trasmesso ai client. Il 4 ° router è per un semplice messaggio ACK per il lato client per garantire che il client sia connesso al socket.

3.3 Modelli

Abbiamo due pagine - chat.html e login.html. Puoi vedere il contenuto del login.html sotto:

              

Scegli un nickname per accedere alla chat

Questo è un semplice sistema di accesso che include le informazioni dell'utente memorizzate nel cookie. Quando selezioni un soprannome e procedi, il tuo nickname verrà archiviato nel cookie e verrai reindirizzato alla pagina di chat. Diamo un'occhiata a chat.html.

                

Applicazione chat in tempo reale con Flask, SocketIO



Storia della chat

Come già detto, il lato client può utilizzare l'implementazione JavaScript SocketIO sul front-end. La libreria sul lato client richiesta viene recuperata da CDN. In realtà, tutti i file CSS e JavaSCript vengono recuperati da un CDN per rendere l'applicazione più veloce e ridurre le dimensioni del progetto. Puoi clonare questo progetto ed eseguirlo facilmente sul tuo computer locale.

Quando si accede alla pagina di chat dopo aver effettuato correttamente l'accesso, il cookie verrà controllato per vedere se l'utente ha effettuato l'accesso o meno. In caso contrario, l'utente verrà reindirizzato nuovamente alla pagina di accesso. Se si accede correttamente alla pagina di chat, ci sarà una connessione socket tra client e server. SocketIO viene utilizzato sul lato client e il lato server è già stato implementato nelle sezioni precedenti. Quando l'utente fa clic su accedere tasto o preme il tasto accedere pulsante, il testo scritto nell'area messaggi sarà emettere() sul lato server. Il messaggio verrà gestito sul lato server e verrà trasmesso ai client connessi tramite hte Chiacchierare canale. 

4. Esecuzione del progetto

Eseguiremo questo progetto come applicazione WSGI autonoma. Per fare ciò, puoi usare il seguente comando:

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

Stiamo correndo gunicorn comando con due argomenti. Il primo è la classe operaia e viene da gevent-socketio. Il secondo è il nome dell'applicazione con il suo modulo. Qui, il modulo è server.py e il nome dell'applicazione è app (che si trova sull'ottava riga in server.py). Quando esegui il comando sopra, vedrai un output come questo:

Quando sei arrivato http://127.0.0.1:8000, vedrai la seguente schermata:

5. Distribuzione

Useremo Modulus per il nostro ambiente di distribuzione. Prima di tutto, crea un account su Modulus e vai alla Dashboard per creare un nuovo progetto. Compila il Nome del progetto e selezionare Pitone casella da tipi di progetto e fare clic CREA PROGETTO. 

Dopo aver creato con successo un account, possiamo procedere con la distribuzione. Puoi eseguire il deployment su Modulus in due modi:

  1. Comprimi il tuo progetto e caricalo dalla tua dashboard Modulus
  2. Installare il client Modulus e distribuire dalla riga di comando

Userò la distribuzione da riga di comando per questo progetto. Prima di tutto, installa Node.js sul tuo computer. 

Quando iniziamo la nostra implementazione su Modulus, Modulus eseguirà il seguente comando dalla loro parte:

pip installa -r requirements.txt

Abbiamo già richiesto il file di dipendenza - requirements.txt e poi eseguirà seguendo per avviare il progetto distribuito:

./manage.py migrare

Tuttavia, abbiamo bisogno di sovrascrivere questo comando per rendere attiva la nostra applicazione. Crea un file chiamato app.json e metti il ​​seguente comando all'interno del file:

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

Ora siamo pronti per caricare il file su Modulus. Aprire una console della riga di comando ed eseguire il seguente comando.

npm install -g modulo

Sei pronto per usare Modulus CLI, esegui il seguente comando per accedere a Modulus.

accesso modulo

Ti verrà richiesto il tuo nome utente / email e password. Inserisci le credenziali richieste ed è ora di implementare. Vai alla directory del tuo progetto ed esegui il seguente comando.

modulus deploy -p "il nome del tuo progetto"

Sopra il comando verrà distribuito il progetto corrente sul modulo che è stato creato in precedenza. Non dimenticare di sostituire il nome del progetto con quello che hai creato prima. Se tutto va bene, vedrai un messaggio di successo nella console e testerai la tua applicazione seguendo l'URL fornito all'interno del messaggio di successo nella console.

6. Conclusione

Lo scopo principale di questo tutorial è stato mostrare come creare un'applicazione di chat in tempo reale con Flask e SocketIO. Abbiamo utilizzato Modulus per il provider PaaS e ha passaggi molto semplici per distribuire l'applicazione nell'ambiente di produzione.