2013-04-07 11 views
16

Jestem bardzo nowym użytkownikiem node.js, ale jest tylko jedna prosta rzecz, którą próbuję osiągnąć, ucząc się języka.node.js - jak przeprowadzić prostą aktualizację strony na żywo?

Chciałbym stworzyć stronę internetową, gdzie za pomocą kodu w konkretnym "div" może być na bieżąco hotswapped do użytkowników aktualnie patrząc na tę stronę. (np. div zawiera jakiś tekst, ale obraz zastępuje go). Idealnie, zamiana byłaby wykonywana ręcznie przez administratora strony internetowej za pomocą kliknięcia przycisku lub jakiegoś kodu wypalonego na serwerze lub coś podobnego. Niestandardowi widzowie na stronie nie mogliby tego zrobić - widzą tylko zmiany na żywo na stronie.

przykład prawdziwego życia:

transmitowany na żywo do Internetu jest off-air, w związku z czym "div" zawiera "off-air" tekst. Live Hotswap kodu dzieje się, gdy transmisja idzie na antenie, a widzowie strony teraz widzą odtwarzacza transmisji html5 w "div" zamiast tego.

Jaki jest najprostszy sposób zrobienia tego dla nowicjusza node.js?

Dziękujemy :)

Odpowiedz

15

przyjrzeć Socket.IO http://socket.io/#how-to-use

gdy serwer postanawia wyemitować wykorzystanie Zmiana:

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

na kliencie najpierw podłączyć gniazdo. io, a następnie czekać na wydarzenie "update-msg" i zaktualizować dom:

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

to jest podstawowy sposób, aby to zrobić, ale moja odpowiedź prowadzi przez wszystkie etapy, aby uzyskać bardziej wyrafinowane podejście –

4

Utworzono system/metodologię aktualizowania na żywo (hot reload) kodu front-end przy użyciu RequireJS i Node.js. Upewniłem się, że działa zarówno z React, jak i Backbone. Można o tym przeczytać tutaj:

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

podstawowe kroki zaangażowanych w ten sposób siebie:

  1. gulp.js Obserwowane nasłuchiwać plików zmienia
  2. socket.io serwer wysyła w gulpfile wiadomość do wszystkich klientów przeglądarki ze ścieżką pliku, który się zmienił
  3. klient usuwa pamięć podręczną reprezentującą ten plik/moduł, i wymaga ponownie (używając AJAX aby pobrać go z systemu plików serwera)
  4. aplikacja front-end jest skonfigurowana/zaprojektowana w celu ponownej oceny wszystkich odniesień do modułów, które chce ponownie załadować, w tym przypadku tylko widoki JS , szablony i CSS są dostępne do przeładowania na gorąco - sterowniki, datastory (kolekcje i modele szkieletowe) nie są jeszcze skonfigurowane - ruter, . Podejrzewam, że wszystkie pliki mogą być ponownie ładowane na gorąco z jedynym wyjątkiem są magazyny danych.
Powiązane problemy