केस स्टडी - स्ट्रीम कांग्रेस में रीयल-टाइम अपडेट

लुइगी मोंटानेज़
लुइगी मोंटानेज़
X होम पेज

शुरुआती जानकारी

WebSockets और EventSource की मदद से, HTML5 डेवलपर को ऐसे वेब ऐप्लिकेशन बनाने की सुविधा देता है जो सर्वर से रीयल टाइम में कम्यूनिकेट करते हैं. स्ट्रीम कांग्रेस (Chrome वेब स्टोर में उपलब्ध) अमेरिकी कांग्रेस के काम करने के तरीके के बारे में लाइव अपडेट देता है. यह सदन और सीनेट, दोनों के फ़्लोर अपडेट, प्रासंगिक समाचार अपडेट, कांग्रेस के सदस्यों के ट्वीट, और अन्य सामाजिक मीडिया अपडेट स्ट्रीम करता है. इस ऐप को पूरे दिन खुला रखना चाहिए, क्योंकि यह कांग्रेस के कारोबार को दिखाता है.

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 जैसा इवेंट-ड्रिवन सर्वर WebSockets के लिए सही है. अन्य तरीकों को लागू करने के लिए, Python डेवलपर Twisted और Tornado का इस्तेमाल कर सकते हैं, जबकि Ruby डेवलपर के पास EventMachine इस्तेमाल किया जा सकता है.

पेश है क्रैंप

Cramp, एसिंक्रोनस Ruby वेब फ़्रेमवर्क है, जो EventMachine के सबसे ऊपर चलता है. इसे प्रतीक नाइक ने लिखा है. वे रूबी ऑन रेल की कोर टीम के सदस्य हैं. रीयल-टाइम वेब ऐप्लिकेशन के लिए, डोमेन से जुड़ी खास भाषा (डीएसएल) उपलब्ध कराने के बाद, Cramp, Ruby वेब डेवलपर के लिए एक बेहतरीन विकल्प है. जिन लोगों को Ruby on Rails में राइटिंग कंट्रोलर के बारे में जानकारी है वे क्रैंप की स्टाइल को पहचान लेंगे:

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

ऐसा इसलिए, क्योंकि क्रैंप ब्लॉक न की जा सकने वाली EventMachine की सबसे ऊपर मौजूद है. इसलिए, हमने कई बातों का ध्यान रखा है:

  • ब्लॉक न करने वाले डेटाबेस ड्राइवर का इस्तेमाल करना ज़रूरी है, जैसे कि MySQLPlus और em-mongo.
  • इवेंट पर आधारित वेब सर्वर का इस्तेमाल करना चाहिए. थिन और रेनबो के लिए सहायता पहले से मौजूद है.
  • Kramp ऐप्लिकेशन को स्ट्रीम कांग्रेस की सुविधा देने वाले मुख्य Rails ऐप्लिकेशन से अलग होना चाहिए. साथ ही, फिर से चालू करके, स्वतंत्र रूप से इसे रीस्टार्ट करना और मॉनिटर करना चाहिए.

मौजूदा सीमाएं

सुरक्षा से जुड़े जोखिम की आशंका को सार्वजनिक करने के बाद, 8 दिसंबर, 2010 को WebSockets को नुकसान पहुंचा. Firefox और Opera, दोनों ने WebSockets के लिए ब्राउज़र इस्तेमाल करने की सुविधा हटा दी है. हालांकि, कोई पूरी तरह से JavaScript पॉलीफ़िल मौजूद नहीं है, लेकिन इसमें फ़्लैश फ़ॉलबैक होता है. इसका बड़े पैमाने पर इस्तेमाल किया जाता है. हालांकि, Flash पर भरोसा करना बहुत अच्छा नहीं है. भले ही Chrome और Safari, WebSockets का इस्तेमाल कर रहे हों, लेकिन यह साफ़ हो गया था कि Flash पर निर्भर हुए बिना सभी मॉडर्न ब्राउज़र पर काम करने के लिए, WebSockets को बदलना होगा.

AJAX पोलिंग पर वापस जाना

यह फ़ैसला लिया गया कि WebSockets इस्तेमाल बंद करके, फिर से "पुराने स्कूल" वाले AJAX पोलिंग पर ध्यान दिया जाए. डिस्क और नेटवर्क I/O के नज़रिए से यह बहुत कम कारगर है, लेकिन AJAX पोलिंग की मदद से स्ट्रीम कांग्रेस को तकनीकी तौर पर लागू करना आसान हो गया. सबसे बड़ी वजह यह थी कि एक अलग Cramp ऐप्लिकेशन बनाने की ज़रूरत खत्म हो गई थी. इसके बजाय, AJAX एंडपॉइंट Rails ऐप्लिकेशन से मिला था. क्लाइंट-साइड कोड में बदलाव किया गया था, ताकि 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 के साथ ध्यान रखने वाली एक ज़रूरी समस्या यह है कि क्रॉस-डोमेन कनेक्शन की अनुमति नहीं है. इसका मतलब है कि Kramp ऐप्लिकेशन को उसी Streamcon सामग्री.com डोमेन से सेवा दी जानी चाहिए जिससे मुख्य Rails ऐप्लिकेशन को सेवा मिलती है. ऐसा वेब सर्वर पर प्रॉक्सी करके किया जा सकता है. यह मानने पर कि Kramp ऐप्लिकेशन 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 की कोई ज़रूरत नहीं होती. रेमी शार्प का polyfill इस काम को पूरा करने के लिए, ऐसे ब्राउज़र में लॉन्ग-पोलिंग लागू करता है जो मूल रूप से EventSource के साथ काम नहीं करते. इसलिए, EventSource उन सभी मॉडर्न ब्राउज़र पर काम करता है जिनमें JavaScript चालू है.

नतीजा

HTML5 कई नई और रोमांचक वेब डेवलपमेंट संभावनाओं के दरवाज़े खोल देता है. WebSockets और EventSource की मदद से, अब वेब डेवलपर के पास रीयल-टाइम वेब ऐप्लिकेशन चालू करने के लिए, साफ़ और अच्छी तरह तय किए गए मानक हैं. लेकिन सभी उपयोगकर्ता मॉडर्न ब्राउज़र नहीं चलाते. इन टेक्नोलॉजी को चुनते समय, डेटा की क्वालिटी में गिरावट को ध्यान में रखना चाहिए. साथ ही, WebSockets और EventSource के लिए सर्वर साइड पर टूल बनाने की प्रक्रिया अब भी शुरुआती चरण में है. रीयल-टाइम HTML5 ऐप्लिकेशन बनाते समय इन बातों को ध्यान में रखना ज़रूरी है.