रूबी में पुश और पब/उप

रेल में रीयल टाइम सुविधाओं का निर्माण एक्शन केबल जैसे पुस्तकालयों के साथ करना बहुत आसान हो गया है। ऐपसिग्नल अकादमी के इस एपिसोड में, हम वास्तविक समय में अपडेट करने और एक न्यूनतम वेबसॉकेट सर्वर बनाने के साथ खिलवाड़ करेंगे, यह देखने के लिए कि यह हुड के तहत कैसे काम करता है।

हम एक ऐसा एप्लिकेशन बना रहे हैं जो पुश डेटा, और पब/उप . का उपयोग करता है एक वेबसॉकेट . पर . इससे पहले कि हम कोड शुरू करें, आइए पहले उन तीन अवधारणाओं का अर्थ जानने के लिए थोड़ा समय दें:

पुश करें उस डेटा के लिए रिसीवर पोल होने के बजाय डेटा को एक रिसीवर को पुश करने के लिए संदर्भित करता है। स्टॉक की कीमतों, चैट एप्लिकेशन या संचालन कंसोल जैसे रीयलटाइम अपडेट में होना चाहिए।
पब/उप या प्रकाशित और सदस्यता 1990 के दशक में वॉल स्ट्रीट पर TIBCO द्वारा लोकप्रिय किए गए डेटा को आगे बढ़ाने के लिए एक इंटरैक्शन मॉडल है। एक रिसीवर किसी विषय की सदस्यता लेता है और उस विषय पर डेटा को आगे बढ़ाने के लिए प्रकाशक की प्रतीक्षा करता है। प्रकाशित संदेश को श्रोता से मिलाने के लिए वाइल्डकार्ड पैटर्न मिलान को शामिल करना आम बात है, हालांकि कुछ सरल कार्यान्वयन विषय में वाइल्डकार्ड के बजाय केवल नामित चैनलों का उपयोग करते हैं। मैंने उन शुरुआती दिनों में टिब्को में शुरुआत की थी इसलिए मुझे वाइल्डकार्ड पैटर्न मिलान का लचीलापन पसंद है।
वेबसॉकेट डेटा के आदान-प्रदान के लिए एक प्रोटोकॉल है - आमतौर पर एक वेब ब्राउज़र और एक एप्लिकेशन के बीच। एक HTTP कनेक्शन को वेबसॉकेट कनेक्शन में अपग्रेड किया जाता है और फिर डेटा को दो एंडपॉइंट्स के बीच दोनों तरीकों से भेजा जा सकता है। WebSockets किसी एप्लिकेशन से डेटा को ब्राउज़र में पुश कर सकता है। यह ब्राउज़र में आपके जावास्क्रिप्ट कोड से डेटा को वापस एप्लिकेशन में भेजने के लिए POST या PUT के अलावा अन्य तंत्र भी प्रदान करता है। बहुत अच्छा, हुह?

अंडर द हुड

आइए देखें कि वेबसॉकेट सर्वर का एक उदाहरण कैसे काम कर सकता है। ब्राउज़र से, क्लाइंट JavaScript कोड वाले सर्वर से WebSocket कनेक्शन बनाने का प्रयास करता है।

var sock = new WebSocket("ws://" + document.URL.split("/")[2] + "/upgrade");

सर्वर को एक संकेतक के साथ एक HTTP अनुरोध प्राप्त होता है कि एक अपग्रेड का अनुरोध किया गया था। आम तौर पर, सर्वर किसी एप्लिकेशन को यह तय करने देता है कि अपग्रेड करना है या नहीं। यह कैसे करता है यह ऐप को प्रदान किए गए एपीआई पर निर्भर करता है। एक सर्वर जो रैक का समर्थन करता है, सॉकेट को हाईजैक करने का विकल्प प्रदान करता है और डेवलपर को सभी प्रोटोकॉल विवरणों को संभालने देता है या, प्रस्तावित पीआर के अनुसार, अपग्रेड के लिए एक प्रतिक्रिया पर्याप्त है।

अपग्रेड सर्वर और क्लाइंट के बीच एक्सचेंजों का एक सेट है। सभी ब्राउज़र और कुछ सर्वर रत्न इन विवरणों को छिपाते हैं। एक बार कनेक्शन स्थापित हो जाने के बाद, संदेशों का आदान-प्रदान वेबसॉकेट प्रोटोकॉल के अनुसार किया जा सकता है।

हुड के नीचे का जादू एन्कोडिंग, डिकोडिंग और संदेश विनिमय प्रोटोकॉल को संभालता है। संदेश एक अनुगामी पेलोड के साथ बाइनरी, निश्चित-चौड़ाई वाली संरचनाएं हैं, जिन्हें SHA1 का उपयोग करके एन्क्रिप्ट किया गया है। वेबसॉकेट प्रोटोकॉल में कई संदेश प्रकार और एक्सचेंज शामिल हैं, जैसे पिंग/पोंग दिल की धड़कन और संदेश एक्सचेंज खोलना और बंद करना। कनेक्शन-हाईजैक दृष्टिकोण का उपयोग न करके सर्वर यही जादू करते हैं।

डाइविंग इन

हम एक क्लॉक थ्रेड के उदाहरण का उपयोग करेंगे जो सभी सुनने वाले क्लाइंट के लिए वर्तमान समय को प्रकाशित करने के लिए प्रारंभ किया गया है। हम अपना सर्वर बनाने के लिए Agoo का उपयोग करेंगे क्योंकि यह तेज़ है और जटिलता को न्यूनतम रखता है।

