Laravel ब्रॉडकास्टिंग कैसे काम करता है

Hindi (हिंदी) translation by Ashish Rampal (you can also view the original English article)

आज, हम Laravel वेब फ्रेमवर्क में ब्राडकास्टिंग की अवधारणा का पता लगाने जा रहे हैं। जब सर्वर साइड पर कुछ होता है तो यह आपको क्लाइंट साइड को नोटिफिकेशन भेजने की अनुमति देता है। इस आलेख में, हम क्लाइंट साइड को नोटिफिकेशन्स भेजने के लिए थर्ड पार्टी के Pusher लाइब्रेरी का उपयोग करने जा रहे हैं।

यदि आप कभी भी सर्वर से क्लाइंट को नोटिफिकेशन भेजना चाहते हैं जब Laravel में सर्वर पर कुछ होता है, तो आप ब्राडकास्टिंग फीचर की तलाश में हैं।

उदाहरण के लिए, मान लीजिए कि आपने एक मैसेजिंग एप्लिकेशन इम्प्लीमेंट किया है जो आपके सिस्टम के यूज़र्स को एक दूसरे को संदेश भेजने की अनुमति देता है। अब, जब यूजर A यूजर B को संदेश भेजता है, तो आप वास्तविक समय में यूजर B को सूचित करना चाहते हैं। आप एक पॉपअप या अलर्ट बॉक्स प्रदर्शित कर सकते हैं जो यूजर B को नए संदेश के बारे में सूचित करता है!

Laravel में ब्राडकास्टिंग की अवधारणा के माध्यम से चलने के लिए यह एकदम सही उपयोग-मामला है, और यही वह है जिसे हम इस लेख में लागू करेंगे।

यदि आप सोच रहे हैं कि सर्वर क्लाइंट को नोटिफिकेशन कैसे भेज सकता है, तो यह इसे पूरा करने के लिए हुड के नीचे सॉकेट का उपयोग कर रहा है। वास्तविक कार्यान्वयन में गहराई से पहले चलो सॉकेट के मूल प्रवाह को समझें।

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

चिंता न करें अगर यह एक ही बार में बहुत ज्यादा दिखता है; जब आप इस आलेख से आगे बढ़ते हैं तो आपको इसका आधार मिल जाएगा।

इसके बाद, आइए config/broadcasting.php पर डिफ़ॉल्ट ब्रॉडकास्ट कॉन्फ़िगरेशन फ़ाइल देखें।

<?php

return [

    /*
    |--------------------------------------------------------------------------
    | Default Broadcaster
    |--------------------------------------------------------------------------
    |
    | This option controls the default broadcaster that will be used by the
    | framework when an event needs to be broadcast. You may set this to
    | any of the connections defined in the "connections" array below.
    |
    | Supported: "pusher", "redis", "log", "null"
    |
    */

    'default' => env('BROADCAST_DRIVER', 'log'),

    /*
    |--------------------------------------------------------------------------
    | Broadcast Connections
    |--------------------------------------------------------------------------
    |
    | Here you may define all of the broadcast connections that will be used
    | to broadcast events to other systems or over websockets. Samples of
    | each available type of connection are provided inside this array.
    |
    */

    'connections' => [

        'pusher' => [
            'driver' => 'pusher',
            'key' => env('PUSHER_APP_KEY'),
            'secret' => env('PUSHER_APP_SECRET'),
            'app_id' => env('PUSHER_APP_ID'),
        ],

        'redis' => [
            'driver' => 'redis',
            'connection' => 'default',
        ],

        'log' => [
            'driver' => 'log',
        ],

        'null' => [
            'driver' => 'null',
        ],

    ],

];

डिफ़ॉल्ट रूप से, Laravel कोर में कई ब्रॉडकास्ट एडेप्टर का समर्थन करता है।

इस लेख में, हम Pusher ब्रॉडकास्ट एडाप्टर का उपयोग करने जा रहे हैं। डिबगिंग उद्देश्यों के लिए, आप लॉग एडाप्टर का भी उपयोग कर सकते हैं। बेशक, यदि आप log एडाप्टर का उपयोग कर रहे हैं, तो क्लाइंट को कोई ईवेंट नोटिफिकेशन नहीं मिलेगा, और यह केवल laravel.log फ़ाइल में लॉग इन होगा।

