Laravel为后端API时，AngularJS能否实现实时通知？方案咨询

Great question! Absolutely, you can implement real-time notifications with your Laravel backend and AngularJS frontend—even with your separated, authenticated CRUD setup. Let’s break down your options, including using Laravel Echo and alternative approaches tailored to your stack.

While Laravel Echo is often linked to newer frontend frameworks, it works perfectly well with AngularJS. Here’s how to set it up:

Backend (Laravel) Setup #

• First, install required dependencies:

  composer require pusher/pusher-php-server
  npm install pusher-js laravel-echo
  

• Configure your .env file with your Pusher credentials:

  BROADCAST_DRIVER=pusher
  PUSHER_APP_ID=your-app-id
  PUSHER_APP_KEY=your-app-key
  PUSHER_APP_SECRET=your-app-secret
  PUSHER_APP_CLUSTER=your-cluster
  

• Ensure the BroadcastServiceProvider is uncommented in config/app.php.
• Create a broadcast-enabled notification class (e.g., RealTimeNotification):

  php artisan make:notification RealTimeNotification
  

  Update the generated class to support broadcasting:

  public function via($notifiable)
  {
      return ['database', 'broadcast'];
  }
  
  public function toBroadcast($notifiable)
  {
      return new BroadcastMessage([
          'message' => 'You have a new notification!',
          'data' => $this->data
      ]);
  }
  
  public function broadcastOn()
  {
      return new PrivateChannel('user.' . $notifiable->id);
  }
  

Frontend (AngularJS) Setup #

• Include pusher-js and laravel-echo in your project (via CDN or bundled assets):

  <script src="https://js.pusher.com/7.2/pusher.min.js"></script>
  <script src="/js/echo.js"></script>
  

• Initialize Laravel Echo in your AngularJS app (best done in a service or run block) with authentication:

  angular.module('yourApp')
    .run(['$rootScope', function($rootScope) {
      window.Echo = new Echo({
          broadcaster: 'pusher',
          key: 'your-pusher-app-key',
          cluster: 'your-pusher-cluster',
          auth: {
              headers: {
                  Authorization: 'Bearer ' + localStorage.getItem('auth_token')
              }
          }
      });
  
      // Listen for notifications on the user's private channel
      const userId = $rootScope.currentUser.id;
      Echo.private('user.' + userId)
        .notification((notification) => {
          // Trigger AngularJS digest cycle to update the view
          $rootScope.$apply(() => {
              $rootScope.notifications.push(notification);
          });
        });
    }]);
  

  Note: Always wrap Echo callback logic in $scope.$apply() or $timeout()—Echo runs outside AngularJS’s digest cycle, so this ensures your view updates correctly.

If you prefer a lighter approach without Laravel Echo’s abstraction, you can use Pusher.js directly in AngularJS:

Backend Setup #

Same as above—configure Pusher, create broadcast-enabled notifications, and set up channels.

Frontend Setup #

• Initialize Pusher and subscribe to your private channel:

  angular.module('yourApp')
    .service('NotificationService', ['$rootScope', function($rootScope) {
      this.init = function(userId) {
        const pusher = new Pusher('your-pusher-app-key', {
            cluster: 'your-pusher-cluster',
            authEndpoint: '/broadcasting/auth',
            auth: {
                headers: {
                    Authorization: 'Bearer ' + localStorage.getItem('auth_token')
                }
            }
        });
  
        const channel = pusher.subscribe('private-user.' + userId);
        channel.bind('Illuminate\\Notifications\\Events\\BroadcastNotificationCreated', function(data) {
            $rootScope.$apply(() => {
                $rootScope.notifications.push(data.notification);
            });
        });
      };
    }]);
  

  This skips Laravel Echo entirely and lets you work directly with Pusher’s native API, which might feel more intuitive for AngularJS developers.

• Authentication: Ensure your Laravel backend’s /broadcasting/auth endpoint uses the same auth middleware as your CRUD routes (e.g., auth:sanctum or auth:api) to restrict channel access to authenticated users.
• CORS Configuration: Update your Laravel CORS settings to allow your AngularJS frontend domain to access the /broadcasting/auth endpoint and Pusher’s API domains.
• Error Handling: Add error listeners to your Echo/Pusher instances to handle connection issues or auth failures gracefully in the frontend.

Either approach will work for your stack—Laravel Echo simplifies common broadcast tasks, while direct Pusher.js usage gives you more control. Pick whichever fits your team’s familiarity and project needs!

内容的提问来源于stack exchange，提问作者Mohammad_Hosseini