NodeJs - Faire un refresh en broadcast

3 octobre 2019 à 11:29:21

Bonjour,

Je suis le cours NodeJs du site openclassroom et dans le TP, on doit faire une todoliste accessible en lecture écriture par plusieurs utilisateurs. Tous les utilisateurs se connectent et lorsque l'un d'entre eux ajoute une tâche à la todoliste, tous les autres utilisateurs voient la nouvelle tâche et ce sans recharger la page. En gros, c'est comme un chat mais c'est une liste de choses à faire qui s'affiche. Bref, quand je fais l'exe, tout va bien, la liste se met bien à jour mais je dois actualiser la page de chaque utilisateur pour qu'il voie la nouvelle tâche et ce n'est pas sensé se passer comme ça, normalement, la liste s'actualise toute seule, sans l'intervention des utilisateurs. Quelqu'un a une idée de la façon dont je devrais m'y prendre pour réajuster ça ?

Je comprends bien que je dois lancer un broadcast de la nouvelle tâche au moment où on ajoute une nouvelle tâche mais je vois pas comment techniquement je peux mettre un eventListener lors de l'ajout qui se fait via le formulaire, si vous avez des pistes, je suis preneur

je vous mets le code sur lequel je travaille :

app.js

var http = require('http');
var express = require('express');
var session = require('cookie-session'); // Charge le middleware de sessions
var bodyParser = require('body-parser'); // Charge le middleware de gestion des paramètres
var urlencodedParser = bodyParser.urlencoded({ extended: false });

var app = express();
var server = http.createServer(app);


/* On utilise les sessions */
app.use(session({secret: 'todotopsecret'}))


/* S'il n'y a pas de todolist dans la session,
on en crée une vide sous forme d'array avant la suite */
.use(function(req, res, next){
    if (typeof(req.session.todolist) == 'undefined') {
        req.session.todolist = [];
    }
    next();
})

/* On affiche la todolist et le formulaire */
.get('/todo', function(req, res) { 
    res.render('todo.ejs', {todolist: req.session.todolist});
})

/* On ajoute un élément à la todolist */
.post('/todo/ajouter/', urlencodedParser, function(req, res) {
    if (req.body.newtodo != '') {
        req.session.todolist.push(req.body.newtodo);
    }
    res.redirect('/todo');
})

/* Supprime un élément de la todolist */
.get('/todo/supprimer/:id', function(req, res) {
    if (req.params.id != '') {
        req.session.todolist.splice(req.params.id, 1);
    }
    res.redirect('/todo');
})

/* On redirige vers la todolist si la page demandée n'est pas trouvée */
.use(function(req, res, next){
    res.redirect('/todo');
});

var io = require('socket.io').listen(server);

io.sockets.on('connection',function(socket){
    socket.emit('todolist_refresh','refresh un deux un deux');
    console.log('test one two one two');
   // console.log(this.session.todolist);
   // socket.broadcast.emit('todolist', });
});



server.listen(8080);

et todo.ejs :

<!DOCTYPE html>

<html>
    <head>
        <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
        <script src="/socket.io/socket.io.js"></script>
        <script>
           
        </script>
        <title>Ma todolist</title>
        <style>
            a {text-decoration: none; color: black;}
        </style>
        
    </head>

    <body>
        <h1>Ma todolist</h1>
        
        <form method="post" action="/todo/ajouter" id="myForm">
            <p>
                <label for="newtodo">Que dois-je faire ?</label>
                <input type="text" name="newtodo" id="newtodo" autofocus />
                <input type="submit" id="send"/>
            </p>
        </form>
        <ul>
        <%
          todolist.forEach(function(todo, index) { %>
            <li><a href="/todo/supprimer/<%= index %>">✘</a> <%= todo %></li>
        <% }); %>
        </ul>
       <script>
            var socket = io.connect('http://localhost:8080');
            socket.on('todolist_refresh',function(message){
            console.log(message);
            
            });
            
            
       </script>

    </body>
    
</html>

Merci de m'avoir lu :),

Axel

-
Edité par axelvdk 3 octobre 2019 à 11:38:02

SamuelGaborieau3

3 octobre 2019 à 15:12:18

bonjour :

todo.ejs

... ,
var socket = io.connect('http://localhost:8080');
            socket.on('todolist_refresh',function(message){
    console.log(message);
             
});
             
const form = document.querySelector("form") ;

form.addEventListener('submit' , e => {
 
      const data = {}; 

      e.preventDefault(); // annule l'envoi des donnée
  
     data.todo = form['newtodo'].value ; // form['name-field']
     socket.emit('new-todo' , data.todo ) ;


      fetch( 'http://localhost:8080/todo/ajouter' ,   {
        method: 'POST',
        body: JSON.stringify( data )

     } ).then( response => {
          console.log('server have response : ' , response );
      }).catch( err => console.error( err ) ) ;   


});

app.js

 ... ,
var io = require('socket.io').listen(server);

 
io.sockets.on('connection',function(socket){
    socket.emit('todolist_refresh','refresh un deux un deux');
    console.log('test one two one two');
   // console.log(this.session.todolist);
   // socket.broadcast.emit('todolist', });

   socket.on('new-todo' , todo => {
      
       io.sockets.broadcast.emit('new-todo' ,  todo );

   } ) ;
});

-
Edité par SamuelGaborieau3 3 octobre 2019 à 15:17:25

suggestion de présentation.

axelvdk

4 octobre 2019 à 20:02:00

Je te remercie pour ta réponse, analyser ton code m'a appris beaucoup de choses sur js et node mais malheureusement ça ne marche pas, tu avais oublié le }); à la fin de addEventListener mais malgré tout ça ne tourne pas, les données ne passent pas via la méthode fetch, j'ai bien un élément qui s'ajoute dans la liste mais sa valeur est undefined...

Bref, je vais essayer de débuger la fonction fetch().

Merci pour ton aide,

Axel