अगले खंड से आगे, हम उपर्युक्त उपयोग-मामले के वास्तविक कार्यान्वयन में तुरंत डुबकी लेंगे।

Prerequisites सेटअप करना

ब्राडकास्टिंग में, विभिन्न प्रकार के चैनल होते हैं-public, private और presence। जब आप अपनी इवेंट्स को पब्लिक्ली ब्रॉडकास्ट करना चाहते हैं, तो यह पब्लिक चैनल है जिसका उपयोग आप करना चाहते हैं। इसके विपरीत, जब आप ईवेंट नोटिफिकेशन को कुछ निजी चैनलों पर प्रतिबंधित करना चाहते हैं तो प्राइवेट चैनल का उपयोग किया जाता है।

हमारे उपयोग-मामले में, हम यूज़र्स को नोटिफाई करना चाहते हैं जब वे कोई नया मैसेज प्राप्त करते हैं। और ब्रॉडकास्ट नोटिफिकेशन्स प्राप्त करने के योग्य होने के लिए, यूजर को लॉग इन होना चाहिए। इस प्रकार, हमें अपने मामले में प्राइवेट चैनल का उपयोग करने की आवश्यकता होगी।

कोर ऑथेंटिकेशन फ़ीचर

सबसे पहले, आपको डिफॉल्ट Laravel ऑथेंटिकेशन सिस्टम को इनेबल करने की आवश्यकता है ताकि रजिस्ट्रेशन, लॉगिन और बॉक्स के बाहर लाइक वर्क जैसी सुविधाएं हों। यदि आप सुनिश्चित नहीं हैं कि ऐसा कैसे करें, ऑफिशल डॉक्यूमेंटेशन उसमें त्वरित अंतर्दृष्टि प्रदान करता है।

Pusher SDK-इंस्टालेशन और कॉन्फ़िगरेशन

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

इसके बाद, हमें Pusher PHP SDK इनस्टॉल करने की आवश्यकता है ताकि हमारे Laravel एप्लिकेशन Pusher वेब-सॉकेट सर्वर पर ब्रॉडकास्ट नोटिफिकेशन्स भेज सकें।

अपने Laravel एप्लिकेशन रूट में, इसे कंपोज़र पैकेज के रूप में इनस्टॉल करने के लिए निम्न कमांड चलाएं।

$composer require pusher/pusher-php-server "~3.0"

अब, Pusher एडाप्टर को हमारे डिफ़ॉल्ट ब्रॉडकास्ट ड्राइवर के रूप में इनेबल करने के लिए ब्रॉडकास्ट कॉन्फ़िगरेशन फ़ाइल को बदलें।

<?php

return [

    /*
    |--------------------------------------------------------------------------
    | Default Broadcaster
    |--------------------------------------------------------------------------
    |
    | This option controls the default broadcaster that will be used by the
    | framework when an event needs to be broadcast. You may set this to
    | any of the connections defined in the "connections" array below.
    |
    | Supported: "pusher", "redis", "log", "null"
    |
    */

    'default' => env('BROADCAST_DRIVER', 'pusher'),

    /*
    |--------------------------------------------------------------------------
    | Broadcast Connections
    |--------------------------------------------------------------------------
    |
    | Here you may define all of the broadcast connections that will be used
    | to broadcast events to other systems or over websockets. Samples of
    | each available type of connection are provided inside this array.
    |
    */

    'connections' => [

        'pusher' => [
            'driver' => 'pusher',
            'key' => env('PUSHER_APP_KEY'),
            'secret' => env('PUSHER_APP_SECRET'),
            'app_id' => env('PUSHER_APP_ID'),
            'options' => [
                        'cluster' => 'ap2',
                        'encrypted' => true
            ],
        ],

        'redis' => [
            'driver' => 'redis',
            'connection' => 'default',
        ],

        'log' => [
            'driver' => 'log',
        ],

        'null' => [
            'driver' => 'null',
        ],

    ],

];

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

इसके अलावा, यह एनवायरनमेंट वेरिएबल से मूल्य ला रहा है। तो आइए सुनिश्चित करें कि हम .env फ़ाइल में निम्न वेरिएबल को सही तरीके से सेट करते हैं।

BROADCAST_DRIVER=pusher

