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

يجب إنشاء علاقات بين الجداول من نوع one to many ثم استخدام تقنيات الزمن الحقيقي لتحقيق المطلوب.

قم بتقسيم المهمة إلى 6مراحل فرعية:

1. إنشاء جدول مستخدمين users يحوي الحقول التالية id - name - email
2. إنشاء جدول للرسائل messages يحوي الحقول التالية: id - from - content - to
3. بناء one to many relationship داخل ال models: User, Message
4. إنشاء ال form الخاص بكتابة الرسالة وتحديد المرسل إليه
5. إنشاء div لعرض محتوى الرسائل الواردة
6. استخدام الزمن الحقيقي real-time لاستقبال الرسالة في نفس اللحظة التي تم الإرسال بها دون الحاجة للقيام بتحديث الصفحة

لماذا نحتاج علاقة من نوع one to many ؟

لأن المستخدم يستطيع إرسال الرسائل لأكثر من مستخدم، تستطيع الاطلاع على التوثيق الرسمي للارافل من هنا:

User

php artisan make:model User -m

// User Model
public function from(){
   return $this->hasMany(Message::class, 'from');
}
public function to(){
   return $this->hasMany(Message::class, 'to');
}

// users migration
Schema::create('users', function (Blueprint $table) {
    $table->id();
    $table->string('name');
    $table->string('email')->unique();
    $table->string('password')->nullable();
    $table->rememberToken();
    $table->timestamps();
});

Message

php artisan make:model Message -m

// Message Model
public function user(){
   return $this->belongsTo(User::class, 'from');
}

// messages migration
Schema::create('messages ', function (Blueprint $table) {
      $table->bigIncrements('id');
      $table->string('content');
      $table->unsignedBigInteger('from');
      $table->foreign('from')->references('id')->on('users');
      $table->unsignedBigInteger('to');
      $table->foreign('to')->references('id')->on('users');
      $table->timestamps();
});

إرسال رسالة:

$to = 2; // المعرف الخاص بالشخص المرسل إليه 
$content= 'test message';
Message::create([
   'from' => auth()->user()->id,
   'content' => $content,
   'to' => $to,
]);

استقبال الرسالة:

$user = User::whereId(auth()->user()->id)->first();
$sent_messages = $user->to;
$names = [];
   foreach ($sent_messages as $message) {
      array_push($names, $message->from->name );
   }
dd($sent_messages);

لاستخدام الزمن الحقيقي تستطيع ذلك باستخدام 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>

قم بحفظ الرسالة في قاعدة البيانات مع حفظ id المرسل و المرسل اليه، لم أفهم ما مشكلتك ؟