2010-11-02 27 views
10

का उपयोग कर ब्राउज़र पर सरल डेटा पुश की आवश्यकता है सर्वर की तरफ, मैं कुछ वितरित एसिंक्रोनस पिंग-पोंग करने के लिए node.js का उपयोग करता हूं। अब मुझे क्लाइंट ब्राउज़र में रीयल-टाइम चार्ट के रूप में परिणाम प्रदर्शित करने की आवश्यकता है। चीजों को सरल रखने के लिए, मैं वर्तमान में छवि-आधारित Google चार्ट यूआरएल का उपयोग कर रहा हूं और प्लॉट किए जाने वाले डेटा की मात्रा को सीमित कर रहा हूं। आखिरकार यह क्लाइंट-साइड डिस्प्ले टुकड़ा समृद्ध होगा & इंटरैक्टिव।node.js

मैं समझता हूं कि ब्राउज़र में डेटा को धक्का देने के लिए मेरे सर्वर के तरीकों में से एक धूमकेतु है। मुझे उम्मीद है कि ब्राउज़र पक्ष पर एक समान सॉकेट-कुछ होना चाहिए, इसलिए दोनों को एक साथ जाना चाहिए।

प्रश्न 1: प्रोटोटाइप के लिए: मेरे फ़ायरफ़ॉक्स 3.6.10 ब्राउज़र में नोड.जेएस से स्ट्रिंग डेटा को धक्का देने का सबसे आसान तरीका क्या है? प्रति सेकेंड एक बार 1KB से कम स्ट्रिंग अपडेट।

प्रश्न 2: उत्पादन के लिए: मोबाइल उपकरणों सहित ब्राउज़र में काम करने वाले दृष्टिकोण के लिए कोई सिफारिशें? प्रति सेकंड 100 केबी के बाइनरी अपडेट ऑर्डर, कोई छवि या वीडियो नहीं।

उत्तर

10

मैं वास्तव में Node.js. के लिए http://socket.io/ पर एक नज़र डालने की अनुशंसा करता हूं। यह मोबाइल उपकरणों पर काम करता है, और आपके इच्छित धूमकेतु प्रभाव के लिए कई तरीकों का समर्थन करता है, ब्राउज़र के लिए उपलब्ध सर्वोत्तम विकल्प का उपयोग करता है।

यह भी सुंदर मृत आसान है, हालांकि यह कमी चैनलों करता है, लेकिन यह एक आसान समाधान का उपयोग करते हुए socket.broadcast(msg, [array containing every user except those 'subscribed'])

+0

धन्यवाद, कि सही लग रहा है। – user402476

+2

मुझे यह काम करने के लिए मिला। मेरे कोड के लिए नीचे देखें। – user402476

7

हर दो सेकंड सर्वर [0,100] में एक यादृच्छिक संख्या r1 उत्पन्न करता है, तो संदेशों ग्राहक r1 के साथ एक piechart आकर्षित करने के लिए है और आर 2 = 100-आर 1। फिर भी कई ग्राहकों के लिए सुझाए गए प्रसारण को लागू करने के लिए। सुधार के लिए कोई अन्य सुझाव स्वागत है। (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):

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