使用node.js实现简单的数据推送到浏览器

Question

在服务器端，我使用node.js进行分布式异步ping-pong。现在我需要在客户端浏览器中以实时图表的形式显示结果。为了保持简单，我目前正在使用基于图像的Google图表URL并限制要绘制的数据量。最终，这个客户端展示部分将会是丰富和交互式的。

我知道我的服务器将数据推送到浏览器的一种方式是Comet。我希望浏览器端应该有一个相应的套接字，所以两者应该配合使用。

Q1: 对于原型设计：我从node.js向Firefox 3.6.10浏览器推送字符串数据的最简单方法是什么？每秒少于1KB的字符串更新。

Q2: 对于生产：有没有建议的方法可以在包括移动设备在内的各种浏览器上工作？二进制更新速度每秒约为100KB，没有图像或视频。

- user402476

Answer 1

我非常推荐使用http://socket.io/来进行Node.js的开发。它可以在移动设备上运行，并支持多种Comet效果方法，利用浏览器可用的最佳选项。

它相当简单易用，虽然缺少通道，但通过使用socket.broadcast(msg, [包含除了已订阅用户之外的每个用户的数组])可以轻松解决。

- Robert

Answer 2

每2秒钟，服务器会生成一个在[0,100]范围内的随机数r1，然后向客户端发送消息，要求绘制一个以r1和r2=100-r1为数据的饼图。目前还未实现多个客户端之间的广播功能，欢迎提出改进意见。

服务器端（使用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))

客户端（使用JavaScript的index.html）：

<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>

- user402476