परिचय
WebSockets और EventSource की मदद से, HTML5 डेवलपर को ऐसे वेब ऐप्लिकेशन बनाने में मदद करता है जो सर्वर के साथ रीयल टाइम में कम्यूनिकेट करते हैं. Stream Congress (Chrome Web Store में उपलब्ध) से, अमेरिका के कॉन्ग्रेशन के कामकाज के बारे में लाइव अपडेट मिलते हैं. इसमें सदन और सीनेट, दोनों से जुड़े ज़रूरी अपडेट, कांग्रेस के सदस्यों के ट्वीट, और सोशल मीडिया से जुड़े अन्य अपडेट स्ट्रीम किए जाते हैं. इस ऐप्लिकेशन को पूरे दिन खुला रखना चाहिए, क्योंकि यह कॉन्ग्रेशन के कामों को कैप्चर करता है.
WebSockets से शुरू करना
WebSockets स्पेसिफ़िकेशन को इस वजह से काफ़ी ध्यान मिला है: यह ब्राउज़र और सर्वर के बीच, एक स्थिर और दोतरफ़ा टीसीपी सॉकेट बनाता है. टीसीपी सॉकेट पर कोई डेटा फ़ॉर्मैट लागू नहीं किया गया है; डेवलपर मैसेज प्रोटोकॉल को तय करने के लिए स्वतंत्र है. आम तौर पर, JSON ऑब्जेक्ट को स्ट्रिंग के तौर पर पास करना सबसे आसान होता है. लाइव अपडेट सुनने के लिए, क्लाइंट-साइड JavaScript कोड आसान और साफ़ है:
var liveSocket = new WebSocket("ws://streamcongress.com:8080/live");
liveSocket.onmessage = function (payload) {
addToStream(JSON.parse(payload.data).reverse());
};
WebSockets के लिए ब्राउज़र की सहायता आसान है, लेकिन सर्वर साइड की सहायता अभी शुरुआती चरण में है. Node.js पर Socket.IO, सर्वर साइड के सबसे बेहतर और मज़बूत समाधानों में से एक है. Node.js जैसा इवेंट-ड्रिवन सर्वर, वेबसोकेट के लिए सही है. Python डेवलपर, Twisted और Tornado का इस्तेमाल करके, इवेंट को लागू करने के अन्य तरीके अपना सकते हैं. वहीं, Ruby डेवलपर के पास EventMachine है.
पेश है Cramp
Cramp, एसिंक्रोनस Ruby वेब फ़्रेमवर्क है, जो EventMachine के ऊपर काम करता है. इसे प्रतिक नाइक ने लिखा है. वे Ruby on Rails की मुख्य टीम के सदस्य हैं. रीयल-टाइम वेब ऐप्लिकेशन के लिए, डोमेन के हिसाब से बनी भाषा (डीएसएल) उपलब्ध कराने वाली Cramp, Ruby वेब डेवलपर के लिए एक बेहतरीन विकल्प है. Ruby on Rails में कंट्रोलर लिखने के बारे में जानने वाले लोग, Cramp के स्टाइल को पहचान पाएंगे:
require "rubygems"
require "bundler"
Bundler.require
require 'cramp'
require 'http_router'
require 'active_support/json'
require 'thin'
Cramp::Websocket.backend = :thin
class LiveSocket < Cramp::Websocket
periodic_timer :check_activities, :every => 15
def check_activities
@latest_activity ||= nil
new_activities = find_activities_since(@latest_activity)
@latest_activity = new_activities.first unless new_activities.empty?
render new_activities.to_json
end
end
routes = HttpRouter.new do
add('/live').to(LiveSocket)
end
run routes
Cramp, नॉन-ब्लॉकिंग EventMachine के ऊपर काम करता है. इसलिए, इन बातों का ध्यान रखना ज़रूरी है:
- MySQLPlus और em-mongo जैसे नॉन-ब्लॉकिंग डेटाबेस ड्राइवर का इस्तेमाल करना ज़रूरी है.
- इवेंट-ड्रिवन वेब सर्वर का इस्तेमाल किया जाना चाहिए. Thin और Rainbows के लिए सहायता पहले से मौजूद है.
- Cramp ऐप्लिकेशन को Stream Congress को चलाने वाले मुख्य Rails ऐप्लिकेशन से अलग चलाया जाना चाहिए. साथ ही, इसे अलग से रीस्टार्ट और मॉनिटर किया जाना चाहिए.
मौजूदा सीमाएं
8 दिसंबर, 2010 को सुरक्षा से जुड़ी एक समस्या का पता चलने पर, वेबसोकेट को एक झटका लगा. Firefox और Opera, दोनों ने WebSockets के लिए ब्राउज़र की सहायता हटा दी है. हालांकि, कोई भी प्योर JavaScript फ़ोलिल मौजूद नहीं है, लेकिन फ़्लैश फ़ॉलबैक का इस्तेमाल बड़े पैमाने पर किया जाता है. हालांकि, फ़्लैश पर भरोसा करना सही नहीं है. Chrome और Safari, WebSockets के साथ काम करते रहेंगे. हालांकि, यह साफ़ तौर पर पता चल गया है कि फ़्लैश पर निर्भर हुए बिना सभी आधुनिक ब्राउज़र के साथ काम करने के लिए, WebSockets को बदलना होगा.
AJAX पोलिंग पर वापस जाना
इसलिए, WebSockets का इस्तेमाल बंद करके, "पुराने जमाने" के AJAX पोलिंग का इस्तेमाल करने का फ़ैसला लिया गया. डिस्क और नेटवर्क I/O के हिसाब से, AJAX पोलिंग काफ़ी कम असरदार है. हालांकि, इसकी मदद से स्ट्रीम कांग्रेस को तकनीकी तौर पर लागू करना आसान हो गया. सबसे अहम बात यह है कि Cramp ऐप्लिकेशन की ज़रूरत नहीं पड़ी. इसके बजाय, Rails ऐप्लिकेशन ने AJAX एंडपॉइंट उपलब्ध कराया. jQuery AJAX पोलिंग के साथ काम करने के लिए, क्लाइंट-साइड कोड में बदलाव किया गया:
var fillStream = function(mostRecentActivity) {
$.getJSON(requestURL, function(data) {
addToStream(data.reverse());
setTimeout(function() {
fillStream(recentActivities.last());
}, 15000);
});
};
AJAX polling, though, is not without its downsides. Relying on the HTTP request/response cycle means that the server sees constant load even when there aren't any new updates. And of course, AJAX polling doesn't take advantage of what HTML5 has to offer.
## EventSource: The right tool for the job
Up to this point, a key factor was ignored about the nature of Stream Congress: the app only needs to stream updates one way, from server to client - downstream. It didn't need to be real-time, upstream client-to-server communication.
In this sense, WebSockets is overkill for Stream Congress. Server-to-client communication is so common that it's been given a general term: push. In fact, many existing solutions for WebSockets, from the hosted [PusherApp](http://pusherapp.com) to the Rails library [Socky](https://github.com/socky), optimize for push and don't support client-to-server communication at all.
Enter EventSource, also called Server-Sent Events. The specification compares favorably to WebSockets in the context to server to client push:
- A similar, simple JavaScript API on the browser side.
- The open connection is HTTP-based, not dropping to the low level of TCP.
- Automatic reconnection when the connection is closed.
### Going Back to Cramp
In recent months, Cramp has added support for EventSource. The code is very similar to the WebSockets implementation:
```ruby
class LiveEvents < Cramp::Action
self.transport = :sse
periodic_timer :latest, :every => 15
def latest
@latest_activity ||= nil
new_activities = find_activities_since(@latest_activity)
@latest_activity = new_activities.first unless new_activities.empty?
render new_activities.to_json
end
end
routes = HttpRouter.new do
add('/').to(LiveEvents)
end
run routes
EventSource के साथ एक अहम समस्या यह है कि क्रॉस-डोमेन कनेक्शन की अनुमति नहीं है. इसका मतलब है कि Cramp ऐप्लिकेशन को उसी streamcongress.com डोमेन से दिखाया जाना चाहिए जिससे मुख्य Rails ऐप्लिकेशन को दिखाया जाता है. इसे वेब सर्वर पर प्रॉक्सी करके पूरा किया जा सकता है. मान लें कि Cramp ऐप्लिकेशन, Thin पर काम करता है और पोर्ट 8000 पर चल रहा है. ऐसे में, Apache कॉन्फ़िगरेशन ऐसा दिखेगा:
LoadModule proxy_module /usr/lib/apache2/modules/mod_proxy.so
LoadModule proxy_http_module /usr/lib/apache2/modules/mod_proxy_http.so
LoadModule proxy_balancer_module /usr/lib/apache2/modules/mod_proxy_balancer.so
<VirtualHost *:80>
ServerName streamcongress.com
DocumentRoot /projects/streamcongress/www/current/public
RailsEnv production
RackEnv production
<Directory /projects/streamcongress/www/current/public>
Order allow,deny
Allow from all
Options -MultiViews
</Directory>
<Proxy balancer://thin>
BalancerMember http://localhost:8000
</Proxy>
ProxyPass /live balancer://thin/
ProxyPassReverse /live balancer://thin/
ProxyPreserveHost on
</VirtualHost>
यह कॉन्फ़िगरेशन, streamcongress.com/live पर EventSource एंडपॉइंट सेट करता है.
स्टेबल पॉलीफ़िल
WebSockets के मुकाबले, EventSource का सबसे अहम फ़ायदा यह है कि फ़ॉलबैक पूरी तरह से JavaScript पर आधारित है और यह Flash पर निर्भर नहीं करता. ऐसा करने के लिए, Remy Sharp की polyfill ऐसे ब्राउज़र में लॉन्ग-पोलिंग का इस्तेमाल करता है जो स्थानीय तौर पर EventSource काम नहीं करते. इसलिए, EventSource फ़ंक्शन आज के सभी आधुनिक ब्राउज़र पर काम करता है. हालांकि, इसके लिए ज़रूरी है कि उन ब्राउज़र में JavaScript चालू हो.
नतीजा
एचटीएमएल5 की मदद से, वेब डेवलपमेंट की कई नई और दिलचस्प संभावनाएं मिलती हैं. WebSockets और EventSource की मदद से, वेब डेवलपर के पास अब रीयल-टाइम वेब ऐप्लिकेशन चालू करने के लिए, साफ़ और अच्छी तरह से तय किए गए स्टैंडर्ड हैं. हालांकि, सभी उपयोगकर्ता मॉडर्न ब्राउज़र का इस्तेमाल नहीं करते. इन टेक्नोलॉजी को लागू करते समय, अच्छे डिग्रेडेशन को ध्यान में रखना चाहिए. साथ ही, WebSockets और EventSource के लिए, सर्वर साइड पर टूल अभी शुरुआती चरणों में हैं. रीयल-टाइम HTML5 ऐप्लिकेशन बनाते समय, इन बातों का ध्यान रखना ज़रूरी है.