PUSHER_APP_ID={YOUR_APP_ID}
PUSHER_APP_KEY={YOUR_APP_KEY}
PUSHER_APP_SECRET={YOUR_APP_SECRET}

इसके बाद, मुझे नवीनतम Pusher SDK के साथ कम्पेटिबल बनाने के लिए कुछ कोर Laravel फ़ाइलों में कुछ बदलाव करना पड़ा। बेशक, मैं कोर फ्रेमवर्क में कोई भी बदलाव करने की अनुशंसा नहीं करता हूं, लेकिन मैं केवल यह बताऊंगा कि क्या करने की आवश्यकता है।

आगे बढ़ें और खोलें vendor/laravel/framework/src/Illuminate/Broadcasting/Broadcasters/PusherBroadcaster.php फ़ाइल। बस स्निपेट use Pusher; को Pusher\Pusher; के साथ बदल दें।

इसके बाद, आइए vendor/laravel/framework/src/Illuminate/Broadcasting/BroadcastManager.php फ़ाइल खोलें और निम्न स्निपेट में इसी तरह का परिवर्तन करें।

return new PusherBroadcaster(
  new \Pusher\Pusher($config['key'], $config['secret'],
  $config['app_id'], Arr::get($config, 'options', []))
);

अंत में, निम्न पंक्ति में कमेंट को हटाकर config/app.php में ब्रॉडकास्ट सर्विस को इनेबल करने दें।

App\Providers\BroadcastServiceProvider::class,

अब तक, हमने सर्वर-विशिष्ट लाइब्रेरीज इनस्टॉल की हैं। अगले खंड में, हम क्लाइंट लाइब्रेरी के माध्यम से जाएंगे जिन्हें भी इंस्टॉल करने की आवश्यकता है।

Pusher और Laravel इको लाइब्रेरीज-इंस्टालेशन और कॉन्फ़िगरेशन

ब्राडकास्टिंग में, क्लाइंट साइड की ज़िम्मेदारी चैनलों की सदस्यता लेना और वांछित घटनाओं को सुनना है। इस के तहत, यह वेब-सॉकेट सर्वर से नया कनेक्शन खोलकर इसे पूरा करता है।

सौभाग्य से, हमें इसे प्राप्त करने के लिए किसी जटिल जावास्क्रिप्ट कंटेंट को लागू करने की आवश्यकता नहीं है क्योंकि Laravel पहले से ही एक उपयोगी क्लाइंट लाइब्रेरी प्रदान करता है, Laravel Echo, जो क्लाइंट साइड पर सॉकेट से निपटने में हमारी सहायता करता है। साथ ही, यह Pusher सर्विस का समर्थन करता है जिसे हम इस आलेख में उपयोग करने जा रहे हैं।

आप NPM पैकेज मैनेजर का उपयोग कर Laravel Echo इंस्टॉल कर सकते हैं। बेशक, आपको पहले स्थान पर node और npm इनस्टॉल करने की आवश्यकता है यदि आपके पास पहले से नहीं है। बाकी स्निपेट में दिखाए गए अनुसार बाकी बहुत सरल है।

$npm install laravel-echo

हम जिसमे रुचि रखते हैं वह है node_modules/laravel-echo/dist/echo.js फ़ाइल है जिसे आपको public/echo.js पर प्रतिलिपि बनाना चाहिए।

हां, मैं समझता हूं, यह सिर्फ एक ही जावास्क्रिप्ट फ़ाइल प्राप्त करने के लिए थोड़ा अधिक है। यदि आप इस अभ्यास से गुजरना नहीं चाहते हैं, तो आप मेरे GitHub से echo.js फ़ाइल डाउनलोड कर सकते हैं।

और इसके साथ, हमने अपनी क्लाइंट लाइब्रेरीज को पूरा कर लिया।

बैक-एंड फ़ाइल सेटअप

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

इस खंड में, हम उन फ़ाइलों को बनाएंगे जो उपयोग-मामले को लागू करने के लिए आवश्यक हैं जिन्हें हम ढूंढ रहे हैं।

आरंभ करने के लिए, चलिए Message मॉडल बनाएं जो यूज़र्स द्वारा भेजे गए संदेशों को एक-दूसरे को भेजे।

$php artisan make:model Message --migration

