सॉलिड केबल के साथ मास्टर रेल्स एक्शन केबल:रेडिस के बिना रीयल-टाइम ऐप्स बनाएं

रेल एक्शन केबल का उपयोग क्यों करें?

• लाइव चैट एप्लिकेशन
• सूचनाएं और फ़ीड
• लाइव अपडेट के साथ सहयोगी ऐप्स
• लाइव स्पोर्ट्स या स्टॉक टिकर

तो फिर सॉलिड केबल क्या है?

सॉलिड केबल के साथ रेल 8 ऐप बनाना

एक उदाहरण ऐप बनाना

rails _8.1.0_ new solid_cable_chat --database=sqlite3

सॉलिड केबल को कॉन्फ़िगर करना

bin/rails solid_cable:install

सॉलिड केबल के लिए अपना डेटाबेस सेट करना

development:
 primary:
 <<: *default
 database: storage/development.sqlite3
 cable:
 <<: *default
 database: storage/development_cable.sqlite3
 migrations_paths: db/cable_migrate

production:
 primary:
 <<: *default
 database: storage/production.sqlite3
 cache:
 <<: *default
 database: storage/production_cache.sqlite3
 migrations_paths: db/cache_migrate
 queue:
 <<: *default
 database: storage/production_queue.sqlite3
 migrations_paths: db/queue_migrate
 cable:
 <<: *default
 database: storage/production_cable.sqlite3
 migrations_paths: db/cable_migrate

development:
 adapter: solid_cable
 connects_to:
 database:
 writing: cable
 polling_interval: 0.1.seconds
 message_retention: 1.day

test:
 adapter: test

production:
 adapter: solid_cable
 connects_to:
 database:
 writing: cable
 polling_interval: 0.1.seconds
 message_retention: 1.day

एक्शन केबल चैनल स्थापित करना

rails generate channel UserChat

class UserChatChannel < ApplicationCable::Channel
 def subscribed
 stream_from "user_chat_channel"
 end

 def unsubscribed
 # Any cleanup needed when unsubscribing from the channel
 end

 def talk(data)
 message = data["content"]
 ActionCable.server.broadcast("user_chat_channel", { content: message })
 end
end

क्लाइंट में हमारे चैनल का उपभोक्ता बनाना

import consumer from "channels/consumer";

const userChatChannel = consumer.subscriptions.create("UserChatChannel", {
 connected() {
 console.log("Connected to UserChatChannel.");
 },

 disconnected() {
 console.log("Disconnected from UserChatChannel.");
 },

 received(data) {
 const messagesDiv = document.getElementById("messages");
 if (messagesDiv && data.content) {
 const messageElement = document.createElement("p");
 messageElement.textContent = data.content;
 messagesDiv.appendChild(messageElement);
 }
 }
});

function sendMessage(content) {
 userChatChannel.perform("talk", { content: content });
}

export { sendMessage };
window.sendMessage = sendMessage;

हमारे उदाहरण ऐप के लिए एक सरल यूआई बनाना

rails generate controller UserChat index

<h1>Chats from Users</h1>

<div id="messages" style="border: 1px solid #ccc; padding: 1em; height: 200px; overflow-y: auto; margin-bottom: 1em;">
 <!-- Messages will appear here -->
</div>

<form id="chat-form" onsubmit="event.preventDefault(); sendMessage(document.getElementById('chat-input').value); document.getElementById('chat-input').value = '';">
 <input type="text" id="chat-input" placeholder="Type a message..." autocomplete="off" style="width: 80%;" />
 <button type="submit">Send</button>
</form>

root "user_chat#index"

दिखा रहा है कि यह सब एक साथ कैसे काम करता है

रेल एक्शन केबल को उत्पादन में तैनात करना

मतदान अंतराल कॉन्फ़िगर करना

सॉलिड केबल सॉलिड ट्राइफेक्टा का एक आवश्यक स्तंभ है