Comment construire un statut de remise de message dans Django

Aujourd'hui, nous allons créer un cadre d'état de remise des messages en temps réel avec Django et Pusher.

Une compréhension de base de Django et Vue est nécessaire pour pouvoir suivre ce tutoriel.

Mise en place de Django

Tout d’abord, nous devons installer la bibliothèque Python Django si nous ne l’avons pas déjà.
 Pour installer Django, nous lançons:

Après avoir installé Django, il est temps de créer notre projet. Ouvrez un terminal et créez un nouveau projet à l'aide de la commande suivante:

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

Dans la commande ci-dessus, nous avons créé un nouveau projet appelé pusher_message. La prochaine étape consistera à créer une application dans notre nouveau projet. Pour ce faire, exécutons les commandes suivantes:

Une fois que nous avons terminé la configuration de la nouvelle application, nous devons informer Django de notre nouvelle application. Nous allons donc accéder à notre message pusher_message \ settings.py et ajouter l'application de messagerie aux applications installées, comme indiqué ci-dessous:

Après ce qui précède, il est temps pour nous d’exécuter l’application et de voir si tout s’est bien passé.

Dans notre terminal shell, nous exécutons:

Si nous naviguons dans notre navigateur jusqu'à http: // localhost: 8000, nous devrions voir ce qui suit:

Configurer une application sur le poussoir

À ce stade, Django est prêt et configuré. Nous devons maintenant configurer Pusher, ainsi que récupérer nos informations d'identification d'application.

Nous devons nous inscrire sur Pusher, créer une nouvelle application et également copier notre clé d'application secrète et notre identifiant d'application.

La prochaine étape consiste à installer les bibliothèques requises:

Dans la commande bash ci-dessus, nous avons installé un package, pusher. C’est la bibliothèque officielle de Pusher pour Python, que nous utiliserons pour déclencher et envoyer nos messages à Pusher.

Créer notre application

Commençons par créer une classe de modèle, qui générera notre structure de base de données.
Ouvrons le message \ models.py et remplaçons le contenu par ce qui suit:

Dans le bloc de code ci-dessus, nous avons défini un modèle appelé Conversation. La table de conversation comprend les champs suivants:

  • Un champ pour lier le message à l'utilisateur qui l'a créé
  • Un champ pour stocker le message
  • Un champ pour stocker le statut du message
  • Un fichier pour stocker la date et l'heure de création du message

Exécution de migrations

Nous devons effectuer des migrations et les exécuter afin que notre table de base de données puisse être créée. Pour ce faire, exécutons ce qui suit dans notre terminal:

Créer nos vues

Dans Django, les vues ne font pas nécessairement référence à la structure HTML de notre application. En fait, nous pouvons le voir comme notre contrôleur, comme mentionné dans d'autres cadres.

Ouvrons notre fichier views.py dans notre dossier de messages et remplaçons le contenu par le texte suivant:

Dans le code ci-dessus, nous avons défini quatre fonctions principales qui sont:

  • indice
  • diffuser
  • conversation
  • livré

Dans la fonction index, nous avons ajouté le décorateur de connexion requise et nous avons également passé l'argument d'URL de connexion qui n'existe pas encore car nous devrons le créer dans le fichier urls.py. Nous avons également créé un modèle par défaut appelé chat.html que nous allons également créer bientôt.

Dans la fonction de diffusion, nous avons récupéré le contenu du message envoyé, l’avons sauvegardé dans notre base de données et avons finalement déclenché une demande Pusher transmettant notre dictionnaire de messages, ainsi que le nom de la chaîne et de l’événement.
 Dans la fonction de conversation, nous prenons simplement toutes les conversations et les renvoyons sous forme de réponse JSON.

Enfin, nous avons la fonction delivery, qui gère le statut de livraison de nos messages.

Dans cette fonction, nous obtenons la conversation par l'identifiant fourni. Nous vérifions ensuite que l'utilisateur qui souhaite déclencher l'événement remis n'est pas l'utilisateur qui a envoyé le message en premier lieu. Aussi, nous passons dans le socket_id pour que Pusher ne retransmet pas l'événement à la personne qui l'a déclenché.

Socket_id représente l'identifiant de la connexion de socket qui a déclenché l'événement.

Remplir l'URL’s.py

Ouvrons notre fichier pusher_message \ urls.py et remplaçons par ce qui suit:

Qu'est-ce qui a changé dans ce fichier? Nous avons ajouté six nouvelles routes au fichier.
 Nous avons défini le point d'entrée et l'avons affecté à notre fonction d'index. Ensuite, nous avons défini l'URL de connexion, à laquelle le décorateur requis par login tenterait d'accéder pour authentifier les utilisateurs.

Nous avons utilisé la fonction auth par défaut pour la gérer, mais nous l'avons transmise à notre propre modèle personnalisé pour la connexion, que nous allons créer bientôt.

Ensuite, nous avons défini les itinéraires du déclencheur de message de conversation, de toutes les conversations et enfin de la conversation livrée.

Création des fichiers HTML

Nous allons maintenant avoir besoin de créer deux pages HTML pour que notre application puisse fonctionner correctement. Nous avons référencé deux pages HTML lors de la construction de l'application.

Laissez-nous créer un nouveau dossier dans notre dossier de messages appelé modèles.

Ensuite, nous créons un fichier appelé login.html dans notre dossier de modèles et le remplaçons par ce qui suit:

Composants Vue Et Liaisons De Poussoir

C'est ça! Maintenant, chaque fois qu'un nouveau message est livré, il est diffusé et nous pouvons écouter, en utilisant notre canal, mettre à jour le statut en temps réel. Ci-dessous, notre composant Example écrit en utilisant Vue.js.

Remarque: dans le composant Vue ci-dessous, une nouvelle fonction appelée ** queryParams ** a été définie pour sérialiser notre corps POST afin qu'il puisse être envoyé sous la forme ** x-www-form-urlencoded ** au serveur. **charge utile**. Nous l’avons fait parce que Django ne peut pas traiter les demandes arrivant en tant que ** charge utile **.

Ci-dessous, l'image montrant ce que nous avons construit:

Conclusion

Dans cet article, nous avons expliqué comment créer un statut de remise de message en temps réel à l'aide de Django et Pusher. Nous avons exempté certaines fonctions des vérifications CSRF, ainsi que le radiodiffuseur de la réception d’un événement qu’il a déclenché.

Le code est hébergé sur un référentiel GitHub public. Vous pouvez le télécharger à des fins éducatives.

Avons-nous une meilleure façon de construire notre application, nos réservations ou nos commentaires? Faites le nous savoir dans les commentaires. Rappelez-vous, partager c'est apprendre.

Cet article a été publié à l'origine par l'auteur dans le blog de Pusher ici.

Cette version a été modifiée pour plus de clarté et peut paraître différente de la publication d'origine.