اذهب إلى المحتوى
  • 0

لماذا لايظهر اشعار للمستخدم

ايمن ميلاد

بواسطة ايمن ميلاد

 مشاركة

السؤال

ايمن ميلاد عضو نشيط

ايمن ميلاد

نشر
نشر

السلام عليكم استخدم تقنية pusher  عند وضع تعليق علي منشور لكن لايظهر اشعار عن طريق alert  رغم ظهور في Debug console ممكن مساعدة في حالة مشكلة  

<?php

namespace App\Events;

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

class CommentNotification implements ShouldBroadcast
{
    use Dispatchable, InteractsWithSockets, SerializesModels;

    public $post_title;
    public $user_name;
    public $user_image;
    public $post;
    public $date;
  
    
    public function __construct($data = [])
    {
        $this->post_title = $data['post_title'];
        $this->user_name = $data['user_name'];
        $this->user_image = $data['user_image'];
        $this->post = $data['post'];
        $this->date = Carbon::now()->diffForHumans();
    }

   
  public function broadcastOn()
{
   
    return new Channel('real-notification.'.$this->post->user_id);
}

public function broadcastAs()
{
    return 'CommentNotification';
}
  
}
<!doctype html>
<html lang="en">
     <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>{{ config('app.name') }}</title>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">     
        <!-- font -->
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Cairo&display=swap" rel="stylesheet">
               <link href="{!! asset('theme/css/sb-admin-2.min.css') !!}" rel="stylesheet">

    
        <style>
            body {
                font-family: 'Cairo', sans-serif;
                background-color: #f0f0f0;
            }
                a { 
                text-decoration: none !important; 
                color: black;
            }

   ol, ul, menu {
                list-style: decimal !important;
                padding-right: 2rem !important;
            }
  ul, menu {
                list-style: inside !important;
                padding-right: 2rem !important;
            }

            input[type=file] {
                position: absolute !important;
                width: 100% !important;
                height: 100% !important;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                opacity: 0;
                cursor: pointer;
            }

       .input-title {
                width: 100%;
                padding: 30px;
                background: rgba(255,255,255,0.2);
                border: 2px dashed rgba(255,255,255,0.2);
                text-align: center;
                transition: background 0.3s ease-in-out;
            }

            .file-area:hover .input-title {
                background: rgba(255,255,255,0.1);
            }

            input[type=file] + .input-title {
                border-color: #f0f0f0;
                background-color: #f0f0f0;
            }
            
           
        </style>

         @yield('style')
        <!-- Scripts -->
        @vite(['resources/css/app.css', 'resources/js/app.js'])
    </head>
     <body dir="rtl" style="text-align: right;">
        
        <div>
            @include('partials.navbar')

            <main class="py-4 mb-5">
                <div class="container">
                    <div class="row">
                                  @include('alerts.success')

    

                        @yield('content')
                    </div>              
                </div>
            </main>
               
   {{-- @include('partials.footer') --}}
        </div>

        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
        <!-- fontawesome -->
        <script src="https://kit.fontawesome.com/fc1e322aff.js" crossorigin="anonymous"></script>
    <!-- ckeditor -->
        <script src="https://cdn.ckeditor.com/ckeditor5/35.0.1/classic/ckeditor.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
    {{-- Pusher --}}
  <script src="https://js.pusher.com/8.4.0/pusher.min.js"></script>

      
        <script>

    // Enable pusher logging - don't include this in production
    Pusher.logToConsole = true;

    var pusher = new Pusher('c5c9828ffa70def633e4', {
      cluster: 'mt1'
    });

  
var userId = "{{ auth()->id() }}"; 


var channel = pusher.subscribe('real-notification.' + userId);

channel.bind('CommentNotification', function(data) {
    alert("إشعار جديد: " + data.post_title);
    console.log(data);
});
  </script>
     
        <script src="{!! asset('theme/js/sb-admin-2.min.js') !!}"></script>
 


      

        @yield('script')
    </body>
</html>

 

  • أعجبني 1

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

Recommended Posts

  • 0
محمد عاطف25 عضو نشيط