हमें कुछ फ़ील्ड्स को जोड़ने, जैसे to, from, और message को हमारे messages टेबल में जोड़ने की भी आवश्यकता है। तो माइग्रेट कमांड चलाने से पहले माइग्रेशन फ़ाइल को बदल दें।

<?php

use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;

class CreateMessagesTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('messages', function (Blueprint $table) {
            $table->increments('id');
            $table->integer('from', FALSE, TRUE);
            $table->integer('to', FALSE, TRUE);
            $table->text('message');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('messages');
    }
}

अब, माइग्रेट कमांड चलाएं जो डेटाबेस में messages टेबल बनाता है।

$php artisan migrate

जब भी आप Laravel में एक कस्टम इवेंट उठाना चाहते हैं, तो आपको उस इवेंट के लिए एक क्लास बनाना चाहिए। इवेंट के प्रकार के आधार पर, Laravel तदनुसार प्रतिक्रिया करता है और आवश्यक एक्शन्स को लेता है।

यदि इवेंट एक सामान्य इवेंट है, तो Laravel संबंधित लिस्टनेर क्लासेज को बुलाता है। दूसरी ओर, यदि ईवेंट ब्रॉडकास्ट टाइप का है, तो Laravel उस इवेंट को वेब-सॉकेट सर्वर पर भेजता है जो config/broadcasting.php फ़ाइल में कॉन्फ़िगर किया गया है।

चूंकि हम अपने उदाहरण में Pusher सर्विस का उपयोग कर रहे हैं, Laravel Pusher सर्वर पर ईवेंट भेज देगा।

आइए कस्टम इवेंट क्लास-NewMessageNotification बनाने के लिए निम्न आर्टिसन कमांड का उपयोग करें।

$php artisan make:event NewMessageNotification

इसे app/Events/NewMessageNotification.php क्लास बनाना चाहिए। आइए उस फ़ाइल के कंटेंट को निम्न के साथ रेप्लस करें।

<?php

namespace App\Events;

use Illuminate\Broadcasting\Channel;
use Illuminate\Queue\SerializesModels;
use Illuminate\Broadcasting\PrivateChannel;
use Illuminate\Broadcasting\PresenceChannel;
use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Contracts\Broadcasting\ShouldBroadcastNow;
use App\Message;

class NewMessageNotification implements ShouldBroadcastNow
{
    use SerializesModels;

    public $message;

    /**
     * Create a new event instance.
     *
     * @return void
     */
    public function __construct(Message $message)
    {
        $this->message = $message;
    }

    /**
     * Get the channels the event should broadcast on.
     *
     * @return Channel|array
     */
    public function broadcastOn()
    {
        return new PrivateChannel('user.'.$this->message->to);
    }
}

ध्यान देने योग्य महत्वपूर्ण बात यह है कि NewMessageNotification क्लास ShouldBroadcastNow इंटरफ़ेस लागू करता है। इस प्रकार, जब हम एक इवेंट उठाते हैं, तो Laravel जानता है कि इस इवेंट को ब्रॉडकास्ट किया जाना चाहिए।

वास्तव में, आप ShouldBroadcast इंटरफ़ेस को भी इम्प्लीमेंट कर सकते हैं, और Laravel इवेंट queue में एक ईवेंट जोड़ता है। ईवेंट queue वर्कर द्वारा इसे संसाधित किया जाएगा जब इसे ऐसा करने का मौका मिलता है। हमारे मामले में, हम इसे तुरंत ब्रॉडकास्ट करना चाहते हैं, और यही कारण है कि हमने ShouldBroadcastNow इंटरफ़ेस का उपयोग किया है।

हमारे मामले में, हम यूजर को प्राप्त एक संदेश प्रदर्शित करना चाहते हैं, और इस प्रकार हमने constructor आर्गुमेंट में Message मॉडल पारित कर दिया है। इस तरह, डेटा इवेंट के साथ पारित किया जाएगा।

इसके बाद, broadcastOn मेथड है जो उस चैनल के नाम को परिभाषित करती है जिस पर ईवेंट प्रसारित किया जाएगा। हमारे मामले में, हमने प्राइवेट चैनल का उपयोग किया है क्योंकि हम ईवेंट ब्रॉडकास्ट को लॉग-इन users तक सीमित करना चाहते हैं।

