إظهار القيم دون الحاجة لتحديث الصفحة في لارافل

Mohammed Abu Yousef · 4 أغسطس 2021

هناك endpoint من نوع post، يتم إرسال إليها قيمة درجة الحرارة كل 5 ثواني مثلا، ويتم تخزين هذه القيم في قاعدة البيانات طبعا، أريد عرض هذه القيم في المتصفح ويتم عرضها، عند إعطاء قيمة جديدة، أريد أن تظهر القيمة الجديدة مباشرة دون الحاجة لتحديث الصفحة باستخدام laravel ( API )

ملاحظة / عن طريق ال API وليس Server Side Rendering

وشكرا مقدما

Sam Ahw · 4 أغسطس 2021

تحديث البيانات من طرف المتصفح يمكن من خلال إما استخدام web sockets لفتح اتصال مع الخادم وإرسال هذه البيانات الجديدة عند استقبالها بشكل فوري ومباشر إلى المستخدم وذلك سيتطلب تهئية مناسبة للخادم لديك ووضع الإعدادات المناسبة (بحيث يتم استقبال بيانات API عند الخادم لديك وإعادة إرسالها إلى المستخدم).

أما الحل الثاني والذي لا ينصح به في حال كانت الموارد محدودة على استضافة خادم الويب لديك، وهو طلب هذه البيانات بشكل مباشر من المتصفح كل مدة زمنية معيّنة من خلال استخدام AJAX أو axios مثلاً مع set interval، بحيث يتم إرسال طلب إلى الخادم كل 5 دقائق للتحقق من وجود بيانات جديدة، وفي حال وجودها يتم استقبالها في المتصفح وتحديثها ضمن الصفحة.

لا أعلم إن فهمت سؤالك بالشكل الصحيح، ولكن يمكنك إرفاق أجزاء الكود وما تحاول تحقيقه بالتفصيل لنتمكّن من مساعدتك بشكل أفضل.

Adnane Kadri · 4 أغسطس 2021

يمكن استعمال دريفر Pusher لتحقيق الغرض . لنقم بإتباع الخطوات التالية :

1. تثبيت حزمة خادم Pusher في تطبيق الللارافل :

composer require pusher/pusher-php-server

2, إنشاء تطبيق Pusher : نحتاج في هاته الخطوة إلى التسجيل في pusher.com و تسجيل تطبيق جديد .

بعد ذلك سنحتاج نسخ معلومات التوثيق و نقوم بوضعها في ملف الإعداد env. كما يلي :

PUSHER_APP_ID=PUT_YOUR_PUSHER_ID_HERE
PUSHER_APP_KEY=PUT_YOUR_PUSHER_KEY_HERE
PUSHER_APP_SECRET=PUT_YOUR_PUSHER_SECRET_HERE
PUSHER_APP_CLUSTER=PUT_YOUR_PUSHER_CLUSTER_HERE

كما أنه يجب تغيير قيمة BROADCAST_DRIVER:

BROADCAST_DRIVER=pusher

3. نقوم بإنشاء حدث معين :

php artisan make:event NewTemperatureRecord

سنلاحظ إضافة ملف NewTemperatureRecord.php داخل مجلد events . لنقم بتعديله :

<?php

namespace App\Events;

use Illuminate\Broadcasting\Channel;
use Illuminate\Queue\SerializesModels;
use Illuminate\Broadcasting\PrivateChannel;
use Illuminate\Broadcasting\PresenceChannel;
use Illuminate\Foundation\Events\Dispatchable;
use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;

class NewTemperatureRecord implements ShouldBroadcast
{
    use Dispatchable, InteractsWithSockets, SerializesModels;
    
    public $data;
  
    /**
     * هنا يتم التقاط أية بيانات و تسجيلها ضمن هذا الكائن
     *
     * @return void
     */
    public function __construct($passed_data)
    {
        $this->data = $passed_data;
    }

    /**
     * هنا يتم تعريف القنوات التي من المفترض أن ينتمي إليها هذا الحدث 
     *
     * @return \Illuminate\Broadcasting\Channel|array
     */
    public function broadcastOn()
    {
        return new Channel('temperature-channel');
    }
}

إنشاء متحكم يختص بالعملية :

php artisan make:controller TemperatureController

ثم لنتأكد من وضع المحتوى التالي به :

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class TemperatureController extends Controller
{
    public function update(Request $request)
    {
        // تحضير مصفوفة بيانات لتمريرها
        $data['temp'] = $request->temp;
        
        // Notify إثارة الحدث 
        event(new App\Events\NewTemperatureRecord($data));
    }
}

و لتأكد من تعريف المسارات اللازمة , واحد لعرض الصفحة وواحد لإرسال طلبات التحديث :

// web.php

Route::post('temperature','TemperatureController@update');
Route::view('temperature', 'temperature');

ثم بملف ما بالواجهة الأمامية سيكون علينا فقط : الإشتراك في هاته القناة + الإستماع لأحداث هاته القناة :

<!-- temperature.blade.php --> 

