2010-11-02 9 views
10

Sul lato server, utilizzo node.js per eseguire un ping-pong asincrono distribuito. Ora ho bisogno di visualizzare i risultati come un grafico in tempo reale in un browser client. Per semplificare le cose, attualmente utilizzo l'URL del grafico di Google basato su immagini e limito la quantità di dati da tracciare. Alla fine questo pezzo di visualizzazione lato client sarà ricco & interattivo.È necessario inviare dati semplici al browser utilizzando node.js

Capisco che uno dei modi in cui il mio server invia i dati al browser è Comet. Mi aspetto che ci sia un socket corrispondente, qualcosa sul lato del browser, quindi i due dovrebbero andare insieme.

Q1: per la prototipazione: qual è il modo più semplice per me per trasferire i dati di stringa da node.js al mio browser Firefox 3.6.10? Aggiornamenti di stringa inferiori a 1 KB una volta al secondo.

Q2: Per la produzione: eventuali raccomandazioni per un approccio che funzioni su tutti i browser, inclusi i dispositivi mobili? Ordine di aggiornamento binario di 100 KB al secondo, nessuna immagine o video.

risposta

10

Consiglio vivamente di dare un'occhiata a http://socket.io/ per Node.js. Funziona su dispositivi mobili e supporta diversi metodi per l'effetto Comet che desideri, utilizzando la migliore opzione disponibile per il browser.

E 'abbastanza semplice morto troppo, anche se lo fa canali mancanza, ma è una soluzione semplice utilizzando socket.broadcast(msg, [array containing every user except those 'subscribed'])

+0

Grazie, che sembra perfetto. – user402476

+2

L'ho fatto funzionare. Vedi sotto per il mio codice. – user402476

7

Ogni server di due secondi genera un numero r1 casuale [0100], quindi i messaggi cliente per disegnare un grafico a torta con r1 e r2 = 100-r1. Ancora per implementare la trasmissione suggerita per più clienti. Qualsiasi altro suggerimento per miglioramenti benvenuto.

lato server (in CoffeeScript):

http = require('http') 
io = require('socket.io') 

server = http.createServer() 

server.listen(8000) 

socket = io.listen(server) 

myrand = (client) -> setInterval(-> 
    r1 = Math.floor(Math.random()*101) 
    r2 = 100-r1 
    client.send(String(r1) + ',' + String(r2)) 
, 2000) 

socket.on('connection', (client) -> myrand(client)) 

lato client (index.html con javascript):

<h1>My socket client</h1> 

<script src="http://cdn.socket.io/stable/socket.io.js"></script> 

<div id="piechart"> 
Hello World 
</div> 

<script> 
socket = new io.Socket('localhost:8000'); 
socket.connect(); 
socket.on('message', function(data){ 
    url = 'http://chart.apis.google.com/chart?cht=p3&chs=250x100&chd=t:' + data + '&chl=Hello|World'; 
    document.getElementById('piechart').innerHTML = "<img src="+ url + "></img>"; 
}); 
</script> 
Problemi correlati