SafeTalk est une application de messagerie en temps réel construite avec Angular en frontend et Spring Boot en backend. Elle utilise WebSockets pour permettre une communication instantanée entre les utilisateurs.
SafeTalk est conçu pour offrir une expérience de messagerie sécurisée et réactive. L’application utilise Spring Boot pour le backend, gérant les WebSockets pour la communication en temps réel, tandis qu’Angular constitue le frontend.
-
Connexion utilisateur avec nom d’utilisateur
-
Chat en temps réel avec mise à jour instantanée
-
Prise en charge des avatars personnalisés
-
Interface utilisateur interactive et réactive
Ce diagramme de séquence montre la communication entre le frontend Angular et le backend Spring Boot, en incluant la vérification des messages par l’application safetalk avant la diffusion via WebSocket.
sequenceDiagram
participant User as Utilisateur
participant Frontend as Frontend Angular
participant Safetalk as Application Safetalk
participant Backend as Backend Spring Boot
participant WebSocket as WebSocket de Diffusion
User->>Frontend: Envoie un message
Frontend->>Safetalk: Transfert du message pour vérification
alt Message bloqué
Safetalk-->>Frontend: Message indésirable bloqué
Frontend-->>User: Notification de message bloqué
else Message accepté
Safetalk->>Backend: Transfert du message
Backend->>WebSocket: Diffusion du message
WebSocket->>Frontend: Message accepté et diffusé
Frontend-->>User: Affiche le message dans le chat
end
Avant de commencer, assurez-vous d’avoir installé les éléments suivants :
-
[Node.js et npm](https://nodejs.org/) (pour Angular)
-
[Java 17+](https://www.oracle.com/java/technologies/javase/jdk17-archive-downloads.html) (pour Spring Boot)
-
[Maven](https://maven.apache.org/) (pour la gestion des dépendances backend)
-
Clonez le dépôt :
git clone https://github.com/votre-repo/safeTalk.git cd safeTalk/talkSafeFront -
Installez les dépendances :
npm install
-
Configurez Webpack (si applicable) et ajoutez global pour résoudre les problèmes liés aux modules Node : Créez ou mettez à jour
webpack.config.js:
const webpack = require('webpack');
module.exports = {
plugins: [
new webpack.ProvidePlugin({
global: 'globalThis'
})
]
};-
Depuis le répertoire talkSafeFront, exécutez :
ng serve-
Ouvrez un navigateur et accédez à
http://localhost:4200/.
-
Connectez-vous à l’application en saisissant un nom d’utilisateur.
-
Commencez à discuter avec d’autres utilisateurs connectés.
-
Pour envoyer un message, saisissez du texte dans la zone de texte en bas de l’écran et appuyez sur Entrée.
Pour contribuer au projet : * Créez une branche pour votre fonctionnalité :
git checkout -b feature/ma-feature-
Commitez vos modifications :
git commit -am 'Ajout d'une nouvelle fonctionnalité'
-
Poussez la branche :
git push origin feature/ma-feature
-
Ouvrez une Pull Request.