Données mysql de Node-Webkit au fil de nouvelles

Je travaille sur un outil de fil de nouvelles que nous pouvons envoyer des messages de nouvelles à distance à un écran. Maintenant, j'ai fait l'arrière du système et travaille maintenant sur le frontend/client. J'utiliserai le kit node-web pour montrer les nouvelles à l'écran. J'ai déjà une connexion avec la base de données et affiche les messages dans le journal de la console. Mais je ne comprends pas bien de le montrer sur la page de flux de nouvelles.Données mysql de Node-Webkit au fil de nouvelles

J'essaie de faire cela ressemble à une bannière flux de nouvelles CNN: CNN feed banner

Styling est pas le problème, mais je ne suis pas la date de la JSON (sortie mysql) à l'écran.

La sortie que je reçois de MySQL dans la console ressemble:

[{"id":1,"message":"Test message #1"},{"id":2,"message":"Test message #2"},{"id":3,"message":"Test message #3"}]

Et le code du client ressemble à:

<html> 
 
    <head> 
 
    <title>NewsFeed</title> 
 

 
    <script> 
 

 
    var mysql  = require('mysql'); 
 
    var connection = mysql.createConnection({ 
 
    host  : 'XXXXX', 
 
    user  : 'XXXXX', 
 
    password : '', 
 
    database : 'XXXXX' 
 
    }); 
 

 
    connection.connect(function(err) { 
 
    if (err) { 
 
     console.error('error connecting: ' + err.stack); 
 
     return; 
 
    } 
 

 
    connection.query('SELECT * FROM message', function (error, results, fields) { 
 
     if (error) throw error; 
 
     json = JSON.stringify(results); 
 
     console.log(json); 
 
    }); 
 
    }); 
 

 
    </script> 
 
    </head> 
 
    <body> 
 
    </body> 
 
</html>

Ne quelqu'un sait comment lire les informations Json de la console à la vue HTML?

Et est-ce qu'il y a aussi un moyen de mettre à jour automatiquement le fil de nouvelles lorsqu'il y a un nouveau message dans la base de données? MISE À JOUR: Je pense que le rafraîchissement automatique n'est pas la meilleure façon de procéder. Donc je pensais à rafraîchir à distance. L'idée est; La connexion de l'utilisateur sur un système dorsal permet d'ajouter un message, puis d'appuyer sur un bouton pour recharger la page.

Comme cette image: Idea reload remote

Source

2017-03-14 J. Martin

essayer. Tout d'abord, ajoutez un élément de noeud dans votre DOM qui contiendra tous les messages.

<body> 
    <h1>Messages</h1> 
    <div id="message-container"></div> 
</body>

faire ensuite la fonction que vous écrire dans le DOM:

connection.connect(function(err) { 
    if (err) { 
     console.error('error connecting: ' + err.stack); 
     return; 
    } 

    connection.query('SELECT * FROM message', function (error, results, fields) { 
     if (error) throw error; 
     json = JSON.stringify(results); 
     console.log(json); 

     var container = document.getElementById("message-container") 

     // Use this in case you can't perform a more precise query 
     container.innerHTML = ""; 

     results.forEach(function(item){ 
      var node = document.createElement("p"); 
      var textnode = document.createTextNode(item.message); 

      node.appendChild(textnode); 
      container.appendChild(node); 
     }) 
    }); 
});

Pour vous garder les données à jour, vous pouvez faire un bon vieux vote:

function startTimer() { 
    setTimeout(query, 10000) 
} 

function query() { 
    connection.query('SELECT * FROM message', function (error, results, fields) { 
     if (error) throw error; 
     json = JSON.stringify(results); 
     console.log(json); 

     var container = document.getElementById("message-container") 

     // Use this in case you can't perform a more precise query 
     container.innerHTML = ""; 

     results.forEach(function(item){ 
      var node = document.createElement("p"); 
      var textnode = document.createTextNode(item.message); 

      node.appendChild(textnode); 
      container.appendChild(node); 
      startTimer() 
     }) 
    }); 
} 

connection.connect(function(err) { 
    if (err) { 
     console.error('error connecting: ' + err.stack); 
     return; 
    } 
    query() 
})

De cette façon, vous avoir une première demande. Une fois cela fait, l'application attend 10 secondes et invite une seconde requête. Après que celui-ci est fait, il attend pendant 10 secondes et ainsi de suite ...

Source

2017-03-14 13:09:53 Phugo

Merci à avoir de l'aide (: Maintenant, je n'ai besoin de faire la mise à jour automatique quand il y a un nouveau message Saviez-vous comment –

En fait, je ne sais pas comment fonctionne ce module mysql, mais je ne pense pas qu'il existe un autre moyen de mettre à jour des données différentes de l'interrogation, voir Editer – Phugo

Merci pour la réponse, je l'ai essayé mais après recharger tout le message est double dans le flux Alors, est-ce le coup de recharger la page/script avec un bouton sur le backend et avec nodejs? Première fois que j'utilise nodejs pour de vrais projets.Essayez déjà de pousser à distance: mais ne le faites pas fonctionner –

Données mysql de Node-Webkit au fil de nouvelles

Répondre

Questions connexes