2010-11-02 13 views
10

En el lado del servidor, uso node.js para hacer algo de ping-pong asincrónico distribuido. Ahora necesito mostrar los resultados como un gráfico en tiempo real en un navegador de cliente. Para mantener las cosas simples, actualmente estoy usando la URL gráfica de Google basada en imágenes y restringiendo la cantidad de datos que se trazarán. Eventualmente, esta pieza de visualización del lado del cliente será rica & interactiva.Necesita datos simples para navegar usando node.js

Entiendo que una de las formas en que mi servidor envía los datos al navegador es Comet. Supongo que debe haber un zócalo correspondiente, algo en el lado del navegador, por lo que los dos deberían ir juntos.

Q1: Para creación de prototipos: ¿cuál es la forma más sencilla para mí de enviar datos de cadena desde node.js a mi navegador Firefox 3.6.10? La cadena actualiza menos de 1 KB una vez por segundo.

Q2: Para producción: ¿alguna recomendación para un enfoque que funcionará en todos los navegadores, incluidos los dispositivos móviles? Orden de actualizaciones binarias de 100 KB por segundo, sin imágenes ni videos.

Respuesta

10

Realmente recomendaría echar un vistazo a http://socket.io/ para Node.js. Funciona en dispositivos móviles y admite múltiples métodos para el efecto Comet que desee, utilizando la mejor opción disponible para el navegador.

Es bastante simple muerto también, aunque sí canales falta, pero es una solución fácil de usar socket.broadcast(msg, [array containing every user except those 'subscribed'])

+0

Gracias, que se parece perfecto. – user402476

+2

Lo tengo para trabajar. Vea a continuación mi código. – user402476

7

Cada servidor de dos segundos genera un r1 número aleatorio en [0100], a continuación, el cliente de mensajes para dibujar un gráfico circular con R1 y r2 = 100-r1. Sin embargo, para implementar la transmisión sugerida para múltiples clientes. Cualquier otra sugerencia para mejoras bienvenidas.

lado

Server (en 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)) 

lado del cliente (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> 
Cuestiones relacionadas