Stage 2eme Année : intranet Mairie de Berck
DEMANDE DE LA MAIRIE
La Mairie de Berck / mer m’a demandé de crée un chat type Messenger pour sa nouvelle version d'intranet.
À la suite d’un entretient avec le developpeur de la mairie il m'a demander d'effectuer un Chat avec Symfony et un Websocket
La solution à était produite avec Symfony 5.4.2 et le Websocket PHP Ratchet j'ai aussi eu besoins d'utiliser du Bootstrap, Javascript, JQuery et AJAX
Les demandes du developpeur par rapport au contenue du chat était les suivantes :
-Un Chat dynamique crée grace à un websocket pour récupérer les messages sans avoir à actualiser
-La possibilité de crée un chat de groupe
-La possibilité d'échanger des fichiers
-Voir si un utilisateur est en train d'écrire
MISE EN PLACE DU CHAT
Tout d'abord j'ai crée ma version du Chat sur un projet Symfony vierge (accessible ici...)
Avec l'aide du développeur nous avons crée le modéle de données suivant :
Se traduissant par 3 entité sur Symfony (Chat, Conversation, User) avec des relations ManyToMany de l'entité User à Conversation et de Chat à Conversation
Ensuite il a fallu crée les vues Twig et les controllers sur ce projet j'ai choisit de crée deux version.
Une premiére en pleine écrans et une deuxiéme ressemblent à l'interface de Messenger.
Les controller sont donc :
-ChatController (vue en pleine écran)
-FrontController (vue type Messenger)
-SecurityController (vue pour l'authentification)
MISE EN PLACE DE SECURITY
Pour l'authentification avec security sur symfony j'utilise 3 route (login, logout et signup) et j'ai besoin d'un Form (RegistrationType)
Le formulaire vas pouvoir me permettre d'ajouter les champs de création de compte dans ma vue Twig de création de compte (signup) et contient les champs dont j'ai besoins pour alimenter ma base de données.
Une fois crée je n'est plus qu'a l'utilisé dans ma vue twig correspondante grace à la variable {{ form }} et la création de compte est déjà fini
Pour ce qui est de l'authentification et de la déconnection Symfony gére tout sa automatiquement dans sa configuration de Security
MISE EN PLACE DU CONTROLLER CHAT ET FRONT
Une fois connecté il me faut ma premiére route dans le controller Chat ou je veux afficher les informations de mon utilisateur, ces conversations et la possibilité dans crée de nouvelle
Pour récuperer les conversation il à fallut crée une fonction dans le Repository de mon Entité Conversation en fonction de ma relation ManyToMany avec User
Ainsi je récupere toute les conversations sur ma base de données avec le QueryBuilder de Symfony avec comme entrer mon Utilisateur que je peut récupérer facilement grace a Security
Ensuite il a faut pouvoir crée de nouvelle conversation pour ce faire j'ai eu besoin d'un nouveau Form (ConversationType) avec comme champs le nom et les utilisateurs autorisée
Pour ce faire j'ai utilisé le QueryBuilder pour récuperer la liste des utilisateurs et Chosen un plugin JQuery pour afficher le choix multiple
Une fois le formulaire crée je crée ma vue dans mon controller et si cette vue m'envoie une requete valide je crée cette conversation grace à l'entityManager
Pour finir il ne me reste plus qu'a crée ma vue pour mon chat j'aurais besoin de 3 fonctions dans different Repository (UserRepository, ConversationRepository et ChatRepository)
Pour récuperer les utilisateurs dans la conversation, la conversation demander et le chat de cette conversation
Comme vous avez plus le remarquer nous n'avons pas encore parler de la fonction lastSeen qui me permet de traduire une date d'activité en chaine de caractére ni de la fonction Upload dont nous allons parler juste après.
Le controller Front fonctionne de la même façon que le controller Chat seul l'affichage est different
MISE EN PLACE DU WEBSOCKET
Après avoir installer le Websocket Ratchet dans mon projet Symfony j'ai besoins de deux script PHP et d'un script Javascript pour le faire fonctionner
Pour les script PHP il s'agit d'une commande Symfony me permettant de lancer le server Websocket et du script qui ecoute les informations qui transite par le Websocket
C'est deux script mettent en place le websocket la fonction onMessage nous permet par la suite d'enregistrer les messages envoyer dans l'entité Chat
Pour voir l'integralité du code je vous invite à visiter mon GitHub
LE JAVASCRIPT JQUERY AJAX
Je vais maintenant vous expliquer le javascript de mon programme qui est disponible egalement sur GitHub mais que je ne vais pas afficher içi car il est trop long
Le script est divisée dans ma verions en trois partie :
-Une partie Websocket (en Javascript) -Une partie input (en JQUERY) -Une partie POST (en AJAX)
Dans la partie Websocket il y'a la connection au Websocket et son écoute plus le traitement des messages
Dans la partie input il y'a l'écoute de la textarea pour savoir si un utilisateur est en train d'écrire, pour envoyer un message au Websocket et pour l'upload de fichier
La partie POST me sert uniquement à envoyer des fichiers à une partie de mon controller Chat pour qu'il traite le fichier et répond un message avec le nouveau chemin du fichier
Ce chemin est ensuite traiter par le Websocket pour afficher une image si il s'agit d'une image ou crée un lien de téléchargement pour un fichier
L'UPLOAD DE FICHIER
Pour Uploader un fichier il faut crée un Form Symfony (UploadType) permetant l'input de fichier et une partie du Controller Chat qui traitera la requete POST
L'envoie de cette requête passera par une fonction AJAX pour éviter le rafraichissement de la page
Problème : l'envoie d'un formulaire POST en AJAX vers Symfony doit être la copie exacte du formulaire Symfony car il cache un input caché avec un Token de validation sans celui ci Symfony n'acceptera pas le formulaire.
L'IMPLEMANTATION A L'INTRANET
Pour implémenter ce projet le développeur ma demander de suivre sa construction de fichier et l'authentification de l'intranet ce fait au traver d'un LDAP
J'ai renomer mes Entité et Controller de Chat à Message et de Conversation à Group.
J'ai utiliser l'entité d'utilisateur déjà existante.
J'ai fabriquer mon interface en rendu twig pour l'implémenter sur toute les pages de l'intranet.
J'ai améliorer mon javascript pour qu'il soit capable de traiter plusieurs fenêtres de conversation à la fois.
J'ai rajouter les options de supréssion et modification des conversations que j'avais oublier sur ma version.
Et voilà le tout fonctionne et est correctement implémenter !
