Come costruire uno stato di consegna dei messaggi in Django

Oggi creeremo un framework sullo stato di consegna dei messaggi in tempo reale con Django e Pusher.

Per seguire questo tutorial è necessaria una conoscenza di base di Django e Vue.

Configurare Django

Innanzitutto, dobbiamo installare la libreria Python Django se non l'abbiamo già.
 Per installare Django, eseguiamo:

Dopo aver installato Django, è tempo di creare il nostro progetto. Apri un terminale e crea un nuovo progetto usando il seguente comando:

https://gist.github.com/4896cf41463ff83e191949a02bbead23

Nel comando sopra, abbiamo creato un nuovo progetto chiamato pusher_message. Il prossimo passo sarà creare un'app all'interno del nostro nuovo progetto. Per fare ciò, eseguiamo i seguenti comandi:

Una volta terminata la configurazione della nuova app, dobbiamo dire a Django della nostra nuova applicazione, quindi andremo nel nostro pusher_message \ settings.py e aggiungere l'app del messaggio alle nostre app installate come mostrato di seguito:

Dopo aver fatto quanto sopra, è tempo per noi di eseguire l'applicazione e vedere se tutto è andato bene.

Nella nostra shell terminale, eseguiamo:

Se spostiamo il nostro browser su http: // localhost: 8000, dovremmo vedere quanto segue:

Configura un'app su Pusher

A questo punto, Django è pronto e installato. Ora dobbiamo configurare Pusher e acquisire le credenziali delle nostre app.

Dobbiamo registrarci su Pusher, creare una nuova app e anche copiare la nostra chiave segreta dell'applicazione e l'id dell'applicazione.

Il prossimo passo è installare le librerie richieste:

Nel comando bash sopra, abbiamo installato un pacchetto, pusher. Questa è la libreria Pusher ufficiale per Python, che useremo per attivare e inviare i nostri messaggi a Pusher.

Creare la nostra applicazione

Innanzitutto, creiamo una classe di modello, che genererà la nostra struttura di database.
Apriamo message \ models.py e sostituiamo il contenuto con il seguente:

Nel blocco di codice sopra riportato, abbiamo definito un modello chiamato Conversazione. La tabella di conversazione è composta dai seguenti campi:

  • Un campo per collegare il messaggio all'utente che lo ha creato
  • Un campo per memorizzare il messaggio
  • Un campo per memorizzare lo stato del messaggio
  • Un file per archiviare la data e l'ora in cui il messaggio è stato creato

Esecuzione delle migrazioni

Dobbiamo effettuare migrazioni ed eseguirle anche per poter creare la nostra tabella del database. Per fare ciò, eseguiamo quanto segue nel nostro terminale:

Creare le nostre opinioni

In Django, le viste non si riferiscono necessariamente alla struttura HTML della nostra applicazione. In effetti, possiamo vederlo come il nostro controller, come indicato in alcuni altri framework.

Apriamo il nostro views.py nella nostra cartella di messaggi e sostituiamo il contenuto con il seguente:

Nel codice sopra, abbiamo definito quattro funzioni principali che sono:

  • indice
  • trasmissione
  • conversazione
  • consegnato

Nella funzione indice, abbiamo aggiunto il decoratore richiesto per l'accesso e abbiamo anche passato l'argomento URL di accesso che non esiste ancora, poiché dovremo crearlo nel file urls.py. Inoltre, abbiamo reso un modello predefinito chiamato chat.html che creeremo presto.

Nella funzione di trasmissione, abbiamo recuperato il contenuto del messaggio inviato, salvato nel nostro database e infine attivato una richiesta Pusher che passa nel nostro dizionario dei messaggi, nonché un nome di canale e di evento.
 Nella funzione conversazioni, prendiamo semplicemente tutte le conversazioni e le restituiamo come risposta JSON.

Infine, abbiamo la funzione consegnata, che è la funzione che si occupa del nostro stato di consegna del messaggio.

In questa funzione, riceviamo la conversazione dall'ID fornito a noi. Verifichiamo quindi che l'utente che desidera attivare l'evento consegnato non sia l'utente che ha inviato il messaggio in primo luogo. Inoltre, passiamo in socket_id in modo che Pusher non trasmetta l'evento alla persona che l'ha attivato.

Socket_id rappresenta un identificatore per la connessione socket che ha attivato l'evento.

Popolamento dell'URL. Spia

Apriamo il nostro file pusher_message \ urls.py e sostituiamo con il seguente:

Cosa è cambiato in questo file? Abbiamo aggiunto sei nuove rotte al file.
 Abbiamo definito il punto di ingresso e assegnato alla nostra funzione di indice. Successivamente, abbiamo definito l'URL di accesso, a cui il decoratore login_required avrebbe cercato di accedere per autenticare gli utenti.

Abbiamo utilizzato la funzione di autenticazione predefinita per gestirla, ma abbiamo passato il nostro modello personalizzato per l'accesso, che creeremo presto.

Successivamente, abbiamo definito i percorsi per l'attivazione del messaggio di conversazione, tutte le conversazioni e infine la conversazione erogata.

Creazione dei file HTML

Ora dovremo creare due pagine HTML in modo che la nostra applicazione possa funzionare senza problemi. Nel corso della creazione dell'applicazione abbiamo fatto riferimento a due pagine HTML.

Creiamo una nuova cartella nella nostra cartella dei messaggi chiamata template.

Successivamente, creiamo un file chiamato login.html nella nostra cartella dei modelli e lo sostituiamo con il seguente:

Componente Vue e attacchi pusher

Questo è tutto! Ora, ogni volta che un nuovo messaggio viene consegnato, verrà trasmesso e possiamo ascoltare, usando il nostro canale, per aggiornare lo stato in tempo reale. Di seguito è riportato il nostro componente di esempio scritto usando Vue.js.

Nota: Nel componente Vue di seguito, è stata definita una nuova funzione chiamata ** queryParams ** per serializzare il nostro corpo POST in modo che possa essere inviato come ** x-www-form-urlencoded ** al server al posto di come **carico utile**. Lo abbiamo fatto perché Django non può gestire le richieste che arrivano come ** payload **.

Di seguito l'immagine che mostra ciò che abbiamo costruito:

Conclusione

In questo articolo, abbiamo spiegato come creare uno stato di consegna dei messaggi in tempo reale usando Django e Pusher. Abbiamo attraversato l'esenzione di determinate funzioni dai controlli CSRF, nonché l'esenzione dell'emittente dalla ricezione di un evento che hanno attivato.

Il codice è ospitato su un repository GitHub pubblico. Puoi scaricarlo per scopi didattici.

Potremmo avere un modo migliore di creare la nostra applicazione, prenotazioni o commenti? Fateci sapere nei commenti. Ricorda, condividere è imparare.

Questo post è stato originariamente pubblicato dall'autore nel blog di pusher qui.

Questa versione è stata modificata per maggiore chiarezza e potrebbe apparire diversa dal post originale.