$this->message->to वेरिएबल के लिए उस यूजर की ID को संदर्भित करता है जिस पर ईवेंट ब्रॉडकास्ट किया जाएगा। इस प्रकार, यह प्रभावी ढंग से चैनल नाम जैसे user.{USER_ID} बनता है।

प्राइवेट चैनलों के मामले में, क्लाइंट को वेब-सॉकेट सर्वर से कनेक्शन स्थापित करने से पहले खुद को प्रमाणित करना होगा। यह सुनिश्चित करता है कि प्राइवेट चैनलों पर ब्रॉडकास्ट होने वाले इंवेंट केवल ऑथेंटिकेट क्लाइंट को भेजी जाती हैं। हमारे मामले में, इसका मतलब है कि केवल लॉग-इन यूजर ही हमारे चैनल user.{USER_ID} की सदस्यता ले सकेंगे।

यदि आप चैनल सदस्यता के लिए Larave Echo क्लाइंट लाइब्रेरी का उपयोग कर रहे हैं, तो आप भाग्यशाली हैं! यह स्वचालित रूप से ऑथेंटिकेशन भाग का ख्याल रखता है, और आपको केवल चैनल रुट्स को परिभाषित करने की आवश्यकता होती है।

आइए आगे बढ़ें और routes/channel.php फ़ाइल में हमारे प्राइवेट चैनल के लिए एक रूट जोड़ें।

<?php

/*
|--------------------------------------------------------------------------
| Broadcast Channels
|--------------------------------------------------------------------------
|
| Here you may register all of the event broadcasting channels that your
| application supports. The given channel authorization callbacks are
| used to check if an authenticated user can listen to the channel.
|
*/

Broadcast::channel('App.User.{id}', function ($user, $id) {
    return (int) $user->id === (int) $id;
});

Broadcast::channel('user.{toUserId}', function ($user, $toUserId) {
    return $user->id == $toUserId;
});

जैसा कि आप देख सकते हैं, हमने user.{toUserId} को हमारे प्राइवेट चैनल के लिए परिभाषित किया है।

चैनल मेथड का दूसरा आर्गुमेंट एक क्लोजर फंक्शन होना चाहिए। Laravel स्वचालित रूप से वर्तमान में लॉग-इन यूजर को क्लोजर फ़ंक्शन के पहले आर्गुमेंट के रूप में पास करता है, और दूसरा आर्गुमेंट आम तौर पर चैनल नाम से प्राप्त होता है।

जब क्लाइंट प्राइवेट चैनल user.{USER_ID} की सदस्यता लेने का प्रयास करता है, Laravel Echo लाइब्रेरी XMLHttpRequest ऑब्जेक्ट का उपयोग करके बैकग्राउंड में आवश्यक ऑथेंटिकेशन करता है, या अधिक सामान्यतः XHR के रूप में जाना जाता है।

अब तक, हमने सेटअप के साथ समाप्त कर लिया है, तो चलो आगे बढ़ें और इसका परीक्षण करें।

फ्रंट एंड फ़ाइल सेटअप

इस खंड में, हम उन फ़ाइलों को बनाएंगे जो हमारे उपयोग-मामले का परीक्षण करने के लिए आवश्यक हैं।

आइए आगे बढ़ें और निम्नलिखित कंटेंट के साथ app/Http/Controllers/MessageController.php पर एक कंट्रोलर फ़ाइल बनाएं।

<?php
namespace App\Http\Controllers;

use App\Http\Controllers\Controller;
use App\Message;
use App\Events\NewMessageNotification;
use Illuminate\Support\Facades\Auth;

class MessageController extends Controller
{
    public function __construct() {
        $this->middleware('auth');
    }

    public function index()
    {
        $user_id = Auth::user()->id;
        $data = array('user_id' => $user_id);

        return view('broadcast', $data);
    }

    public function send()
    {
        // ...
        
        // message is being sent
        $message = new Message;
        $message->setAttribute('from', 1);
        $message->setAttribute('to', 2);
        $message->setAttribute('message', 'Demo message from user 1 to user 2');
        $message->save();
        
        // want to broadcast NewMessageNotification event
        event(new NewMessageNotification($message));
        
        // ...
    }
}

index मेथड में, हम broadcast व्यू का उपयोग कर रहे हैं, इसलिए चलिए resources/views/broadcast.blade.php व्यू फ़ाइल भी बनाते हैं।