<!DOCTYPE html>
<head>
  <title>مثال  </title>
  
  <script src="https://js.pusher.com/4.1/pusher.min.js"></script>
  <script>
   
    // الإشتراك ضمن نفس تطبيق البوشر
   var pusher = new Pusher('{{env("MIX_PUSHER_APP_KEY")}}', {
      cluster: '{{env("PUSHER_APP_CLUSTER")}}',
      encrypted: true
    });
    
    // الاشتراك في نفس القناة
    var channel = pusher.subscribe('temperature-channel');
    
    // Notify الاستماع للحدث 
    channel.bind('App\\Events\\NewTemperatureRecord', function(data) {
      
      // إن تم اثارة الحدث قم بعرض البيانات
      document.querySelector('#temp').textContent = data.temp;
    });
  </script>
</head>

<body>
  <div id="temp"> 35 </div>
</body>

بدون تحديث الصفحة سيكون علينا إرسال طلبات أجاكس إلى المسار temp/ بالفعل POST و سنلاحظ تحدث القيمة في صفحة العرض temp/ .

Mohammed Abu Yousef · 5 أغسطس 2021

بتاريخ 22 ساعات قال Sam Ahw:

تحديث البيانات من طرف المتصفح يمكن من خلال إما استخدام web sockets لفتح اتصال مع الخادم وإرسال هذه البيانات الجديدة عند استقبالها بشكل فوري ومباشر إلى المستخدم وذلك سيتطلب تهئية مناسبة للخادم لديك ووضع الإعدادات المناسبة (بحيث يتم استقبال بيانات API عند الخادم لديك وإعادة إرسالها إلى المستخدم).

أما الحل الثاني والذي لا ينصح به في حال كانت الموارد محدودة على استضافة خادم الويب لديك، وهو طلب هذه البيانات بشكل مباشر من المتصفح كل مدة زمنية معيّنة من خلال استخدام AJAX أو axios مثلاً مع set interval، بحيث يتم إرسال طلب إلى الخادم كل 5 دقائق للتحقق من وجود بيانات جديدة، وفي حال وجودها يتم استقبالها في المتصفح وتحديثها ضمن الصفحة.

لا أعلم إن فهمت سؤالك بالشكل الصحيح، ولكن يمكنك إرفاق أجزاء الكود وما تحاول تحقيقه بالتفصيل لنتمكّن من مساعدتك بشكل أفضل.

شكرا عزيزي، تمام الذي أريده هو الجزء الأول من حديثك، أظن الذي أحتاجه هو ال websocket، كيف أستطيع استخدامها عندي في الكود، بحيث مثلا ( أريد صفحة تظهر جميع المستخدمين لدي في قاعدة البيانات، ف عند إضافة مستخدم جديد في قاعدة البيانات، يتم إظهار هذا المستخدم مباشرة دون الحاجة لتحديث الصفحة )

بتاريخ 15 ساعات قال Adnane Kadri:

يمكن استعمال دريفر Pusher لتحقيق الغرض

ألست خدمة pusher خدمة مدفوعة؟ أريد خدمة مجانية

تم التعديل في 5 أغسطس 2021 بواسطة Mohammed Abu Yousef

Sam Ahw · 5 أغسطس 2021

بتاريخ 4 دقائق مضت قال Mohammed Abu Yousef:

شكرا عزيزي، تمام الذي أريده هو الجزء الأول من حديثك، أظن الذي أحتاجه هو ال websocket، كيف أستطيع استخدامها عندي في الكود، بحيث مثلا ( أريد صفحة تظهر جميع المستخدمين لدي في قاعدة البيانات، ف عند إضافة مستخدم جديد في قاعدة البيانات، يتم إظهار هذا المستخدم مباشرة دون الحاجة لتحديث الصفحة )

ألست خدمة pusher خدمة مدفوعة؟ أريد خدمة مجانية

نعم ولكن يوجد حل بديل مجاني باستخدام الحزمة laravel-websockets المقدّمة من beyondcode وستجد في التوثيق الرسمي للارافيل شرح ورابط لهذه الحزمة وجميع التفاصيل المتعلّقة بكيفية استخدامها وتضمينها ضمن مشروعك.

Mohammed Abu Yousef · 5 أغسطس 2021

بتاريخ 1 دقيقة مضت قال Sam Ahw:

نعم ولكن يوجد حل بديل مجاني باستخدام الحزمة laravel-websockets المقدّمة من beyondcode وستجد في التوثيق الرسمي للارافيل شرح ورابط لهذه الحزمة وجميع التفاصيل المتعلّقة بكيفية استخدامها وتضمينها ضمن مشروعك.

ممكن مصدر لا يتضمن تفاصيل كثيرة، الذي أريده شيء بسيط

Adnane Kadri · 5 أغسطس 2021

بتاريخ 5 ساعات قال Mohammed Abu Yousef:

ألست خدمة pusher خدمة مدفوعة؟ أريد خدمة مجانية

صحيح .خدمات Pusher مدفوعة لكنها تقدم في عرضها المجاني sandbox إمكانية تمرير 200 ألف رسالة بشكل يومي . و هو رقم جد مناسب في مثل حالتك .

إظهار القيم دون الحاجة لتحديث الصفحة في لارافل

السؤال

Mohammed Abu Yousef

6 أجوبة على هذا السؤال

Recommended Posts

Sam Ahw

Adnane Kadri

Mohammed Abu Yousef

Sam Ahw

Mohammed Abu Yousef

Adnane Kadri

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية