Rails 7 में Action Cable के साथ WebSockets: एक लाइव ट्रैफिक काउंटर बनाएं

परिचय

अगर आपने कभी चाहा है कि आपका Rails ऐप जीवंत लगे, तो आपको Action Cable देखना चाहिए। यह Rails का अंतर्निहित तरीका है WebSockets करने का, जिसका अर्थ है कि आपका सर्वर और ब्राउज़र वास्तविक समय में जुड़े रह सकते हैं और बातचीत कर सकते हैं। अब कोई पृष्ठ ताज़ा नहीं, कोई भारी पोलिंग नहीं — अपडेट तुरंत दिखाई देते हैं।

इस गाइड में, हम एक मजेदार छोटा डेमो बनाएंगे: एक लाइव ट्रैफिक काउंटर। जब कोई आपके साइट पर आता है, तो हम उस विज़िट को डेटाबेस में लॉग करेंगे, कुछ काउंटर को मेमोरी में बढ़ाएंगे, और सभी ऑनलाइन लोगों को अपडेटेड नंबर प्रसारित करेंगे। टैब बंद करें? ऑनलाइन उपयोगकर्ता संख्या तुरंत गिर जाती है। यह सरल है, लेकिन यह दिखाता है कि Action Cable Rails 7 में वास्तविक समय का जादू कैसे लाता है।

चरण 1: विज़िट मॉडल

पहले, चलिए एक मॉडल बनाते हैं जो विज़िट्स को लॉग करे।

bin/rails g model Visit session_id:string ip:string user_agent:string
bin/rails db:migrate

# app/models/visit.rb
class Visit < ApplicationRecord
end

चरण 2: एक कस्टम कनेक्शन बनाना

Rails पहले से ही आपको app/channels/application_cable/ में दो बेस क्लासेस देता है:
- channel.rb → आपके सभी चैनलों के लिए बेस क्लास।
- connection.rb → आपके सभी WebSocket कनेक्शनों के लिए बेस क्लास।

हम सामान्यतः उन्हें संपादित नहीं करते। इसके बजाय, हम app/channels/ के अंदर अपनी खुद की कनेक्शन क्लास बनाकर उन्हें बढ़ाते हैं। इससे डिफ़ॉल्ट साफ रहते हैं और हमारी लॉजिक एक स्पष्ट स्थान पर होती है।

# app/channels/traffic_connection.rb
module ApplicationCable
  class TrafficConnection < Connection
    identified_by :session_id, :ip, :user_agent

    def connect
      self.session_id = request.session.id
      self.ip         = request.ip
      self.user_agent = request.user_agent
    end
  end
end

चरण 3: मेमोरी में काउंटर

हम चीजों को तेज़ बनाने के लिए एटॉमिक काउंटर का उपयोग करेंगे। बूट के समय, हम DB से कुल विज़िट्स प्राप्त करते हैं, और ऑनलाइन उपयोगकर्ताओं को शून्य पर शुरू करते हैं।

# config/initializers/traffic_counter.rb
$online_users = Concurrent::AtomicFixnum.new(0)
$total_visits = Concurrent::AtomicFixnum.new(Visit.count)

चरण 4: चैनल

यहां मज़ा होता है — विज़िट लॉग करें, काउंटर अपडेट करें, और प्रसारित करें।

# app/channels/traffic_channel.rb
class TrafficChannel < ApplicationCable::Channel
  def subscribed
    # लॉग विज़िट
    Visit.create!(session_id: connection.session_id,
                  ip: connection.ip,
                  user_agent: connection.user_agent)

    # काउंटर अपडेट करें
    $online_users.increment
    $total_visits.increment

    stream_from "traffic_channel"
    broadcast_counts
  end

  def unsubscribed
    $online_users.decrement
    broadcast_counts
  end

  private

  def broadcast_counts
    ActionCable.server.broadcast("traffic_channel", {
      online: $online_users.value,
      total:  $total_visits.value
    })
  end
end

चरण 5: जावास्क्रिप्ट साइड

जब आप bin/rails generate channel Traffic चलाते हैं, तो Rails दो फ़ाइलें बनाता है: Ruby चैनल और जावास्क्रिप्ट सब्सक्रिप्शन फ़ाइल। डिफ़ॉल्ट रूप से, JS फ़ाइल consumer.js को आयात करती है, जिसे Rails ने आपके ऐप के जनरेशन के समय सेट किया था।

// app/javascript/channels/traffic_channel.js
import consumer from "./consumer"

consumer.subscriptions.create("TrafficChannel", {
  received(data) {
    document.querySelector("#online-count").textContent = data.online
    document.querySelector("#total-count").textContent = data.total
  }
})

यह consumer.js फ़ाइल Rails द्वारा बनाई जाती है जब आप एक नया ऐप बनाते हैं। यह /cable के लिए वैश्विक WebSocket कनेक्शन सेट करती है और इस तरह दिखती है:

// app/javascript/channels/consumer.js
import { createConsumer } from "@rails/actioncable"

export default createConsumer()

चरण 6: दृश्य

<h1>🚦 लाइव ट्रैफिक</h1>
<p>वर्तमान में ऑनलाइन: <span id="online-count">0</span></p>
<p>कुल विज़िट्स: <span id="total-count"><%= Visit.count %></span></p>

चरण 7: रूट्स

# config/routes.rb
Rails.application.routes.draw do
  root "home#index"
  mount ActionCable.server => "/cable"
end

चरण 8: इसे आज़माएं

अपने ऐप को bin/dev के साथ चलाएं। अपने साइट को कुछ टैब में खोलें। ऑनलाइन उपयोगकर्ताओं की संख्या हर टैब के साथ बढ़ती है, और जब आप उन्हें बंद करते हैं तो गिर जाती है। कुल विज़िट्स बस बढ़ती जाती हैं। देखना बहुत संतोषजनक है!

उत्पादन के लिए नोट्स

- कई Puma वर्कर्स? काउंटर के लिए Redis का उपयोग करें — मेमोरी प्रक्रियाओं के बीच समन्वयित नहीं होगी।
- क्या आप सत्रों के बजाय वास्तविक उपयोगकर्ताओं को ट्रैक करना चाहते हैं? कनेक्शन में current_user जोड़ें।
- DB में विज़िट्स को स्टोर करने का मतलब है कि आप बाद में एनालिटिक्स चला सकते हैं, जैसे दैनिक ट्रैफिक या ब्राउज़र ब्रेकडाउन।

और बस इतना ही — Rails 7 में Action Cable के साथ एक वास्तविक समय का लाइव ट्रैफिक काउंटर। 100 लाइनों से कम कोड में, आपके पास तात्कालिक अपडेट और WebSockets की क्षमताओं का एक स्वाद है। यही सेटअप नोटिफिकेशन, डैशबोर्ड और सभी प्रकार की वास्तविक समय की सुविधाओं के लिए काम करता है। एक बार जब आप इसे आज़मा लेंगे, तो आप इसे हर जगह छिड़कना चाहेंगे।