2013-04-07 8 views
16

Sono molto nuovo a node.js, ma in realtà c'è solo una cosa semplice che sto cercando di ottenere imparando la lingua.node.js - come eseguire un semplice aggiornamento della pagina live?

Mi piacerebbe creare una pagina web, dove dal codice in uno specifico "div" può essere hotswapped al volo per gli utenti che attualmente guardano quella pagina. (cioè il div contiene del testo, ma poi un'immagine lo sostituisce). Idealmente, lo swap verrebbe eseguito manualmente dall'amministratore della pagina web tramite il clic di un pulsante, o del codice sparato via sul server o qualcosa del genere. I normali visitatori della pagina web non sarebbero in grado di farlo: visualizzano solo le modifiche in tempo reale sulla pagina.

esempio reale:

trasmissione in diretta via internet è off-air, quindi il "div" contiene il testo "off-air". l'hotswap in diretta del codice si verifica quando la trasmissione viene trasmessa in diretta e gli spettatori della pagina Web ora vedono invece il player di trasmissione html5 nel "div".

Qual è il modo più semplice per eseguire questa operazione per un newbie node.js?

Molte grazie :)

risposta

15

diano un'occhiata al Socket.IO http://socket.io/#how-to-use

quando il server decide di trasmettere un uso cambiamento:

io.sockets.emit('update-msg', { data: 'this is the data'});

sul client prima collegare la presa. io e quindi attendere l'evento "update-msg" e aggiornare il tuo dom:

var socket = io.connect('http://localhost'); 
socket.on('update-msg', function (msg) { 
    console.log(msg); 
    $('#mydiv').html(msg.data) 
}); 
+1

questo è il modo di base per farlo, ma la mia risposta ti guida attraverso tutti i passaggi per un approccio più sofisticato –

4

Ho creato un sistema/metodologia per aggiornare il codice di aggiornamento (hot reload) utilizzando RequireJS e Node.js. Ho fatto in modo che funzionasse sia con React che con Backbone. Si può leggere su qui:

https://medium.com/@the1mills/hot-reloading-with-react-requirejs-7b2aa6cb06e1

i passaggi fondamentali necessari per fare da soli:

  1. gulp.js osservatori ascoltano per file system cambia
  2. server di socket.io in gulpfile invia un messaggio a tutti i client del browser con il percorso del file modificato
  3. il client elimina la cache che rappresenta quel file/modulo e richiede nuovamente (utilizzando AJAX per estrarlo dal filesystem del server)
  4. l'app di front-end è configurata/progettata per rivalutare tutti i riferimenti ai moduli che desidera ricaricare a caldo, in questo caso solo le viste JS , i template e i CSS sono disponibile per ricaricare a caldo - il router, i controller , i datastore (Collezioni Backbone e Modelli) non sono ancora configurati con . Sospetto che tutti i file possano essere ricaricati a caldo con , con l'unica eccezione degli archivi di dati.
Problemi correlati