javascript 需要使用 node.js 将简单的数据推送到浏览器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4074569/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Need simple data push to browser using node.js
提问by user402476
On the server side, I use node.js to do some distributed asynchronous ping-pong. I now need to display the results as a real-time chart in a client browser. To keep things simple, I am presently using the image-based Google chart URL and restricting the amount of data to be plotted. Eventually this client-side display piece will be rich & interactive.
在服务器端，我使用 node.js 做一些分布式异步乒乓。我现在需要在客户端浏览器中将结果显示为实时图表。为简单起见，我目前使用基于图像的 Google 图表 URL 并限制要绘制的数据量。最终，这个客户端显示部分将是丰富的和交互式的。
I understand that one of the ways for my server to push the data out to the browser is Comet. I expect there must be a corresponding socket-something on the browser side, so the two should go together.
我知道我的服务器将数据推送到浏览器的方法之一是 Comet。我希望浏览器端必须有一个相应的 socket-something，所以两者应该一起使用。
Q1: For prototyping: what is the simplest way for me to push string data from node.js to my Firefox 3.6.10 browser? String updates less than 1KB once per second.
Q1：对于原型设计：将字符串数据从 node.js 推送到我的 Firefox 3.6.10 浏览器的最简单方法是什么？字符串每秒更新少于 1KB 一次。
Q2: For production: any recommendations for an approach that will work across browsers, including mobile devices? Binary updates order of 100KB per second, no images or video.
Q2：对于生产：对于跨浏览器（包括移动设备）工作的方法有什么建议吗？二进制更新顺序为每秒 100KB，无图像或视频。
回答by Robert
I'd really recommend taking a look at http://socket.io/for Node.js. It works on mobile devices, and supports multiple methods for the Comet effect that you desire, utilizing the best option available to the browser.
对于 Node.js，我真的建议您查看http://socket.io/。它适用于移动设备，并支持多种方法来实现您想要的彗星效果，利用浏览器可用的最佳选项。
It's pretty dead simple too, although it does lack channels, but it's an easy workaround using socket.broadcast(msg, [array containing every user except those 'subscribed'])
它也非常简单，虽然它确实缺乏通道，但使用它是一个简单的解决方法 socket.broadcast(msg, [array containing every user except those 'subscribed'])
回答by user402476
Every two seconds server generates a random number r1 in [0,100], then messages client to draw a piechart with r1 and r2=100-r1. Yet to implement the broadcast suggested for multiple clients. Any other suggestions for improvements welcome.
服务器每两秒在 [0,100] 中生成一个随机数 r1，然后消息客户端绘制一个饼图，其中 r1 和 r2=100-r1。尚未实现为多个客户端建议的广播。欢迎任何其他改进建议。
Server side (in coffeescript):
服务器端（在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))
Client side (index.html with javascript):
客户端（带有 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>