<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>Test</title>

    <!-- Styles -->
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
    <div id="app">
        <nav class="navbar navbar-default navbar-static-top">
            <div class="container">
                <div class="navbar-header">

                    <!-- Collapsed Hamburger -->
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#app-navbar-collapse">
                        <span class="sr-only">Toggle Navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>

                    <!-- Branding Image -->
                    <a class="navbar-brand123" href="{{ url('/') }}">
                        Test
                    </a>
                </div>

                <div class="collapse navbar-collapse" id="app-navbar-collapse">
                    <!-- Left Side Of Navbar -->
                    <ul class="nav navbar-nav">
                        &nbsp;
                    </ul>

                    <!-- Right Side Of Navbar -->
                    <ul class="nav navbar-nav navbar-right">
                        <!-- Authentication Links -->
                        @if (Auth::guest())
                            <li><a href="{{ route('login') }}">Login</a></li>
                            <li><a href="{{ route('register') }}">Register</a></li>
                        @else
                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
                                    {{ Auth::user()->name }} <span class="caret"></span>
                                </a>

                                <ul class="dropdown-menu" role="menu">
                                    <li>
                                        <a href="{{ route('logout') }}"
                                            onclick="event.preventDefault();
                                                     document.getElementById('logout-form').submit();">
                                            Logout
                                        </a>

                                        <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
                                            {{ csrf_field() }}
                                        </form>
                                    </li>
                                </ul>
                            </li>
                        @endif
                    </ul>
                </div>
            </div>
        </nav>

        <div class="content">
                <div class="m-b-md">
                    New notification will be alerted realtime!
                </div>
        </div>
    </div>

    <!-- receive notifications -->
    <script src="{{ asset('js/echo.js') }}"></script>

    <script src="https://js.pusher.com/4.1/pusher.min.js"></script>
        
        <script>
          Pusher.logToConsole = true;
        
          window.Echo = new Echo({
            broadcaster: 'pusher',
            key: 'c91c1b7e8c6ece46053b',
            cluster: 'ap2',
            encrypted: true,
            logToConsole: true
          });
        
          Echo.private('user.{{ $user_id }}')
          .listen('NewMessageNotification', (e) => {
              alert(e.message.message);
          });
        </script>
    <!-- receive notifications -->
</body>
</html>

और, ज़ाहिर है, हमें routes/web.php फ़ाइल में रूट जोड़ने की जरूरत है।

Route::get('message/index', 'MessageController@index');
Route::get('message/send', 'MessageController@send');

कंट्रोलर क्लास के कन्स्ट्रक्टर मेथड में, आप देख सकते हैं कि हमने यह सुनिश्चित करने के लिए auth मिडलवेयर का उपयोग किया है कि कंट्रोलर मेथड्स को केवल लॉग-इन यूज़र्स द्वारा एक्सेस किया जाता है।

इसके बाद, index मेथड है जो broadcast व्यू प्रस्तुत करती है। आइए व्यू फ़ाइल में सबसे महत्वपूर्ण कोड खींचें।

<!-- receive notifications -->
<script src="{{ asset('js/echo.js') }}"></script>

<script src="https://js.pusher.com/4.1/pusher.min.js"></script>
    
<script>
    Pusher.logToConsole = true;

    window.Echo = new Echo({
        broadcaster: 'pusher',
        key: 'c91c1b7e8c6ece46053b',
        cluster: 'ap2',
        encrypted: true,
        logToConsole: true
    });

    Echo.private('user.{{ $user_id }}')
    .listen('NewMessageNotification', (e) => {
        alert(e.message.message);
    });
</script>
<!-- receive notifications -->

सबसे पहले, हम आवश्यक क्लाइंट लाइब्रेरीज़, Laravel Echo और Pusher लोड करते हैं, जो हमें Pusher वेब-सॉकेट सर्वर से वेब-सॉकेट कनेक्शन खोलने की इजाजत देता है।

इसके बाद, हम Pusher को हमारे ब्रॉडकास्ट एडाप्टर और अन्य आवश्यक Pusher से संबंधित जानकारी के रूप में प्रदान करके Echo का उदाहरण बनाते हैं।

