Socket IO - Echo Server - Lumen, Vue JS - Laravel Echo.md

Vue, Laravel echo + socket.io + lumen (event, listener).md

Vue, Laravel echo + socket.io + lumen (event, listener)

Steps:

1. Install required npm packages

   socket.io-client laravel-echo
   

2. Registering these two package to src/main.js file

   import Echo from 'laravel-echo'
   window.io = require('socket.io-client')
   
   window.Echo = new Echo({
   broadcaster: 'socket.io',
   host: '<a href="http://localhost:6001',
   ">http://localhost:6001',
   </a>  auth: {headers: {Authorization: 'Bearer ' + localStorage.getItem('token')}}
   })
   

3. Applying in Footer.vue file

       methods: {
           getEventsNoFromSocket () {
               let currentUser = JSON.parse(localStorage.getItem('user'));
               window.Echo.channel('parseNoti.' + currentUser.id)
               .listen('.App\\Events\\ParseFilesEvent', (e) => {
                   this.messages.push(e)
               });
           }
       },
       mounted () {
           this.getEventsNoFromSocket()
       }
   

4. Install laravel-echo-server:

   $ npm install -g laravel-echo-server
   $ laravel-echo-server init //generate a laravel-echo-server.json file
   

5. Run socket server

   $ laravel-echo-server start
   

6. Using supervisor to run socket server

   sudo apt-get install supervisor
   

7. create a echo-server.conf file within /etc/supervisor/conf.d folder

   [program:echo-server]
   process_name=%(program_name)s_%(process_num)02d
   command=/usr/bin/laravel-echo-server start --dir=/var/www/html/echo
   autostart=true
   autorestart=true
   user=root
   redirect_stderr=true
   stdout_logfile=/home/echo-server.log
   

8. Then run this scripts:

   sudo supervisorctl reread
   sudo supervisorctl update
   sudo supervisorctl start echo-server:*
   

9. Lumen event listener

   // event. channel, listener
   namespace App\Events;
   
   use Illuminate\Contracts\Broadcasting\ShouldBroadcast;
   use Illuminate\Broadcasting\Channel;
   use Illuminate\Broadcasting\PrivateChannel;
   use Illuminate\Broadcasting\PresenceChannel;
   use Illuminate\Broadcasting\InteractsWithSockets;
   use Illuminate\Support\Carbon;
   
   class ParseFilesEvent extends Event implements ShouldBroadcast
   {
   
       public $message;
   
       public $user_id;
   
       public $noti_time;
   
       public $noti_type;
   
       /**
       * The name of the queue on which to place the event.
       *
       * @var string
       */
       // public $broadcastQueue = 'uploadResultNotification';
   
       /**
       * Create a new event instance.
       *
       * @return void
       */
       public function __construct($user_id, $message, $noti_type = 1 )
       {
           //
       $this->user_id = $user_id;
       $this->message = $message;
       $this->noti_type = $noti_type;
       $this->noti_time = Carbon::now()->format('Y-m-d H:i:s');
       }
   
       /**
       * Get the channels the event should broadcast on.
       *
       * @return array
       */
       public function broadcastOn()
       {
           return new Channel('parseNoti.' . $this->user_id);
       }
   
   }
   
   //Listener 
   namespace App\Listeners;
   
   use App\Events\ParseFilesEvent;
   use Illuminate\Queue\InteractsWithQueue;
   use Illuminate\Contracts\Queue\ShouldQueue;
   use Log;
   use Illuminate\Support\Facades\Notification;
   use App\Notifications\ParseFilesNoti;
   use App\User;
   
   class ParseFilesListener
   {
       /**
       * Create the event listener.
       *
       * @return void
       */
       public function __construct()
       {
           //
       }
   
       /**
       * Handle the event.
       *
       * @param  ExampleEvent  $event
       * @return void
       */
       public function handle(ParseFilesEvent $event)
       {
           //
           //Log::info('Event is happing: ' . $event->message);
           Notification::send(User::find($event->user_id), new ParseFilesNoti($event->message));
       }
   }
   

10. Fire an event

    Event::dispatch(new ParseFilesEvent($this->current_user_id , $message ));
    

11. Configure events in a queue.

    # /etc/supervisor/conf.d/laravel-worker.conf
    [program:laravel-worker]
    process_name=%(program_name)s_%(process_num)02d
    #command=php /var/www/html/cats/cats-backend/artisan queue:work --timeout=30 --sleep=20 --tries=1
    command=php /var/www/html/hydcats-backend/artisan queue:work --timeout=30 --sleep=20 --tries=1
    autostart=true
    autorestart=true
    user=root
    numprocs=8
    redirect_stderr=true
    stopasgroup=true
    stopsignal=QUIT
    stdout_logfile=/home/worker.log