محمد عاطف25

نشر
نشر

وعليكم السلام ورحمة الله وبركاته .

المشكلة الأكثر شيوعا غالبا هى في اسم الحدث (Event Name) فلديك : 

channel.bind('CommentNotification', function(data) {

ولكن في Laravel عندما تستخدم: 

public function broadcastAs()
{
    return 'CommentNotification';
}

يجب في الجافاسكريبت أن تضيف نقطة (.) قبل الاسم هكذا : 

channel.bind('.CommentNotification', function(data) {
    alert("إشعار جديد: " + data.post_title);
    console.log(data);
});

 

  • حزين 1
  • 0
ايمن ميلاد عضو نشيط

ايمن ميلاد

نشر
  • الكاتب
نشر

لم يتم حل مشكلة ممكن تدخل اخي محمد عن طريق anydisk  تحل مشكلة لي 

هذا كود حدث  

<?php

namespace App\Events;

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

class CommentNotification implements ShouldBroadcast
{
    use Dispatchable, InteractsWithSockets, SerializesModels;

    public $post_title;
    public $user_name;
    public $user_image;
    public $post;
    public $date;
  
    
    public function __construct($data = [])
    {
        $this->post_title = $data['post_title'];
        $this->user_name = $data['user_name'];
        $this->user_image = $data['user_image'];
        $this->post = $data['post'];
        $this->date = Carbon::now()->diffForHumans();
    }

   
  public function broadcastOn()
{
   
    return new Channel('real-notification.'.$this->post->user_id);
}

public function broadcastAs()
{
    return 'CommentNotification';
}
  
}
<!doctype html>
<html lang="en">
     <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>{{ config('app.name') }}</title>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">     
        <!-- font -->
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Cairo&display=swap" rel="stylesheet">
        <link href="{!! asset('theme/css/sb-admin-2.min.css') !!}" rel="stylesheet">
    
        <style>
            body {
                font-family: 'Cairo', sans-serif;
                background-color: #f0f0f0;
            }

            a { 
                text-decoration: none !important; 
                color: black;
            }

            ol, ul, menu {
                list-style: decimal !important;
                padding-right: 2rem !important;
            }

            ul, menu {
                list-style: inside !important;
                padding-right: 2rem !important;
            }

            input[type=file] {
                position: absolute !important;
                width: 100% !important;
                height: 100% !important;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                opacity: 0;
                cursor: pointer;
            }

            .input-title {
                width: 100%;
                padding: 30px;
                background: rgba(255,255,255,0.2);
                border: 2px dashed rgba(255,255,255,0.2);
                text-align: center;
                transition: background 0.3s ease-in-out;
            }

            .file-area:hover .input-title {
                background: rgba(255,255,255,0.1);
            }

            input[type=file] + .input-title {
                border-color: #f0f0f0;
                background-color: #f0f0f0;
            }
        </style>

         @yield('style')
        <!-- Scripts -->
        @vite(['resources/css/app.css', 'resources/js/app.js'])
    </head>
     <body dir="rtl" style="text-align: right;">
        
        <div>
            @include('partials.navbar')

            <main class="py-4 mb-5">
                <div class="container">
                    <div class="row">
                        @include('alerts.success')


                        @yield('content')
                    </div>              
                </div>
            </main>
            @include('partials.footer')
        </div>


        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
        <!-- fontawesome -->
        <script src="https://kit.fontawesome.com/fc1e322aff.js" crossorigin="anonymous"></script>
        <!-- ckeditor -->
        <script src="https://cdn.ckeditor.com/ckeditor5/35.0.1/classic/ckeditor.js"></script>
        <!-- JQuery -->
        <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
        <!-- Pusher -->
        <script src="https://js.pusher.com/7.2/pusher.min.js"></script>

        <script>

            // Enable pusher logging - don't include this in production
            Pusher.logToConsole = true;

            var pusher = new Pusher('d1e7578b54ec95179551', {
            cluster: 'mt1'
            });

            var channel = pusher.subscribe('my-channel');
            channel.bind('.CommentNotification', function(data) {
            alert(JSON.stringify(data));
            });
        </script>

        <script src="{!! asset('theme/js/sb-admin-2.min.js') !!}"></script>
        
        <script type="module">
            @if(Auth::check())
                var post_userId = {{Auth::user()->id}};
                Echo.private(`real-notification.${post_userId}`)
                .listen('CommentNotification', (data) => {
                    var notificationsWrapper = $('.alert-dropdown');
                    var notificationsToggle = notificationsWrapper.find('a[data-bs-toggle]');
                  var notificationsCountElem = notificationsWrapper.find('.notif-count');
var notificationsCount = parseInt(notificationsCountElem.text()) || 0;
                    var notifications = notificationsWrapper.find('div.alert-body');

                    var existingNotifications = notifications.html();
                    var newNotificationHtml = '<a class="dropdown-item d-flex align-items-center" href="#">\
                                                    <div class="ml-3">\
                                                        <div">\
                                                            <img style="float:right" src='+data.user_image+' width="50px" class="rounded-full"/>\
                                                        </div>\
                                                    </div>\
                                                    <div>\
                                                        <div class="small text-gray-500">'+data.date+'</div>\
                                                        <span>'+data.user_name+' وضع تعليقًا على المنشور <b>'+data.post_title+'<b></span>\
                                                    </div>\
                                                </a>';
                    notifications.html(newNotificationHtml + existingNotifications);
                    notificationsCount += 1;  
                    notificationsWrapper.find('.notif-count').text(notificationsCount);
                    notificationsWrapper.show();
                });
            @endif
        </script>

        <script>
            var token = '{{ Session::token() }}';
            var urlNotify = '{{ route('notification') }}';

            $('#alertsDropdown').on('click', function(event) {
                event.preventDefault();
                var notificationsWrapper = $('.alert-dropdown');
                var notificationsToggle = notificationsWrapper.find('a[data-bs-toggle]');
                var notificationsCountElem = notificationsToggle.find('span[data-count]');
                
                notificationsCount = 0;
                notificationsCountElem.attr('data-count', notificationsCount);
                notificationsWrapper.find('.notif-count').text(notificationsCount);
                notificationsWrapper.show();

                $.ajax({
                    method: 'POST',
                    url: urlNotify,
                    data: {
                        _token: token
                    },
                    success : function(data) {
                        var resposeNotifications = "";
                        $.each(data.someNotifications , function(i, item) {
                            var post_slug = "{{ route('post.show', ':post_slug') }}";
                            post_slug = post_slug.replace(':post_slug', item.post_slug);
                            resposeNotifications += '<a class="dropdown-item d-flex align-items-center" href='+post_slug+'>\
                                                        <div class="ml-3">\
                                                            <div">\
                                                                <img style="float:right" src='+item.user_image+' width="50px" class="rounded-full"/>\
                                                            </div>\
                                                        </div>\
                                                        <div>\
                                                            <div class="small text-gray-500">'+item.date+'</div>\
                                                            <span>'+item.user_name+' وضع تعليقًا على المنشور <b>'+item.post_title+'<b></span>\
                                                        </div>\
                                                    </a>';
                        

                            $('.alert-body').html(resposeNotifications);
                    });
                    }
                });
            });
        </script>
        @yield('script')
    </body>
</html>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark shadow-sm">
    <div class="container-fluid">
        <a class="navbar-brand px-lg-4" href="{{ url('/') }}">{{ config('app.name') }}</a>

        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                <li class="nav-item" style="list-style: none">
                    <a class="nav-link active" href="{{ url('/') }}">الصفحة الرئيسية</a>
                </li>
                <li class="nav-item dropdown" style="list-style: none">
                    <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                        الصفحات
                    </a>
                    <ul class="dropdown-menu text-end">
                        <li><a class="dropdown-item" href="#">عن الموقع</a></li>
                    </ul>
                </li>
            </ul>

            <form class="d-flex mx-auto my-2 my-lg-0" method="post" action="{{ route('search') }}">
                @csrf
                <input class="form-control me-2 text-end" name="keyword" type="search" placeholder="ابحث عن منشور..." aria-label="Search">
                <button class="btn btn-outline-light" type="submit">ابحث</button>
            </form>

            <ul class="navbar-nav ms-auto align-items-center">
                @auth
                    <li class="nav-item px-2" style="list-style: none">
                        <a class="nav-link" href="{{ route('post.create') }}" title="موضوع جديد">
                           موضوع جديد
                          <i class="fa fa-plus fa-fw"></i>
                        </a>
                    </li>

                    <li class="nav-item dropdown px-2 alert-dropdown">
                        <a class="nav-link dropdown-toggle d-flex align-items-center position-relative no-caret" 
                           href="#" id="alertsDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                            <i class="fas fa-bell fa-lg"></i>
                         <span class="notif-count position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
    {{ Auth::user()->alerts()->count() }}
</span>
                        </a>
                        <ul class="dropdown-menu dropdown-menu-end shadow mt-3 text-end" aria-labelledby="alertsDropdown" style="min-width: 280px;">
                            <li style="list-style: none"><h6 class="dropdown-header fw-bold border-bottom pb-2">الإشعارات</h6></li>
                            <div class="alert-body" style="max-height: 300px; overflow-y: auto;">
                                <li style="list-style: none"><a class="dropdown-item small py-2" href="#">لا توجد إشعارات جديدة حالياً</a></li>
                            </div>
                            <li style="list-style: none"><hr class="dropdown-divider"></li>
                            <li style="list-style: none"><a class="dropdown-item text-center small text-primary" href="#">عرض جميع الإشعارات</a></li>
                        </ul>
                    </li>

                    <li class="nav-item dropdown px-2 " style="list-style: none">
                        <a class="nav-link dropdown-toggle d-flex align-items-center no-caret" 
                           href="#" id="userDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                            <img class="rounded-circle border border-secondary" 
                                 width="35" height="35" 
                                 src="{{ Auth::user()->profile_photo_url }}" 
                                 alt="{{ Auth::user()->name }}">
                        </a>
                        <ul class="dropdown-menu dropdown-menu-end shadow mt-3 text-end" aria-labelledby="userDropdown" style="min-width: 200px;">
                            <li style="list-style: none"><h6 class="dropdown-header fw-bold border-bottom pb-2 text-dark">{{ Auth::user()->name }}</h6></li>
                            <li style="list-style: none"><a class="dropdown-item py-2" href="#"><i class="fa fa-user-circle ms-2"></i>الملف الشخصي</a></li>
                            <li style="list-style: none"><a class="dropdown-item py-2" href="#"><i class="fa fa-cog ms-2"></i>الإعدادات</a></li>
                            <li style="list-style: none"><hr class="dropdown-divider"></li>
                            <li style="list-style: none">
                                <a class="dropdown-item py-2 text-danger" href="{{ route('logout') }}" 
                                   onclick="event.preventDefault(); document.getElementById('logout-form').submit();">
                                   <i class="fa fa-sign-out-alt ms-2"></i>تسجيل الخروج
                                </a>
                            </li>
                        </ul>
                    </li>
                @endauth

                @guest
                    <li style="list-style: none" class="nav-item"><a class="nav-link" href="{{ route('login') }}">دخول</a></li>
                    <li style="list-style: none" class="nav-item"><a class="nav-link" href="{{ route('register') }}">تسجيل</a></li>
                @endguest
            </ul>
        </div>
    </div>
</nav>

<form id="logout-form" action="{{ route('logout') }}" method="POST" class="d-none">@csrf</form>

<style>
    .no-caret::after { display: none !important; }
    .dropdown-menu { border: none; border-radius: 10px; }
    .dropdown-item { transition: all 0.2s; }
    .dropdown-item:hover { background-color: #f8f9fa; color: #000; }
</style>

 

اشعار يظهر كمحتوي لكن رقم اشعار دائما صفر الي عندما احدث صفحة

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

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

×
 مشاركة
اذهب إلى قائمة الأسئلة

  • إعلانات

  • تابعنا على



×
×
  • أضف...