आगे बढ़ते हुए, हम प्राइवेट चैनल user.{USER_ID} की सदस्यता लेने के लिए Echo की निजी मेथड का उपयोग करते हैं। जैसा कि हमने पहले चर्चा की थी, क्लाइंट को प्राइवेट चैनल की सदस्यता लेने से पहले खुद को ऑथेंटिकेट करना होगा। इस प्रकार Echo ऑब्जेक्ट आवश्यक पैरामीटर के साथ बैकग्राउंड में XHR भेजकर आवश्यक ऑथेंटिकेशन करता है। अंत में, Laravel user.{USER_ID} रूट को खोजने का प्रयास करता है, और इसे रूट से मेल खाना चाहिए जिसे हमने routes/channel.php फ़ाइल में परिभाषित किया है।

अगर सब कुछ ठीक हो जाता है, तो आपके पास Pusher वेब-सॉकेट सर्वर के साथ एक वेब-सॉकेट कनेक्शन होना चाहिए, और यह user.{USER_ID} चैनल पर ईवेंट सूचीबद्ध कर रहा है! अब से, हम इस चैनल पर आने वाली सभी इवेंट्स को प्राप्त करने में सक्षम होंगे।

हमारे मामले में, हम NewMessageNotification ईवेंट को सुनना चाहते हैं और इस प्रकार हमने इसे प्राप्त करने के लिए Echo ऑब्जेक्ट की listen मेथड का उपयोग किया है। चीजों को सरल रखने के लिए, हम केवल उस संदेश को अलर्ट करेंगे जो हमें Pusher सर्वर से प्राप्त हुआ है।

तो यह वेब-सॉकेट सर्वर से ईवेंट प्राप्त करने के लिए सेटअप था। इसके बाद, हम कंट्रोलर फ़ाइल में send मेथड से गुजरेंगे जो ब्रॉडकास्ट ईवेंट उठाता है।

आइए send मेथड के कोड को जल्दी से खींचें।

public function send()
{
    // ...
    
    // message is being sent
    $message = new Message;
    $message->setAttribute('from', 1);
    $message->setAttribute('to', 2);
    $message->setAttribute('message', 'Demo message from user 1 to user 2');
    $message->save();
    
    // want to broadcast NewMessageNotification event
    event(new NewMessageNotification($message));
    
    // ...
}

हमारे मामले में, जब हम एक नया संदेश प्राप्त करते हैं तो हम लॉग-इन यूज़र्स को सूचित करने जा रहे हैं। तो हमने send मेथड में उस व्यवहार की नकल करने की कोशिश की है।

इसके बाद, हमने NewMessageNotification ईवेंट को बढ़ाने के लिए event हेल्पर फ़ंक्शन का उपयोग किया है। चूंकि NewMessageNotification ईवेंट ShouldBroadcastNow टाइप का है, Laravel config/broadcasting.php फ़ाइल से डिफ़ॉल्ट ब्रॉडकास्ट कॉन्फ़िगरेशन लोड करता है। अंत में, यह user.{USER_ID} चैनल पर कॉन्फ़िगर किए गए वेब-सॉकेट सर्वर पर NewMessageNotification ईवेंट प्रसारित करता है।

हमारे मामले में, ईवेंट यूजर पर Pusher वेब-सॉकेट सर्वर user.{USER_ID} चैनल पर प्रसारित किया जाएगा। यदि रेसिपिएंट यूजर की ID 1 है, तो ईवेंट user.1 चैनल पर प्रसारित किया जाएगा।

जैसा कि हमने पहले चर्चा की थी, हमारे पास पहले से ही एक सेटअप है जो इस चैनल पर इवेंट्स को सुनता है, इसलिए यह इस इवेंट को प्राप्त करने में सक्षम होना चाहिए, और अलर्ट बॉक्स यूजर को प्रदर्शित किया जाता है!

आइए आगे बढ़ें और इस बात से आगे बढ़ें कि आपने उपयोग-मामले का परीक्षण कैसे किया है जिसे हमने अभी तक बनाया है।

URL http://your-laravel-site-domain/message/index को अपने ब्राउज़र में खोलें। अगर आप अभी तक लॉग इन नहीं हैं, तो आपको लॉगिन स्क्रीन पर रीडायरेक्ट कर दिया जाएगा। एक बार लॉग इन करने के बाद, आपको ब्रॉडकास्ट व्यू देखना चाहिए जिसे हमने पहले परिभाषित किया था-अभी तक कुछ भी फैंसी नहीं है।