हम एक HTML पृष्ठ पर वर्तमान समय दिखाकर क्लाइंट के रूप में कुछ जावास्क्रिप्ट के साथ शुरुआत करेंगे। एक नया WebSocket बनाने के बाद एक onopen कॉलबैक सेट किया गया है जो स्थिति HTML तत्व को बदलता है। onmessage कॉलबैक onmessage को अपडेट करता है एचटीएमएल तत्व। एसिंक्रोनस कॉल जैसे पब्लिश और सब्सक्राइब एक्सचेंज के साथ काम करते समय कॉलबैक एक सामान्य डिज़ाइन पैटर्न है।

<!-- websocket.html -->
<html>
  <body>
    <p id="status">...</p>
    <p id="message">... waiting ...</p>
 
    <script type="text/javascript">
      var sock = new WebSocket(
        "ws://" + document.URL.split("/")[2] + "/upgrade"
      );
      sock.onopen = function () {
        document.getElementById("status").textContent = "connected";
      };
      sock.onmessage = function (msg) {
        document.getElementById("message").textContent = msg.data;
      };
    </script>
  </body>
</html>

हमारे क्लाइंट के हो जाने के बाद, सर्वर को लागू करते हैं, जो कि रैक एपीआई का उपयोग करके रूबी एप्लिकेशन है। Clock क्लास स्वयं /upgrade . पर सभी HTTP अनुरोधों के लिए एक हैंडलर होगा रास्ता। यदि अनुरोध अपग्रेड के लिए है तो हम केवल 200 के HTTP स्टेटस कोड के साथ सक्सेस लौटाते हैं, अन्यथा, हम पेज नॉट फाउंड के लिए 404 लौटाते हैं। #call . में एकमात्र अन्य चरण विधि WebSocket हैंडलर का असाइनमेंट है।

class Clock
  def self.call(env)
    unless env['rack.upgrade?'].nil?
      env['rack.upgrade'] = Clock
      [ 200, { }, [ ] ]
    else
      [ 404, { }, [ ] ]
    end
  end
end

एपीआई कॉलबैक पर आधारित है। हमारे सर्वर के लिए केवल एक ही कॉलबैक है जिसकी हमें परवाह है #on_open कॉलबैक जो हमें "समय" विषय की सदस्यता बनाने में सक्षम बनाता है। विषयों या विषयों द्वारा पहचाने गए चैनलों पर संदेशों का आदान-प्रदान किया जाता है। #on_open वेब सॉकेट कनेक्शन स्थापित होने पर कॉल किया जाता है।

class Clock
  # ...
 
  def self.on_open(client)
    client.subscribe('time')
  end
end

अब, आइए एक थ्रेड के साथ प्रकाशन शुरू करें जो हर सेकेंड के बाद समय प्रकाशित करता है। Agoo.publish पर कॉल करें "समय" विषय पर एक संदेश भेजता है, फिर सभी ग्राहक संदेश प्राप्त करते हैं। सर्वर सब्सक्रिप्शन और कनेक्शन का ट्रैक रखता है और जावास्क्रिप्ट क्लाइंट को संदेश डिलीवर करता है जो HTML तत्व को अपडेट करता है।

require 'agoo'
 
Thread.new {
  loop do
    now = Time.now
    Agoo.publish('time', "%02d:%02d:%02d" % [now.hour, now.min, now.sec])
    sleep(1)
  end
}

केवल अन्य कोड की आवश्यकता है वह कोड है जो सर्वर को प्रारंभ और प्रारंभ करता है। Agoo::Server.handle(:GET, '/upgrade', Clock) पर कॉल करें सर्वर को /upgrade . पर HTTP GET अनुरोधों को सुनने के लिए कहता है URL पथ और उन अनुरोधों को Clock . पर भेजने के लिए कक्षा। यह बेहतर प्रदर्शन और लचीलेपन के लिए रूबी के बाहर रूटिंग की अनुमति देता है।

Agoo::Server.init(6464, '.', thread_count: 0)
Agoo::Server.handle(:GET, '/upgrade', Clock)
Agoo::Server.start

हम लगभग वहीँ हैं। इस आदेश के साथ सर्वर चलाएँ।

$ ruby pubsub.rb

एक लॉग प्रविष्टि दिखाई देनी चाहिए जो निम्न की तरह कुछ दिखाती है, यह दर्शाता है कि सर्वर चल रहा है और पोर्ट 6464 पर सुन रहा है।

I 2018/08/14 19:49:45.170618000 INFO: Agoo 2.5.0 with pid 40366 is listening on https://:6464.

यह देखने का समय है कि क्या यह काम कर रहा है

आइए https://localhost:6464/websocket.html खोलें। एक कनेक्शन के रूप में एक प्रारंभिक झिलमिलाहट के बाद, कनेक्शन की स्थिति और समय प्रदर्शित किया जाना चाहिए। घड़ी की टिक टिक के रूप में समय हर सेकंड बढ़ता जाएगा।

connected

19:50:12

वेब एप्लिकेशन प्रकाशित करने और सदस्यता लेने के लिए बधाई;-)

आज के एपिसोड में, हमने WebSocket का उपयोग करते हुए देखा। सर्वर साइड इवेंट्स (एसएसई) ऐसा करने का एक और विकल्प प्रदान करता है, और हमने एसएसई को पूर्ण स्रोत कोड उदाहरण में शामिल किया है। यदि आप और अधिक जानकारी प्राप्त करना चाहते हैं, तो हमारे द्वारा उपयोग किए गए Agoo सर्वर या आयोडीन वेबसॉकेट सर्वर पर एक नज़र डालें।

यदि आपके कोई प्रश्न या टिप्पणी हैं, तो बेझिझक हमें एक लाइन @AppSignal दें।