ارسال message(حقلtext) من يوزر الى قاعدة البيانات وعرضها الى يوزر محدد laravel

لاستخدام الزمن الحقيقي تستطيع ذلك باستخدام Laravel WebSockets

WebSocket هو بروتوكول اتصالات يختلف عن ال HTTP، فبدلاً من سحب التغييرات من السيرفر إلى المستخدم الذي قام بطلب هذه البيانات، يسمح ال WebSocket بإرسال التغييرات من السيرفر إلى عدة مستخدمين بدون طلبها

تحميل الحزمة

composer require beyondcode/laravel-websockets
php artisan vendor:publish --provider="BeyondCode\LaravelWebSockets\WebSocketsServiceProvider" --tag="config"

تعديل ملف ال env

PUSHER_APP_ID=laravel_rdb
PUSHER_APP_KEY=laravel_rdb
PUSHER_APP_SECRET=laravel_rdb
PUSHER_APP_CLUSTER=mt1
BROADCAST_DRIVER=pusher

 config/broadcasting.php

'pusher' => [
    'driver' => 'pusher',
    'key' => env('PUSHER_APP_KEY'),
    'secret' => env('PUSHER_APP_SECRET'),
    'app_id' => env('PUSHER_APP_ID'),
    'options' => [
        'cluster' => env('PUSHER_APP_CLUSTER'),
        'encrypted' => true,
        'host' => '127.0.0.1',
        'port' => 6001,
        'scheme' => 'http'
    ],
],

إنشاء ال Event

php artisan make:event MessageEvent

// app/Events/MessageEvent
class MessageEvent implements ShouldBroadcast
    use Dispatchable, InteractsWithSockets, SerializesModels;
    public $to;
    public function __construct($data)
    {
       $this->to= $data;
    }
    public function broadcastOn()
    {
        return new Channel('MessageSent');
    }
}

ال real-time يعمل كالتالي:

1. يقوم الارافل بلاستماع listen إلى الحدث المسجل MessagEvent
2. عند إرسال رسالة إلى مستخدم ما سنقوم بعمل fire ل event

عند إرسال الرسالة نقوم بكتابة الشيفرة التالية التي تقوم بعملfire ل MessagEvent :

event(new App\Events\MessageEvent($to));

لاستقبال البيانات

npm install --save laravel-echo pusher-js

// resources/js/bootstrap.js
import Echo from 'laravel-echo'
import Pusher from 'pusher-js'
window.Echo = new Echo({
    broadcaster: 'pusher',
    key: process.env.MIX_PUSHER_APP_KEY,
    cluster: process.env.MIX_PUSHER_APP_CLUSTER,
    wsHost: window.location.hostname,
    wsPort: 6001,
    forceTLS: false,
    disableStats: true
});

داخل الصفحة التي نريد عرض الرسائل الواردة:

<div id="user_id" data="{{ auth()->user->id }}"></div>
<script src='./js/app.js'></script>
<script>
 window.Echo.channel('MessageSent')
  .listen('MessageEvent', (e) => {
  if(e.to == $('#user_id').attr('data')){
    // update inbox 
  }  
})
</script>