वास्तव में, Laravel ने आपके लिए पहले से ही बैकग्राउंड में काफी काम किया है। चूंकि हमने Pusher क्लाइंट लाइब्रेरी द्वारा प्रदान की गई Pusher.logToConsole सेटिंग को इनेबल किया है, यह डिबगिंग उद्देश्यों के लिए ब्राउज़र कंसोल में सबकुछ लॉग करता है। चलिए देखते हैं कि जब आप http://your-laravel-site-domain/message/index पेज तक पहुंचते हैं तो कंसोल पर क्या लॉग किया जा रहा है।

Pusher : State changed : initialized -> connecting

Pusher : Connecting : {"transport":"ws","url":"wss://ws-ap2.pusher.com:443/app/c91c1b7e8c6ece46053b?protocol=7&client=js&version=4.1.0&flash=false"}

Pusher : Connecting : {"transport":"xhr_streaming","url":"https://sockjs-ap2.pusher.com:443/pusher/app/c91c1b7e8c6ece46053b?protocol=7&client=js&version=4.1.0"}

Pusher : State changed : connecting -> connected with new socket ID 1386.68660

Pusher : Event sent : {"event":"pusher:subscribe","data":{"auth":"c91c1b7e8c6ece46053b:cd8b924580e2cbbd2977fd4ef0d41f1846eb358e9b7c327d89ff6bdc2de9082d","channel":"private-user.2"}}

Pusher : Event recd : {"event":"pusher_internal:subscription_succeeded","data":{},"channel":"private-user.2"}

Pusher : No callbacks on private-user.2 for pusher:subscription_succeeded

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

इसके बाद, आइए http://your-laravel-site-domain/message/send URL को अन्य टैब में या किसी भिन्न ब्राउज़र में भेजें। यदि आप किसी भिन्न ब्राउज़र का उपयोग करने जा रहे हैं, तो आपको उस पेज तक पहुंचने में सक्षम होने के लिए लॉग इन करने की आवश्यकता है।

जैसे ही आप http://your-laravel-site-domain/message/send पेज खोलते हैं, आपको http://your-laravel-site-domain/message/index पर दूसरे टैब में एक चेतावनी संदेश देखने में सक्षम होना चाहिए।

चलो कंसोल पर नेविगेट करें कि यह देखने के लिए कि अभी क्या हुआ है।

Pusher : Event recd : {"event":"App\\Events\\NewMessageNotification","data":{"message":{"id":57,"from":1,"to":2,"message":"Demo message from user 1 to user 2","created_at":"2018-01-13 07:10:10","updated_at":"2018-01-13 07:10:10"}},"channel":"private-user.2"}

जैसा कि आप देख सकते हैं, यह आपको बताता है कि आपने private-user.2 चैनल पर Pusher वेब-सॉकेट सर्वर से App\Events\NewMessageNotification ईवेंट प्राप्त किया है।

वास्तव में, आप देख सकते हैं कि Pusher के भाग में भी क्या हो रहा है। अपने Pusher अकाउंट पर जाएं और अपने एप्लीकेशन पर नेविगेट करें। Debug Console के तहत, आपको लॉग इन किए गए संदेशों को देखने में सक्षम होना चाहिए।

और यह हमें इस लेख के अंत में लाता है! उम्मीद है कि, यह एक ही बार में बहुत ज्यादा नहीं था क्योंकि मैंने अपने ज्ञान के सर्वोत्तम चीजों को सरल बनाने की कोशिश की है।

निष्कर्ष

आज, हम Laravel-ब्राडकास्टिंग की कम चर्चा की गई फीचर में से एक के माध्यम से गए। यह आपको वेब सॉकेट का उपयोग करके रीयल-टाइम नोटिफिकेशन भेजने की अनुमति देता है। इस आलेख के दौरान, हमने एक वास्तविक दुनिया का उदाहरण बनाया जिसने उपरोक्त अवधारणा का प्रदर्शन किया।

हां, मुझे पता है, एक लेख में पचाने के लिए बहुत सी चीजें हैं, इसलिए नीचे कमेंट का उपयोग करने के लिए स्वतंत्र महसूस करें, आपको इम्प्लीमेंटेशन के दौरान परेशानी के बारे में बताएं।