需要使用node.js将简单的数据推送到浏览器

时间:2010-11-02 02:42:54

标签: javascript node.js

在服务器端,我使用node.js来做一些分布式异步乒乓。我现在需要在客户端浏览器中将结果显示为实时图表。为了简单起见,我目前正在使用基于图像的Google图表网址并限制要绘制的数据量。最终这个客户端显示器将是丰富的和交互式的。

据我所知,我的服务器将数据推送到浏览器的方法之一是Comet。我希望浏览器端必须有一个相应的套接字,所以这两个应该放在一起。

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

Q2:对于制作:对于可以跨浏览器(包括移动设备)使用的方法的任何建议?二进制更新每秒100KB的顺序,没有图像或视频。

2 个答案:

答案 0 :(得分:10)

我真的建议你看看http://socket.io/的Node.js.它适用于移动设备,并支持多种方法来实现您想要的Comet效果,利用浏览器可用的最佳选项。

它也很简单,虽然它确实缺少渠道,但使用socket.broadcast(msg, [array containing every user except those 'subscribed'])

这是一个简单的解决方法

答案 1 :(得分:7)

每两秒钟服务器在[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))

客户端(index.html with 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>