diff --git a/server.js b/server.js index 0ecb4bb..4349e65 100644 --- a/server.js +++ b/server.js @@ -9,6 +9,8 @@ const server = http.createServer(app); const socketio = require('socket.io'); const { compareSync } = require('bcrypt'); + +// Socket CORS const io = socketio(server, { cors: { origin: "http://localhost:3000", @@ -17,25 +19,25 @@ const io = socketio(server, { }) -// 1er essaie de l'utilisation de socket.io fonctionnel +// fonctions du WebSocket io.on("connection", (socket) => { console.log("new client connected"); - socket.on('joinRoom', room => { + socket.on('joinRoom', room => { // récupère les infos du nouvel utilisateur qui a rejoint une room console.log("the room in join : ", room); - const test = userLeave(socket.id); - const user = userJoin(socket.id, room); - socket.join(user.room); + const test = userLeave(socket.id); // fait quitter le user dans la room + const user = userJoin(socket.id, room); // fait rejoindre le user dans la room + socket.join(user.room); // fait rejoindre le user dans la room console.log(users) - socket.broadcast.to(user.room).emit('info', "has joined the chat" + room); + socket.broadcast.to(user.room).emit('info', "has joined the chat" + room); // renvois le fait qu'une nouvelle personne est présente dans la room à toute les personnes présente dans la room }); - socket.on("sendmessage", (data) => { + socket.on("sendmessage", (data) => { // récupère le message qui a été envois par un utilisateur console.log("data of send message : ", data.message, data.room) - const user = getRoomUsers(data.room); + const user = getRoomUsers(data.room); // récupere la room de l'utilsateur console.log(user, data.message) let lastmessageid - Groupe.updateOne({ - _id: data.room + Groupe.updateOne({ // modifie le groupe de discution et ajoute le message + _id: data.room // l'id de la room est l'id du groupe dans la base de donnée }, { $push: { message: { @@ -51,27 +53,27 @@ io.on("connection", (socket) => { if (err) { console.log(err) } else { - let lastmessage = docs.message.pop() - lastmessageid = lastmessage._id + let lastmessage = docs.message.pop() // récupere le dernier message + lastmessageid = lastmessage._id // récupère l'id du dernier message console.log("last mess : ", lastmessage) - const search = users.filter(people => people.room === data.room) + const search = users.filter(people => people.room === data.room) // récupère le nombre de personne présente dans la room console.log("test", search.length) - if (search.length > 1) { - io.to(data.room).emit('message', { _id: lastmessageid, text: data.message, author: data.author }) + if (search.length > 1) { // s'il y a plus d'une personne dans la room : + io.to(data.room).emit('message', { _id: lastmessageid, text: data.message, author: data.author }) // envois le message à toute les personnes présente dans la room } else { - socket.emit('message', { _id: lastmessageid, text: data.message, author: data.author }) + socket.emit('message', { _id: lastmessageid, text: data.message, author: data.author }) // et si l'utilisateur est seul dans la room alors envoyé le message juste à lui même } } }) } }) }) - socket.on('getMessageToDelete', (data) => { + socket.on('getMessageToDelete', (data) => { // recupère le message qui doit être suprimé et le suprime console.log('the value and the room:', data.value, data.room) - Groupe.updateOne({ + Groupe.updateOne({ // modifie le groupe de discution dans la bade de donnée _id: data.room }, { - $pull: { + $pull: { // surpime le message grâce à son id message: { _id: data.value } @@ -85,32 +87,32 @@ io.on("connection", (socket) => { }) - io.to(data.room).emit('messageDelete', data.value) + io.to(data.room).emit('messageDelete', data.value) // envois à toute les personnes présente dans la room le message suprimé }) socket.on('leave', () => { - const user = userLeave(socket.id); + const user = userLeave(socket.id); // fait quitter le user de la room if (user) { // Send users and room info - io.to(user.room).emit('info', "il a été deconnecté"); + io.to(user.room).emit('info', "il a été deconnecté"); // envois l'info à tout les personnes dans la room qu'il est plus présente dans la room } }) - socket.on('disconnect', () => { + socket.on('disconnect', () => { // lorsque la séssion socket se déconnecte const user = userLeave(socket.id); if (user) { // Send users and room info - io.to(user.room).emit('info', "il a été deconnecté"); + io.to(user.room).emit('info', "il a été deconnecté"); // envois a tout les personnes dans la room l'info que l'utilisateur a été déconnecté } }); }) const users = []; -function userJoin(id, room) { +function userJoin(id, room) { // fonction lorsque il y a un nouveau user qui rejoint une room const user = { id, room }; users.push(user); return user; } -function userLeave(id) { +function userLeave(id) { // fonction pour faire quitter un user de la room const index = users.findIndex(user => user.id === id); if (index !== -1) { @@ -118,7 +120,7 @@ function userLeave(id) { } } -function getRoomUsers(room) { +function getRoomUsers(room) { // récupère la room celon le user return users.filter(user => user.room === room); } diff --git a/src/App.jsx b/src/App.jsx index cf460f4..51349bd 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -21,7 +21,7 @@ class App extends Component { - {/*withAuth permet de renvoyer le composant "Application" si la vérification des cookies est validé par le server*/} + {/*withAuth permet de renvoyer le composant voulu si la vérification des cookies est validé par le server*/} diff --git a/src/Home.jsx b/src/Home.jsx index b389f32..67d3f36 100644 --- a/src/Home.jsx +++ b/src/Home.jsx @@ -16,7 +16,7 @@ import { BrowserRouter, Route, Router, Link, Switch } from "react-router-dom" import './style/Home.css'; import './style/responsive.css' -// page de présentation du projet, le style n'est pas a jour +// page de présentation du projet function Home() { return ( diff --git a/src/application2.jsx b/src/application2.jsx index 25ee413..7d812aa 100644 --- a/src/application2.jsx +++ b/src/application2.jsx @@ -11,7 +11,7 @@ import Barreamisgauche from './barre-amis-gauche'; export default class Application2 extends Component { - // création du State "friend" + // création des states constructor(props) { super(props) this.state = { @@ -31,15 +31,14 @@ export default class Application2 extends Component { }); } - // fonction permettant de faire une requête POST au serveur et d'envoyer les données + // fonction permettant de faire une requête POST au serveur et d'envoyer les données pour ajouter un amis onSubmit = (event) => { event.preventDefault(); console.log("state envois demande amis : ",this.state) // requête POST fetch('https://ichatt.herokuapp.com/app/newfriend', { method: 'POST', - // credentials : include permet d'intégrer les cookie avec la requête - credentials: 'include', + credentials: 'include', // credentials : include permet d'intégrer les cookie avec la requête body: JSON.stringify({ new_friend: this.state.friend }), @@ -59,6 +58,8 @@ export default class Application2 extends Component { } }) } + + // fonction permettant de faire une requête GET au serveur et d'envoyer les données pour récupérer la liste d'ami de l'utilisateur componentDidMount(){ fetch('https://ichatt.herokuapp.com/app/friendlist', { method: 'GET', @@ -70,13 +71,10 @@ export default class Application2 extends Component { } }) .then(response => response.json()) - .then(response => { - //console.log(response) - this.setState({amislist:response.friends}) - this.setState({user_nom:response.pseudo}) - this.setState({firstFriend:response.firstFriend}) - //let test = this.state.amislist - + .then(response => { // récupère la reponsse du serveur + this.setState({amislist:response.friends}) // stoque la list d'ami dans le state "amislist" + this.setState({user_nom:response.pseudo}) // stoque le pseudo du user dans le state "user_nom" + this.setState({firstFriend:response.firstFriend}) // stoque le première ami du user dans le state "firstFriend" }) } @@ -86,10 +84,10 @@ export default class Application2 extends Component { return (
- - + {/* Barre ne navigation */} + {/*Menu où il y a les différents amis */}
- + {/*Le chate */}
); } diff --git a/src/barre-amis-gauche.jsx b/src/barre-amis-gauche.jsx index b11c928..96e3952 100644 --- a/src/barre-amis-gauche.jsx +++ b/src/barre-amis-gauche.jsx @@ -5,6 +5,7 @@ import './style/barre-amis-gauche.css'; export default class barregaucheamis extends Component { + // création des states constructor(props) { super(props) this.state = { @@ -17,7 +18,7 @@ export default class barregaucheamis extends Component { componentDidMount(){ - fetch('https://ichatt.herokuapp.com/app/friendlist', { + fetch('https://ichatt.herokuapp.com/app/friendlist', { // fonction permettant de faire une requête GET au serveur et d'envoyer les données pour récupérer la liste d'ami de l'utilisateur method: 'GET', // credentials : include permet d'intégrer les cookie avec la requête credentials: 'include', @@ -29,17 +30,17 @@ export default class barregaucheamis extends Component { .then(response => response.json()) .then(response => { console.log(response) - this.setState({amislist:response.data}) - this.setState({user_nom:response.pseudo}) + this.setState({amislist:response.data}) // stoque la liste d'amis dans le state "amislist" + this.setState({user_nom:response.pseudo}) // stoque le pseudo du user dans le state "user_nom" }) } - render(){ + render(){ // fait le rendu de la page return(
- {this.state.amislist.map((amis)=>( + {this.state.amislist.map((amis)=>( // map chaque ami de la liste pour créer des boutton pour naviguer entre chaque groupe de discution

{amis.pseudo}

diff --git a/src/barre-gauche.jsx b/src/barre-gauche.jsx index 5c11bbd..bfbcaa7 100644 --- a/src/barre-gauche.jsx +++ b/src/barre-gauche.jsx @@ -10,13 +10,14 @@ import rockets from './image/rockets.png' import './style/barre-gauche-responsive.css'; export default class barregauche extends Component { - +// création des states constructor(props) { super(props) this.state = { firstFriend:"" }; } + // fonction permettant de faire une requête POST au serveur et d'envoyer les données pour récupérer la liste d'ami de l'utilisateur componentDidMount(){ fetch('https://ichatt.herokuapp.com/app/friendlist', { method: 'GET', @@ -29,20 +30,20 @@ export default class barregauche extends Component { }) .then(response => response.json()) .then(response => { - this.setState({firstFriend:response.firstFriend}) + this.setState({firstFriend:response.firstFriend}) // stoque le première amis dans le state "firstFriend" }) } - render(){ + render(){ // fait le rendu de la page return(
photo de profil
-
- - message +
{/*Lien entre les différents onglets */} + {/* renvois vers le groupe de message du première amis */} + message amis @@ -56,7 +57,7 @@ export default class barregauche extends Component {
- déconextion + déconextion {/* quitte l'application et fait un retour vers le menu */}
diff --git a/src/components/button.jsx b/src/components/button.jsx index e1fe660..bb5a957 100644 --- a/src/components/button.jsx +++ b/src/components/button.jsx @@ -1,9 +1,8 @@ import React, { Component } from 'react'; - export default class button extends Component { - render(){ + render(){ // fait le rendu d'un bouton avec une valeur return(